Formatter returns a string or an object

[edwardbr]

Hi slickgrid expects the formatter to be able to send an object or a string, if it is an object then you can specify a style as well as content.

[ghiscoding]

Hmm I've never heard of that, do you have some Slickgrid code to point to?

Also, using any seems quite risky and will possibly open up a lot of future issues that could be totally unrelated (and I would rather not deal with them). If it's an object, doesn't it follow certain properties to use? If so, I would rather use them and change the type as something like string | { style: string }

Lastly did you know you can use params as a generic way to pass any type of properties to your Formatter? Not sure if that is related to your problem though

EDIT

If you want this change to be merged, you will have to hurry because I'm about to release a new version and I want it done by Friday morning. I am not in favor at all about the type any as this is way too generic and will possibly cause more harm than good. Please come up with something better and provide answers to my questions in 1st paragraph please. Also, can you provide an example what you are trying to achieve. Thanks

[edwardbr]

I fully agree the benefits of TypeScript is type safety! However the formatter element in a column definition can be either a string or an object as far as the core SlickGrid implementation is concerned.
In this sample I am returning an object {addClasses: string, text: string}; so that I can specify different classes for each cell:

this.columnDefinitions.push({
            id: col.name,
            field: col.name,
            name: col.name,
            sortable: true,
            formatter: (row, cell, value, columnDef, rowData) => {
              const match = rowData.match;
              const state: ReconciliationItemState = match.state;

              let style = 'match';
              //other logic
              return {addClasses: style, text: value};
            }
          });

One thing that is really annoying me, (and this may be my lack of understanding in Angular) is that I would like different css styles for different instances of slickgrid on the same page. I have a single panel containing a real time list of messages using a single column grid, and a central panel in this case containing a reconciliation report. I am finding that each component's local scss is not working and I am limited to using the global scss instead.

[ghiscoding]

I will point out again that any is way too generic and is not always good for objects. I had to google it to find a real example in Slickgrid, and I finally found this slickgrid example, which I didn't fully looked at in the past. So anyway, all that to say, from what I can see in the example, it accepts { text , removeClasses, addClasses } as shown in this line, so in that case the type can be string | { text: string; removeClasses: string; addClasses: string; } and that is totally type safe and I would accept that but I still don't want to accept just any as it will confuse people.

As for the single styling in Angular, I also don't fully understand it and I often have to resolve to ViewEncapsulation.none, which I think you didn't try. You can see an example in my Uncyclo, this provides a way to change the amount of rows to show as a header for 1 grid (page) without affecting the other pages in your project.

[edwardbr]

Ok cool! I was not aware that multiple rerun types was possible in typescript, nice! Doing that in other languages has always been problematic. Thanks for the style tip. Regards Edward

…

On Fri, 11 Jan 2019 at 14:23, Ghislain B. ***@***.***> wrote: I will point out again that any is way too generic and is not always good for objects. I had to google it to find a real example in Slickgrid, and I finally found this slickgrid example <http://6pac.github.io/SlickGrid/examples/example2-formatters.html>, which I didn't fully looked at in the past. So anyway, all that to say, from what I can see in the example, it accepts { text , removeClasses, addClasses } as shown in this line <https://github.com/6pac/SlickGrid/blob/master/examples/example2-formatters.html#L69>, so in that case the type can be string | { text: string; removeClasses: string; addClasses: string; } and that is totally type safe and I would accept that but I still don't want to accept just any as it will confuse people. As for the single styling in Angular, I also don't fully understand it and I often have to resolve to ViewEncapsulation.none, which I think you didn't try. You can see an example in my Uncyclo <https://github.com/ghiscoding/Angular-Slickgrid/wiki/Multiple-Column-Header-Rows-(3--rows)>, this provides a way to change the amount of rows to show as a header for 1 grid (page) without affecting the other pages in your project. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#96 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAzk-AmfTjcZZJYvQAugvZqUX47PIo1oks5vCJ5ZgaJpZM4Z4LM8> .

[ghiscoding]

Can you update your PR now? I'm about to release another fix version and I will be done for quite some time

[edwardbr]

Hi I am a bit rusty on github UI, I have pushed my changes, I hope that it is reflected into this pull request, or shall I create a new one?

[ghiscoding]

You're missing the types on each properties. It should be this

string | { text: string; removeClasses: string; addClasses: string; }

[ghiscoding]

I went ahead and modified your PR directly in GitHub, I need to push my new version now so couldn't wait. Thanks for the PR and feedback

[ghiscoding]

Alright it's in the new version 2.1.3, also note that after merging your PR, I had to do code refactoring in the ExportService because it uses the formatter and it wasn't just a string type anymore (ref commit)

Also if you like the lib, make sure to up vote it ⭐️ that helps in making it more popular.
Cheers