jQuery UI Widgets Forums Grid Change color for column header for nested grid

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  arsue787 1 month, 3 weeks ago.

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

  • arsue787
    Participant

    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 Dashev
    Participant

    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


    arsue787
    Participant

    Hi Team,

    Thanks! Its work perfectly.


    arsue787
    Participant

    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


    arsue787
    Participant

    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

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

You must be logged in to reply to this topic.