1

I want to change the color of one column in JQgrid. I have been changing the color of one row on some condition in jqgrid but now I want to change the color of one complete column of jqgrid. I have searched but i have not found anything about this? if there is any way or any question has asked then please refer me.

For Example: There are 3 rows in JQgrid(UserId,Username,Cnic) The USerid entire column color should be changed.

Umer Waheed
  • 4,044
  • 7
  • 41
  • 62
  • 1
    See [the old answer](http://stackoverflow.com/a/12180842/315935) – Oleg Dec 22 '15 at 08:33
  • Thanks @Oleg. Waiting for your reply. Yes this can be helpful. But is there any way to change complete column color. I know explicitly the column that color i want to change.I can do this with change color of cell by cell but i want to know without cell by cell. – Umer Waheed Dec 22 '15 at 08:38
  • You are welcome! Sorry, but I don't full understand the logic. You have some data or page of data (you don't posted any details whether you load the data from the server or not and whether you load **all rows at once** from the server, using `loadonce: true`, or not). Now you write that you want to set the column of the *whole column* column. HTML table can't set the color of column: only the color of cell or the color of row. You can still use `classes` attribute of `colModel` item to set class for *all cells* in the column. Probably you need choose the way, but *when* you should set it? – Oleg Dec 22 '15 at 08:46
  • You should post more details about your scenario. If you load the data from the server then you can use `beforeProcessing` callback to analyse the data returned from the server and to set or to remove `classes` property from the specified column with respect of `setColProp` for example. Which version of jqGrid you use? Which fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7)? The usage of `setCell` in the loop is less effective (much slowly for large grids). – Oleg Dec 22 '15 at 08:48
  • @Oleg i just want to know to change whole color of column and now i got my answer that "HTML table can't set the color of column: only the color of cell or the color of row. ". Thanks for reply. – Umer Waheed Dec 22 '15 at 08:58

2 Answers2

1

Perhaps this will help, but without code it is hard to figure out exactly what you need: How to change the color of jqGrid cell?

Community
  • 1
  • 1
Ioan-Radu Tanasescu
  • 546
  • 4
  • 17
  • Thanks for reply.This is about to change the color of particular cell. This can be helpful but i want to change complete color of one column. – Umer Waheed Dec 22 '15 at 08:32
  • 1
    The best thing to do is to go through the available methods and see what you can use: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods You can also try to use `setCell();` in a for loop, where you select the column you want, and iterate the color change for every cell of that column. – Ioan-Radu Tanasescu Dec 22 '15 at 08:40
1

If you want to change the color of the whole column then you should better to use classes property of the column and optionally labelClasses if you use my fork of jqGrid (free jqGrid) and you want to change the column of the column header additionally.

It's important that you define the CSS rule for the class used in classes / labelClasses correctly. If you need set the background-color then you should set background-image: none; additionally to remove the background image inherited from jQuery UI classes.

Alternately you can use cellattr callback in the column to set the class or style attribute on all cells on the column. See the answer for more details.

It's important to remark, that there are no way to set some CSS property on the column of HTML <table>. One can set the property only on the row (<tr>) or on the cell (<td>). In general one could use col and colgroup, but it have very restricted possibilities and the possibilities depend on HTML version which one use and from the web browser. All attempts to use it practically failed and jqGrid don't use the possibility.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798