CODEWITHSUNDEEP
jqueryjqgrid
Suraj Bhandari
Suraj Bhandari

Reputation: 27

Is it possible to give backgroud color in jqgrid setGroupHeaders or Vertical lines to segregate it from column

This is my setGroupHeaders Code. Is it possible to give background color to these column.

jQuery("#plist").jqGrid('setGroupHeaders', {
  useColSpanStyle: false,
  groupHeaders: [{
    startColumnName: 'A',
    numberOfColumns: 1,
    titleText: ''
  }, {
    startColumnName: 'B',
    numberOfColumns: 3,
    titleText: 'My First header'
  }, {
    startColumnName: 'E',
    numberOfColumns: 2,
    titleText: 'second Header'
  }]
});

Upvotes: 0

Views: 485

Answers (1)

Oleg
Oleg

Reputation: 221997

First of all I want to remind, that jqGrid 4.4.3 is almost 5 years old, which is very old for web development. Is it wirklich required to use the retro version? I'd recommend you to upgrade to the latest version (4.15.1) of free jqGrid.

I'm not sure that I correctly understand where you want to change the background color. I suppose that you need to use something like the following CSS rule:

.jqg-second-row-header > th.ui-th-column-header {
    background-color: orange; /* change background color */
    background-image: none;   /* remove default background-image */
    color: blue;   /* change the color of the text to correspond background color */
    height: 1.7em; /* increase the height of the header line */
}

See https://jsfiddle.net/OlegKi/eba8z5jm/

If you would need to set different background colors on different column headers, then you can modify the above CSS rule to for example

.jqg-second-row-header > th.ui-th-column-header:nth-child(4) {
    background-color: orange; /* change background color */
    background-image: none;   /* remove default background-image */
    color: blue;   /* change the color of the text to correspond background color */
    height: 1.7em; /* increase the height of the header line */
}

See https://jsfiddle.net/OlegKi/eba8z5jm/3/

Upvotes: 2

Related Questions