jQuery("#grid_sched1″).setGridParam({data: myGridData});

you should refresh the internal index used for the local searching with respect of the following line

jQuery("#grid_sched1″)[0].refreshIndex();

(See /blog/?page_id=393/help/losing-edited-cell-data-after-paging/ for details).

Best regards
Oleg 

I am back on this project.

Does someone think moving to 3.7.2 would fix some of the issues?

Now I am updating the local data with : jQuery("#grid_sched1″).setGridParam({data: myGridData});

everytime the data changes or user moves a row around or a user uses move row to bottom or to top.

Previous to using "jQuery("#grid_sched1″).setGridParam({data: myGridData})" for every data change,  if a user moved rows around and then sorted, sometimes a row would be duplicated and a row would disappear.

I am using sortable rows as well.

If someone could help I would appreciate.

Best wishes to all!

I did a test screen with generic data and cut down to the minimum so I can illustrate what I am trying to do, I specify data as local.

So what I did:

1- Everytime data is edited, I update the data item in the grid. (getGridParam("data"), then update data in array

2- I use sortablerows, so when the dragging of a row is finished, I update data in the grid array.

3-  On the screen I am developing (not this one) I also have a function: move_row_bottom and move_row_top. It uses getRowData, delRowData, addRowData to move it. Then I update the grid data in the grid array.

With these methods sorting and editing works. Previous to this, data would not be saved or get corrupted in the grid (rows getting duplicated mainly).

I am not sure if I am using the grid properly for local data, but here is my code. I can email as well if desired.

I am using jquery 1.4.2, ui 1.8.1, jqgrid 3.7.1

----------------------------------------------

----------------------------------------------

---javascript

//----------------------------------------------------------------------------------------
// global data to page

var myData = new Array();
var myGridData = null;
var myRowData = null;

//-------------------------------------------------------------------------------------------------------------
// Document init function 
//-------------------------------------------------------------------------------------------------------------
jQuery(document).ready(function()
{
 

 jQuery("#hidebehind").css("z-index",-1);
 jQuery("#div_grid_sched").css("z-index",1);
 jQuery("#interf_sched").css("z-index",1);
 
 // //test-----------------------
 jQuery("#btnTest").attr("disabled",false);
 jQuery("#btnTest").click( function() {
  //myGridData = null;
  myGridData = jQuery("#grid_sched1").getGridParam("data");
  var myId = jQuery("#grid_sched1").getGridParam("selrow");

  var myRowData = jQuery("#grid_sched1").getRowData(myId);
 
  var myPos = -1;
  var ids = jQuery("#grid_sched1").getDataIDs();
  for(var i=0;i<ids.length;i++)
  {
   if ( myId == ids[i] )
   {
    myPos = i;
    break;
   }
  }
  if ( myPos > -1 )
  {
   myGridData[myPos] = myRowData;
  }
  jQuery("#grid_sched1").setGridParam({data: myGridData});
 });
 

 // end test------------------------------

 myData = [
  {COL1: "1", COL2: "1", COL3: "9", COL4: "a", COL5: "a"},
  {COL1: "2", COL2: "2", COL3: "1", COL4: "b", COL5: "b"},
  {COL1: "3", COL2: "3", COL3: "8", COL4: "c", COL5: "c"},
  {COL1: "4", COL2: "4", COL3: "2", COL4: "d", COL5: "d"},
  {COL1: "5", COL2: "5", COL3: "7", COL4: "e", COL5: "e"},
  {COL1: "6", COL2: "6", COL3: "3", COL4: "f", COL5: "f"},
  {COL1: "7", COL2: "7", COL3: "6", COL4: "g", COL5: "g"},
  {COL1: "8", COL2: "8", COL3: "4", COL4: "h", COL5: "h"},
  {COL1: "9", COL2: "9", COL3: "5", COL4: "i", COL5: "i"},
 
 ];
 //-------------------------------------------
 // reason list grid.
 jQuery("#grid_sched1").jqGrid({
  datatype: "local",
  data: myData,
  width: 890,
  height: 420,
  colNames:['C1', 'C2', 'C3', 'C4', 'C5'],     // names of columns
  colModel :[
  {name:'COL1', index:'COL1', width:40, sortable: true, sorttype: 'int', editable: true,  editrules:{number:true}},
  {name:'COL2', index:'COL2', width:40, sortable: true, sorttype: 'int', editable: true,  editrules:{number:true}},
  {name:'COL3', index:'COL3', width:40, sortable: true, sorttype: 'int', editable: true,  editrules:{number:true}},
  {name:'COL4', index:'COL4', width:40, sortable: true, editable: true},
  {name:'COL5', index:'COL5', width:40, sortable: true, editable: true}
        ],
  afterSaveCell: function(rowid, cellname, value, iRow, iCol){
   var myObj = jQuery("#grid_sched1").getRowData(rowid);
   var myGridData = jQuery("#grid_sched1").getGridParam("data");
   //alert("row: " + iRow + " col: " + iCol + " id: " + rowid);
   myGridData[iRow] = myObj;
   // jQuery("#grid_sched1").setGridParam({data: myGridData});
   //update_grid_data();
  }, 
  cellEdit: true,
  cellsubmit: 'clientArray',
  loadonce: true,
  rowNum:90,                      // number of records
  caption: 'PROD SCHEDULE',
  hidegrid: true,
  hiddengrid: false,
    });
 jQuery("#grid_sched1").jqGrid('sortableRows', {delay: 200, distance: 10});
 
 $("#grid_sched1").bind( "sortstop", function(event, ui) {
  //alert("sort end");
  update_grid_data();
 });
});
 

//-------------------------------------------------------------------------------------------------------------
// end of Document ready function
//-------------------------------------------------------------------------------------------------------------
function update_grid_data()
{
 //myGridData = jQuery("#grid_sched1").getGridParam("data");
 myGridData = new Array();
 var myRowData = null;
 var ids = jQuery("#grid_sched1").getDataIDs();
 for(var ii=0;ii<ids.length;ii++)
 {
  if ( ids[ii] )
  {
   myRowData = jQuery("#grid_sched1").getRowData(ids[ii]);
   myGridData[ii] = myRowData;
  }
 }

 jQuery("#grid_sched1").setGridParam({data: myGridData});
 
}

----------------------------------------------

----------------------------------------------

---php file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Grid test</title>
 
 <link rel="stylesheet" type="text/css" media="screen" href="jquery/ui/css/flick/jquery-ui-1.8.1.custom.css" />
 <link rel="stylesheet" type="text/css" media="screen" href="jquery/jqgrid_3.7.1/css/ui.jqgrid-custom.css" />
 <link rel="stylesheet" type="text/css" media="screen" href="_styles/grid_test.css" />
 
 
 <script src="jquery/jqgrid_3.7.1/js/jquery-1.4.2.min.js" type="text/javascript"></script>
 <script src="jquery/ui/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
 <script src="jquery/jqgrid_3.7.1/js/i18n/grid.locale-en.js" type="text/javascript"></script>
 <script src="jquery/jqgrid_3.7.1/js/jquery.jqGrid.min.js" type="text/javascript"></script>
 <script src="jquery/test_jqgrid/js/json2.js" type="text/javascript"></script>
 
 
 <script src="scripts/grid_test.js.php" type="text/javascript"></script>

</head>
<body>

<div id="outer_sched">
 <div id="interf_sched">

  <input type="BUTTON" id="btnTest" value="Test" onClick=''/>
 
  <div id="sched_display_data"></div>
 </div>
 <div id="hidebehind"></div>
 

 <div id="div_grid_sched">
  <table id="grid_sched1" class="scroll"></table>

 </div>

</div>
</body>

</html>

----------------------------------------------

----------------------------------------------

---css

html{border:0; margin:0; padding:0; }
body{border:0; margin:0; padding:0; font: arial; }

/*---------------------------divisions, tables------------------------------*/
#outer_sched
{
 position: absolute;
 width: 1024px;
 top: 10px;
 left: 50px;
 margin: 0px;
}

#interf_sched
{
 position: absolute;
 width: 900px;
 height: 130px;
 top: 0px;
 left: 0px;
 border: 1px solid black;
 /*background-color: #2375D8;*/
 background-color: #71A0E8;
}

#hidebehind
{
 width: 1024px;
 height:480px;
 background-color: white;
}

#div_grid_sched
{
 position: absolute;
 width: 900px;
 height: 480px;
 top: 135px;
 left: 0px;
 border: 1px solid navy;
}

#sched_display_data
{
 position: absolute;
 top: 5px;
 left: 540px;
 width: 300px;
 /*height:130px;*/
 background-color: white;
}
#sched_display_data table
{
 border: 1px solid black;
 border-collapse:collapse;
 width: 300px;
}
#sched_display_data table td
{
 border: 1px solid black;
 
}

/*-------------------------------------------- buttons----------------------*/

#btnMvTop
{
 position: absolute;
 left: 10px;
 top: 66px;
 width: 100px;
 background-color: silver;
}
#btnMvBottom
{
 position: absolute;
 left: 10px;
 top: 93px;
 width: 100px;
 //background-color: royalblue;
 background-color: silver;
}

/*------------------------------ other styling --------------------------------*/

.ui-sortable-helper
{
 border-bottom: 1px solid black;
}
.ui-sortable-helper td
{
 background: silver;
}

/*-----test stuff------------------------------*/

#btnTest
{
 position: absolute;
 left: 440px;
 top: 5px;
 width: 100px;
 background-color: silver;
}

How look your data? Is it possible to post it.

Also I see a lot of events here including onSortCol event. Do you have some code here - if so could you please post the whole code without cutting.

Also the best will be if you provide a link to the problem.

Regards

Tony

Thanks again to the creators/developers of jqgrid, it is a GREAT tool.

I have a grid that I load using clientSide (or local) data. I load the data using a custom ajax request and load the grid with .addRowData. Ids for these rows start at 1 for the first then 2, 3, etc.

Some of my columns are sortable.

Here is my issue:
Sorting does not work properly for these columns. However, when I sort ANOTHER column then come back to the column I want to sort,  the sort is done correctly.

Also when I edit the data in one of the columns that is also sortable, if I sort that column, the new value does not sort properly, however, if I sort ANOTHER column and then come back and sort the one I want, it sorts correctly.

The column that interests me mainly (see code) is ALT_ORDER

I have tried to :

- set the datatype to jsonstring and a blank datastr. The sorting is fine initially for all columns, but as soom as I edit data on the sortable columns, I have to sort ANOTHER column, then I come back to the desired column for correct sorting.

- I have tried many other things such as setting the  datatype to jsonstring and a blank datastr back again, but does not work.

Any ideas on how I can fix my issue?

I am using grid 3.6.5, jquery 1.4.2, ui 1.8.1

I use the sorttype in colModel for the columns I want to sort.

Best wishes to All!

Here is my code.

------------------------------------------------------------------------

jQuery("#grid_sched1").jqGrid({
  //url: "",
  //datatype: 'json',
  datatype: 'jsonstring', 
  datastr : '""',
  //datatype: 'local',
  //datatype: 'clientSide',
  width: 890,
  height: 420,
  colNames:['ID', 'SCHED_ORDER', 'PROD ORD.', 'ALT ORD', 'STD#', 'SUP.C.', 'GRADE','MIX','TONS REQ','TONS PROD','COMPL','DATE','INSTR', 'MOD_FLAGS'],     // names of columns
  colModel :[
  {name:'LINE_ID', index:'LINE_ID', width:40, sortable: false, sorttype: 'int', hidden: true},
  {name:'PROD_ORDER', index:'PROD_ORDER', width:50, sortable: false, sorttype: 'int', hidden: true},
  {name:'SCHED_ORDER', index:'SCHED_ORDER', width:50, sortable: true, sorttype: 'int', hidden: true},
  {name:'ALT_ORDER', index:'ALT_ORDER', width:40, sortable: true, sorttype: 'int', hidden: false, editable: true,  editrules:{number:true}},
        {name:'STDNUM', index:'STDNUM', width:40, sortable: false},
  {name:'SUPP_CODE', index:'SUPP_CODE', width:40, sortable: false},
        {name:'GRADE', index:'GRADE', width:70, sortable: true},
        {name:'MIX', index:'MIX', width:80, sortable: true, editable: true, edittype:"select",editoptions:{value:mixListStr}},
  {name:'TONS_REQ', index:'TONS_REQ', width:60, sortable: false},
  {name:'TONS_PROD', index:'TONS_PROD', width:60, sortable: false},
  {name:'COMPL', index:'COMPL', width:40, sortable: true},
  {name:'DATE_REQ', index:'DATE_REQ', width:70, sortable: true},   
        {name:'INSTR', index:'INSTR', width:150, align:'left', editable: true, editrules:{ required: false }, edittype: 'textarea', sortable: false },
  {name:'MOD_FLAGS', index:'MOD_FLAGS', width:40, sortable: false, hidden: true}
        ],
  cellEdit: true,
  cellsubmit: 'clientArray',
  loadonce: true,
  //cellurl: '', 
  //altRows: true,
  //pager: jQuery('#pager'),        //pager bar
  hoverrows: true,
  //rowNum:90,                      // number of records
  //rowList:[12,24],             // change # or rows visible through grid
  //sortname: 'ORDER',                 // init sorting
  sortorder: "asc",              // init sort order
  //viewrecords: true,              // show total # of records in pager.
  caption: 'PROD SCHEDULE',
  hidegrid: true,
  hiddengrid: false,
  imgpath: 'jquery/jqgrid/themes/basic/images',     // path to imgs.
  //multiselect: true,
  loadComplete: function(){
   //alert("init reason grid load");
  },
  beforeEditCell: function(rowid, cellname, value, iRow, iCol){
   instrEditingCell = 1; instrEditingRowid = rowid; instrEditingICol = iCol; instrEditingIRow = iRow;
  },
  afterEditCell: function(rowid, cellname, value, iRow, iCol){
   //alert("after edit");
  },  
  afterSaveCell: function(rowid, cellname, value, iRow, iCol){
   // if ( cellname == "ALT_ORDER" )
   // {
    // // FIX need to do this or else sorting immediately after this does not work until another sorting elsewhere happens.
    // var myObj = jQuery("#grid_sched1").getRowData(rowid);
    // //alert("save alt order: " + myObj.ALT_ORDER );
    // jQuery("#grid_sched1").setRowData(rowid, {ALT_ORDER: myObj.ALT_ORDER});
   // }  
  },
  beforeSaveCell: function(rowid, cellname, value, iRow, iCol){
   instrEditingCell = 0; instrEditingRowid = 0; instrEditingICol = 0; instrEditingIRow = 0;
  },
  beforeSubmitCell: function(rowid, cellname, value, iRow, iCol){
  },
  onSelectRow: function(rowid, status){
   
  },
  onSortCol: function(index, iCol, sortorder){
   

   
  },
  onCellSelect: function(rowid, iCol, value){
   if ( ( lastCellRow != -1 && lastCellCol != -1 ) && ((rowid != lastCellRow) || (iCol != lastCellCol)) )
   {
    //alert("save cell");
    //jQuery("#grid_sched1").saveCell(lastCellRow, lastCellCol); 
   }
   lastCellRow = rowid; lastCellCol = iCol;
   // remove textarea
   // carefull if we add other editables
   if  ( iCol != lastCellCol)
   {
    if ( instrEditingCell == 1 ) 
    {
     instrEditingCell = 0; instrEditingRowid = 0; instrEditingICol = 0; instrEditingIRow = 0;
     jQuery("#grid_sched1").saveCell(instrEditingIRow, instrEditingICol);
     //alert("saved cell");
    }
   }
   
   
  }
    });

--------------------------------------------------------------------------