Search code examples
jqueryjqgridsubgrid

Change only jqGrid Subgrid header styles

I've jqgrid and Grid as Subgrid. I want to have different header style (say background color) for only subgrid.

I've tried to change .ui-jqgrid-htable,.ui-widget-header classes,but it's impacting both main grid and subgrid headers.

How can I only change subgrid header styles?

enter image description here

Solution

  • You can set background CSS style on .ui-jqgrid .subgrid-data .ui-th-column for example to overwrite default background image and background color used in the column headers.

    For example the following demo just remove the default background image and set yellow as the background color with respect of the following CSS

    .ui-jqgrid .subgrid-data .ui-th-column { background: yellow }

    The results look like on the picture below

    enter image description here

    UPDATED: One can consider to remove the column headers from subgrid at all. It could be interesting for example in case when the subgrid have only one column (one can use autowidth: true option in the subgrid additionally) or in case when subgrid have the same column headers like the main grid. See the answer for more information.