18

I use the following line at the $(document).ready(

$("#stSearchTermsGrid").setCell(2, 2, '', {color:'red'}) ;

but it doesn't work. Did I write it in a wrong way or placed it in the wrong place.

I know this question has been asked more than once before and this is how I got the first line. But I am still not able to do it and not knowing where the problem is.

Ahmad Farid
  • 14,398
  • 45
  • 96
  • 136
  • I updated my answer a little to use both styles 'ui-state-error ui-state-error-text' together instead of only one 'ui-state-error-text' before. – Oleg Feb 09 '11 at 12:34
  • What if I want to change of the css for the add/edit form of jqgrid ? – Bhavik Ambani Aug 13 '12 at 05:54

1 Answers1

48

You are right you are not the first person who ask the question. To clear the situation with the cell color I made the demo

enter image description here

for you which change the text color of the cell or the background color of the sell in different ways:

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');
}

where

<style type="text/css">
    .my-highlight { color: red; }
</style>

and "3", "4", "6", "8", "10" and "12" are th rowid of the rows where the color of the corresponding column will be changed.

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 jQuery UI Themes.

UPDATED: To understand the difference of the usage of different methods in case of the usage of another jQuery UI Theme I added one more demo used La Frog Theme where the same table as above look like the following:

enter image description here

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @ankit5607san: You are welcome! The current version of jqGrid support `cellattr` (see [the answer](http://stackoverflow.com/a/7408355/315935) and [this one](http://stackoverflow.com/a/12180842/315935)) which is more recommended as the usage of `setCell` inside of `loadComplete`. – Oleg Nov 09 '12 at 08:35
  • @Oleg: This is fantastic. But, I want to change CSS for all cells of a column whose name and index I have. – Hardik Mishra Jan 11 '13 at 12:08
  • 1
    @HardikMishra: Te answer is very old. There are other possibilities to do the same now. You can use `cellattr` (see my another comment above). If you need to set some additional CSS on some columns *without any condition* you can just use `classes` property (see [the documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options)) – Oleg Jan 11 '13 at 12:13
  • @Oleg: I am aware with `classes` attribute and I have used it. But I have a feature called "Freeze Column" and I need to change CSS for that. I have colId and colName with me. – Hardik Mishra Jan 11 '13 at 12:37
  • @HardikMishra: It's probably better if you'll post a new question where you describe the problem in details. – Oleg Jan 11 '13 at 12:45
  • @Oleg: I solved it. It required to call `trigger("reloadGrid")` after adding `classes` property to `colModel`. :) – Hardik Mishra Jan 15 '13 at 06:59
  • @Oleg Why you use `loadComplete` rather then `gridComplete` – Gill Bates Mar 15 '13 at 15:06
  • @GillBates: I think that your question is not related to my answer. If you want to know what is the difference between `loadComplete` and `gridComplete` you should better ask new question. I will try to explain it. – Oleg Mar 15 '13 at 15:19
  • @Oleg Ill post topic on that. But also I got new question (I hope more relevant) - how, after `ui-state-highlight` being set, restore 'normal' state of cell (with conformity to theme)? – – Gill Bates Mar 15 '13 at 16:01
  • @GillBates: In the most scenarios it's not needed. On reloading the grid cell will be recreated. By the way the usage of `cellattr` is better instead of usage of `setCell`. In any way there are no direct method which allows you to *remove* class. So if you really need do this you can use `removeClass` on the corresponding `` element which represent the cell. There are many ways how to get DOM element for the cell. The best one depends on scenarios which you have. – Oleg Mar 15 '13 at 17:23
  • @GillBates: Inside of `click` handler you have parameter `e` (event object). `e.target` is either `` or you can use `var $cell = $(e.target).closest("td")` to get it. You can use `$cell.hasClass("ui-state-highlight")` to test whether cell is already highlighted or not. You can use `$cell.addClass("ui-state-highlight")` or `$cell.removeClass("ui-state-highlight")` to toggle highlighting. – Oleg Mar 15 '13 at 18:12