Change color for column header for nested grid

[arsue787Participant]

Hi Team,

How to change color for nested column header. Currently I able to change color for parent grid using this .jqx-widget-header:nth-child(1), but for nested grid I need to change it to different color from parent grid.

Thank you,
arsue

[Yavor DashevParticipant]

Hi arsue787,

Thank you for contacting us!

A way of achieving the functionality you want is to use the classname property of the column in the columns array for the nested grid.
I have prepared a quick code snippet to showcase you this.
Note that classname property applies only for the columns header.
The demo I used for base is this: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/nestedgrids.htm?light

This is the nested grid properties:

    if (grid != null) {
                    grid.jqxGrid({
                        source: nestedGridAdapter, width: 780, height: 200,
                        columns: [
                           //In the next line we set the class name of the column we want to change the header color
                          { text: 'Ship Name', datafield: 'ShipName', width: 200, classname:'nested-grid-header-class' },
                          { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                          { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                          { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                          { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                       ]
                    });
                }
            }

And then add the class in your CSS with its styles:

        
        .nested-grid-header-class{
            background-color: red!important;
        }

Let me know if that works for you.

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[arsue787Participant]

Hi Team,

Thanks! Its work perfectly.

[arsue787Participant]

Hi Team,

Sorry another question.

In nested grid, how about if I want to change 1st and 2nd column header is in red color then 3rd and 4th in blue color.

Thanks
Arsue

[arsue787Participant]

Hi Team,

I able find solution. I’m using this CSS

.nested-grid-header-class:nth-child(1)
{
background-color: #375623 !important;
}

Thank you,
Arsue

[Author]

Posts