how to change row color using index or row number in jqgrid?

Question

here add ad data to gird from text field. Then we can edit row data. If row column be empty that row will be change its color how to do it?

I got row ids using java code. ie row id= 2,3 is empty. how to change its color using this id's?

jsp grid load code:

<s:url id="mobbillid" action="newmul_mob_gridact" />   
    <sjg:grid caption="EMPLOYEE MOBILEBILL DETAILS"
              gridModel="mobbill_gridModel" 
              height="200"
              href="%{mobbillid}"
              id="gridtab"
              cellEdit="true"
              cellurl="%{mobbillid}"              
              rownumbers="true"
              viewrecords="true"
              pager="true"
              pagerPosition="center"
              navigator="true"
              navigatorSearch="true"
              navigatorSearchOptions="{multipleSearch:true}"
              navigatorDelete="false"
              navigatorEdit="false"
              loadonce="true"
              rowNum="10000"
              multiselect="true"
              reloadTopics="reloadSearchedClaims"
              footerrow="false"
              userDataOnFooter="true"
              onSelectRowTopics="rowselect"
            >
        <sjg:gridColumn name="newsin_mob_faname" index="newsin_mob_faname" title="FAcode" width="100" />
        <sjg:gridColumn name="newsin_mob_name" index="newsin_mob_name" title="FANAME" width="100" />
        <sjg:gridColumn name="newsin_mob_no" index="newsin_mob_no" title="MOBNO" width="100" />
        <sjg:gridColumn name="newsin_mob_billno" index="newsin_mob_billno" title="BILLNO" width="40" editoptions="true" editable="true"  />
        <sjg:gridColumn name="newsin_mob_billamt" index="newsin_mob_billamt" title="BILLAMT" width="90" editable="true" />
        <sjg:gridColumn name="newsin_mob_othchrg" index="newsin_mob_othchrg" title="OTHCHRG" width="95" editable="true" />
        <sjg:gridColumn name="newsin_mob_psts" index="newsin_mob_psts" title="refid" width="70" align="right"  hidden="true"/>
        <sjg:gridColumn name="newsin_mob_rmrk" index="newsin_mob_rmrk" title="REMARK" width="75" align="right"  editable="true"/>
        </sjg:grid>

enter image description here

what you mean with "how to change row color"? Do you want just **select** specified row or really change its text color or background color? Do you really need to specify the row by row number or by index and not by **rowid**? If you can use rowid or identify the row by its data then [rowattr](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events) callback would be the best choice for you. See [the answer](http://stackoverflow.com/a/10531680/315935) for the code example. — Oleg, Oct 11 '14 at 12:09
Sorry, but I don't understand what you mean. Could you answer on the questions from my previous comment? — Oleg, Oct 13 '14 at 06:02

Barry · Answer 1 · 2014-10-11T07:53:35.947

0

One of the ways to do that is assign a class to the row or column with the error (f.i. class="error"). In your css you can specify your color.

I you still want to do this by id, lookup the element with the id using $("tr[id=2]") or $("td[id=2]") if you have assigned the id to an attribute named id in the row or column.

edited Oct 11 '14 at 07:53

answered Oct 11 '14 at 07:48

Barry

3,683
1
18
25

can you tell more with eg. – budgies Oct 11 '14 at 07:53
I do not now jqGrid. But isn't there a way to execute javsacript before or after the data is inserted to or updated in the grid. That will be the place to validate the data and set an error class to the row or column. – Barry Oct 11 '14 at 07:58
I think you can define validations. See [this answer](http://stackoverflow.com/questions/12398581/jqgrid-validation-of-fields). The validation is set during initializing of the grid. – Barry Oct 11 '14 at 08:09

score 0 · Answer 2 · answered Oct 13 '14 at 06:32

If I correctly understand your requirements you can use setRowData for example to highlight specified rows of jqGrid.

$("#gridtab").jqGrid("setRowData", rowid, false, "ui-state-highlight");

or just

$("#" + rowid).addClass("ui-state-highlight");

or in more common case (if rowid can contains meta-characters)

$("#" + $.jgrid.jqID(rowid)).addClass("ui-state-highlight");

where rowid is the id of the row which you need to highlight. I used standard jQuery UI class "ui-state-highlight" in the above code. One can define CSS rule on any other class which highlight the row by setting color, background-color, background-image or some other CSS property and use it instead of "ui-state-highlight".

@queryman: It's VERY bad code fragment. Tests like `c==5` or `table.rows[r].cells[c].innerHTML==""` (by the way jqGrid fills ` ` in empty cells in the most cases) are bad. In any way if you would use `$(table.rows[r]).addClass("ui-state-highlight");` you well add `ui-state-highlight` to specified row. — Oleg, Oct 13 '14 at 08:03

how to change row color using index or row number in jqgrid?

2 Answers2