Add css to header of a specific column

Posted by: tkarthik.006 on 17 April 2018, 6:39 pm EST

    • Post Options:
    • Link

    Posted 17 April 2018, 6:39 pm EST

    Hi,

    I need a particular column header css needs to be changed. How can I achieve that?

    Thanks.

  • Posted 18 April 2018, 8:12 pm EST

    Hello Karthik,

    You can use the code as follows to set the backcolor of header cell in CSS:

    .gc-column-header-cell.c1 {

    background-color: blue;

    }

    where “c1” is index of second column(zero based). Similarly to set the style for column 3 you can use “c2”.

    Thanks,

    Deepak Sharma

  • Posted 22 April 2018, 12:09 pm EST

    Hi,

    Your solution works until I don’t perform any column any column reorders.

    What about if i want to perform column reorder and still persist the styles to the same column not in the position in the grid.

    For example:

    If I want styling for column 1 I’ll apply for c1 and whatever the data that comes in c1 will get those styles. But if I apply styles for data in c1, if the data reorders from c1 to c3, that styling should get reflected in c3 not c1 anymore.

  • Posted 22 April 2018, 11:03 pm EST

    Hello,

    You can still use

    $(‘.gc-column-header-cell[data-column=“amount”]’).css(‘background-color’, ‘blue’);

    To set the back ground colour for a column header cell after column reorder is complete.

    Please refer to the attached sample application.

    Thanks,

    Deepak SharmaSpreadViewColumnReorder.zip

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels