Cell color for Dynamic Header and Dynamic Data

[shakti_singhParticipant]

Hi,
How to color one column of grid based on the data what we are getting dynamically. I’m using dynamic header and dynamic data from json.
I’m not getting how to get the particular column which is generating dynamically.

In your example dynamiccolumns
i have created like this and it is working fine, now i want to change the specific column color. Below is the code I’m using.

source: any =
    {
        datatype: 'json',
        url: '../assets/Ref_latest.json'
    };
 dataAdapter: any = new jqx.dataAdapter(this.source, {
        autoBind: true,
        downloadComplete: (data: any): void => {
            let columns = data[0].columns;
            let rows = data[1].rows;
            let gridAdapter = new jqx.dataAdapter({
                id: 'name',
                localdata: rows
            });
            
            
            this.myGrid.hideloadelement();
            this.myGrid.beginupdate();
            this.myGrid.setOptions
                ({
                    source: gridAdapter,
                    columns: columns
                });
            this.myGrid.endupdate();
        }
    });

So in this I want to change the color of Calories Column based on their value.
Please help me with sample code in angular

[MartinParticipant]

Hello shakti_singh,

Please, take a look at the following Example.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[shakti_singhParticipant]

Hi Marting,

Thanks for Reply, I have checked the provided example but it is having some issue like when I’m scrolling the grid the color is still remains at the same position, for example you have given RED color <100 value but when I’m scrolling the red color is on same place (5th position) but the value gets changed for red color.

So please help me to resolve this.

[MartinParticipant]

Hello shakti_singh,

Please, check the Example again. I have updated it.
Now encapsulation: ViewEncapsulation.None is added to the @Component and the styles are moved in app.component.css file, instead of setting them with jQuery.
This resolves the issue.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts