StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You are right you are not the first person who ask the question. To clear the situation with the cell color I made <a href="http://www.ok-soft-gmbh.com/jqGrid/CellColor.htm" rel="noreferrer">the demo</a></p> <p><img src="https://i.stack.imgur.com/AHvnO.png" alt="enter image description here"></p> <p>for you which change the text color of the cell or the background color of the sell in different ways:</p> <pre><code>loadComplete: function() { // 2 is zero-base index of the column 'name' ('Client'). Every from the options // multiselect:true, rownumbers:true and subGrid:true will increase // the index by 1 because the option inserts additional columns $("#6 td:eq(2)", grid[0]).css({color:'red'}); grid.jqGrid('setCell',"12","name","",{color:'red'}); grid.jqGrid('setCell',"10",'name', '', 'my-highlight'); grid.jqGrid('setCell',"8",'name', '', 'ui-state-error ui-state-error-text'); grid.jqGrid('setCell',"4","name","",{'background-color':'yellow', 'background-image':'none'}); grid.jqGrid('setCell',"3","name","",'ui-state-highlight'); } </code></pre> <p>where</p> <pre><code><style type="text/css"> .my-highlight { color: red; } </style> </code></pre> <p>and "3", "4", "6", "8", "10" and "12" are th rowid of the rows where the color of the corresponding column will be changed.</p> <p>By the way my personal favorites are the ways using 'ui-state-highlight' or 'ui-state-error ui-state-error-text' classes which are the part of the <a href="http://jqueryui.com/docs/Theming/API" rel="noreferrer">jQuery UI Themes</a>.</p> <p><strong>UPDATED</strong>: To understand the difference of the usage of different methods in case of the usage of another jQuery UI Theme I added <a href="http://www.ok-soft-gmbh.com/jqGrid/CellColorLeFrog.htm" rel="noreferrer">one more demo</a> used La Frog Theme where the same table as above look like the following:</p> <p><img src="https://i.stack.imgur.com/PAGBQ.png" alt="enter image description here"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload