jQuery UI Widgets Forums Angular Cell color for Dynamic Header and Dynamic Data

This topic contains 3 replies, has 2 voices, and was last updated by  Martin 5 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • shakti_singh
    Participant

    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


    Martin
    Participant

    Hello shakti_singh,

    Please, take a look at the following Example.

    Best Regards,
    Martin

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


    shakti_singh
    Participant

    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.

    issue

    So please help me to resolve this.


    Martin
    Participant

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.