0
 I have a problem in defining background color for edited row.

1) we need to show different background color for the JQgrid row once editing is complete. 2) edited row color should be retained in pagination also.

I have used the below code,with this i am able to change the background color of the row once we click on edit icon, but the color is changing though the data is not edited and color is not retained in pagination.

var orgEditGridRow = grid.jqGrid.editGridRow; // save original function
$.jgrid.extend ({editGridRow : function(rowid, p){
$.extend(p,
{ // modify some parameters of editGridRow
beforeShowForm:function(rowid,p){
  grid.jqGrid('setRowData',rowid, false, 'state_active');
}});
 orgEditGridRow.call (this,rowid, p);
 }});

please provide some suggestions to solve this issue.
user1400965
  • 151
  • 1
  • 1
  • 5
  • By the way, you don't need to overwrite original `editGridRow` to youth just to implement `beforeShowForm` what you need. If you do this you should use `$(this)` instead of `grid` inside of `beforeShowForm` implementation to make the code working with more as one grid. Moreover the function `beforeShowForm` should have correct parameters (only one). If you need to implement some common actions inside `beforeShowForm` you can use new `jqGridAddEditBeforeShowForm` event. The event handler has `event` and the first parameter, `$form` (jQuery to the form) and "add" or "edit" as the last parameter. – Oleg May 17 '12 at 21:26

1 Answers1

0

I see that you use reloadAfterSubmit: false. So the default false value will be used and the grid will be reloaded after the submitting the changes to the server. If you need to hold the class "state_active" assigned to the modified rows you have to save the ids of the modified rows in some additional variable (an array for example) and reset the class on the rows either inside of loadComplete callback or better inside of rowattr callback (see the answer).

To be sure that only modified rows will be get alternavice background color you can use afterSubmit (or afterComplete under some conditions) callback instead of beforeShowForm.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you for answer oleg. I am still facing one issue with rowattr. this attribute is defined at the grid level. according to your example row color is changed based on column value.I am able to save the row ids after editing is done.please suggest me the solution to paas array values to rowattr. – user1400965 May 18 '12 at 07:03
  • @user1400965: You can just define array in outer scope. For example `var ids = []; $("#list").jqGrid({/*options*/, rowattr: function (rd) { if($.inArray(rd.id, ids)) { return {"class": "state_active"};}}});` In the same way you can access `ids` array inside of `afterSubmit` and you can test wether the id of modified row is already in `ids` array and if it is not in array use `ids.push(id)` to add it. – Oleg May 18 '12 at 08:30
  • rowattr: function (rd) { if($.inArray(rd.srno, ids)) {return {"class": "state_active"};}}. By using this everytime only the 0th position of ids is changed to different color. all other values in ids array are not affected. – user1400965 May 18 '12 at 11:00
  • @user1400965: Do you filled the `ids` inside of `afterSubmit` like I described above? If you have problems in the code you can edit the code of your question and append it with the current code which you use. [Here](http://meta.stackexchange.com/a/22189/147495) you will find tips how to format the code inside of the text. – Oleg May 18 '12 at 11:44
  • At present, i have defined ids manually. For Ex var ids=[1,5,7]; butit is still taking the 0th position of ids. – user1400965 May 21 '12 at 06:13
  • @user1400965: I don't understand you. You asked: how to "change background color of JqGrid row after editing is completed". I suggested you to save ids of modified rows in `ids` array inside of `afterSubmit` and set the background color by assigning class "state_active" to the rows. If you use default `reloadAfterSubmit: false` setting then the grid will be reloaded after submitting of row modifications. So you have to assign the "state_active" to the modified rows *after* reloading: for example in `rowattr`. So I don't understand how manually assign `ids`. – Oleg May 21 '12 at 06:27
  • @user1400965: Probably you made some simple JavaScript error and defined `ids` in the wrong scope. You should append your current code to the text of your question. – Oleg May 21 '12 at 06:28
  • Options: rowNum:10, pager: '#pagernav', url:"", sortname: 'id', viewrecords: true, sortorder: "desc", caption:"List of Challans", width:955, gridview: true, rownumbers:true, checkOnSubmit:true, height: "100%", rowattr: function (rd) { if($.inArray(rd.srno, ids)) {return {"class": "state_active"};} } – user1400965 May 21 '12 at 07:05
  • var ids=[]; var orgEditGridRow = grid.jqGrid.editGridRow; // save original function $.jgrid.extend ({editGridRow : function(rowid, p){ $.extend(p, { // modify some parameters of editGridRow afterSubmit: function(formid) { ids[length+1]= rowid; } }); orgEditGridRow.call (this,rowid, p); }}); – user1400965 May 21 '12 at 07:07
  • @user1400965: First I see no sense to overwrite `editGridRow`. Second I don't see here `length` variable is defined. Third you use `$.inArray` in a wrong way - if the item is not found `$.inArray` returns -1, so 0 is still found. You should replace `ids[length+1]= rowid;` to `if ($.inArray(rowid, ids) < 0) { ids.push(rowid); }` or at least to `if ($.inArray(rowid, ids) < 0) { ids[ids.length] = rowid; }`. Moreover **You should click on "edit" button under your question and append your current code to the text of your question.** Reading of the code in comment is very difficult. – Oleg May 21 '12 at 07:32
  • Thank you oleg. I will try your suggestions and let you know if it works. – user1400965 May 21 '12 at 07:57