jqGrid Row Edit Buttons

I've been working with the jqgrid and have been really impressed with the ease of use.  One issue I was having was with the action buttons on the row.  If a new row is selected, the action buttons wouldn't toggle back.  I had to toggle them myself in the onSelectRow function.

Here is a sample jqgrid based on the jqgrid samples http://www.trirand.com/blog/jqgrid/jqgrid.html

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
 
        <link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
    <link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
 
 
<script src="/Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>

    <script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

</head>
<body>
<script type="text/javascript">
    jQuery(document).ready(function () {

var lastsel2
jQuery("#rowed5").jqGrid({
 datatype: "local",
 height: 250,
    colNames:['ID Number','Name', 'Stock', 'Ship via','Notes','Edit'],
    colModel:[
     {name:'id',index:'id', width:90, sorttype:"int", editable: true},
     {name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
     {name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
     {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
     { name: 'note', index: 'note', width: 200, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10"} },
       { name: '', index: '', width: 80, formatoptions: { keys: false, editbutton: true, delbutton: true }, formatter: 'actions' } 
    ],
 onSelectRow: function(id){
  if(id && id!==lastsel2){
      jQuery('#rowed5').jqGrid('restoreRow', lastsel2);

      $("tr#" + lastsel2 + " div.ui-inline-edit, " + "tr#" + lastsel2 + " div.ui-inline-del", "#rowed5").show();
      $("tr#" + lastsel2 + " div.ui-inline-save, " + "tr#" + lastsel2 + " div.ui-inline-cancel", "#rowed5").hide();
  // Let the action buttons set the edit row
  // jQuery('#rowed5').jqGrid('editRow',id,true);
   lastsel2=id;
  }
 },
 editurl: "server.php",
 caption: "Input Types"

});
var mydata2 = [
  {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
  {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
  {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
  {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX"},
  {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
  {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
  {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
  {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
  {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
  ];
for(var i=0;i < mydata2.length;i++)
 jQuery("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);

 });
 </script>
 <table id="rowed5"></table>

</body>
</html>
 

Print | posted on Friday, June 3, 2011 11:22 AM