title: datepicker not working for jqgrid
body: <p>I am not able to add DatePicker to the jqGrid, </p>
  
  <p>Following is my code.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;My Date time example&lt;/title&gt;
  &lt;script src="js/jquery-1.7.2.min.js"  type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" /&gt;
  &lt;link href="css/ui.multiselect.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="js/grid.locale-en.js"  type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.datepicker.css"/&gt;
  &lt;/head&gt;
  &lt;script&gt;
  
  var lastsel3;
  function FillGridOnEvent()
  {
  jQuery("#rowed6").jqGrid({
  datatype: "local",
  height: 250,
  colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'],
  colModel:[
  {name:'id',index:'id', width:90, sorttype:"int", editable: true},
  {name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",editoptions:{        dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); }}},
  {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"}},
  ],
  onSelectRow: function(id){
      if(id &amp;&amp; id!==lastsel3){
          jQuery('#rowed6').jqGrid('restoreRow',lastsel3);
          jQuery('#rowed6').jqGrid('editRow',id,true,pickdates);
          lastsel3=id;
      }
  },
  editurl: "/MyServletNameHere",
  caption: "Date Picker Integration"
  });
  var mydata3 = [
          {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
          {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
          {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},                                                 
          {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
          {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
          {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
          {id:"76543",name:"MobileTelephone", note:"note", stock:"Yes", ship:"ARAMEX", sdate:"2007-12-03"},
          {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
          {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"}
          ];
  for(var i=0;i &lt; mydata3.length;i++)
  jQuery("#rowed6").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
  }
  function pickdates(id){
      jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
  }
  &lt;/script&gt;
  &lt;body&gt;
  &lt;body onload="FillGridOnEvent();"&gt;
      &lt;table id="rowed6"&gt;&lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>when above code executes, it shows the output, but it does not show the <code>datepicker</code> in the <code>sdate</code> column. Please let me khow if I am wrong somewhere in the code!</p>
  
  <p>I think i have done a silly mistake, but not able to find it!</p>
  
  <p><strong>Update</strong>
  Following is working example of datepicker using jqGrid,</p>
  
  <p>Following is working Example of <code>datepicker</code> using jqGrid..</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;My Date time example&lt;/title&gt;
  &lt;script src="js/jquery-1.7.2.min.js"  type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" /&gt;
  &lt;link href="css/ui.multiselect.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="js/grid.locale-en.js"  type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.datepicker.css"/&gt;
  &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt; 
  &lt;/head&gt;
  &lt;script&gt;
  
  var lastsel3;
  function FillGridOnEvent()
  {
  jQuery("#rowed6").jqGrid({
  datatype: "local",
  height: 250,
  colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'],
  colModel:[
  {name:'id',index:'id', width:90, sorttype:"int", editable: true},
  {name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",editoptions:{        dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); }}},
  {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"}},
  ],
  onSelectRow: function(id){
      if(id &amp;&amp; id!==lastsel3){
          jQuery('#rowed6').jqGrid('restoreRow',lastsel3);
          jQuery('#rowed6').jqGrid('editRow',id,true,pickdates);
          lastsel3=id;
      }
  },
  editurl: "/MyServletNameHere",
  caption: "Date Picker Integration"
  });
  var mydata3 = [
          {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
          {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
          {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},                                                 
          {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
          {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
          {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
          {id:"76543",name:"MobileTelephone", note:"note", stock:"Yes", ship:"ARAMEX", sdate:"2007-12-03"},
          {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
          {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"}
      ];
  for(var i=0;i &lt; mydata3.length;i++)
  jQuery("#rowed6").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
  }
  function pickdates(id){
      jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
  }
  &lt;/script&gt;
  &lt;body&gt;
  &lt;body onload="FillGridOnEvent();"&gt;
      &lt;table id="rowed6"&gt;&lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>