jQuery Grid Plugin - jqGrid

Thanks for the reply!
After reading on your latest version, I moved to version 3.7.1 as i contains local sorting and editing.

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