1 //=======================================================================
   2 //      __   __   __     __      __        ___  __        ___       __  
   3 //   | /  \ / _` |__) | |  \    /  \ \  / |__  |__) |__| |__   /\  |  \ 
   4 //\__/ \__X \__> |  \ | |__/    \__/  \/  |___ |  \ |  | |___ /~~\ |__/   
   5 //=======================================================================
   6 var lastSel = -10;
   7 
   8 // http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events for events.
   9 // http://www.ok-soft-gmbh.com/jqGrid/ActionButtons.htm for buttons inline
  10 // http://stackoverflow.com/questions/5196387/jqgrid-editactioniconscolumn-events/5204793#5204793 
  11 //      for description of above/formatter:actions
  12 // http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing on editing and using add buttons, etc.
  13 // http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons straight custom buttons
  14 $(function() {
  15         $("#list").jqGrid({
  16                 url: '<%= ResolveUrl("~/secretLoc.aspx") %>?oper=DEMO_NAMES',
  17                 editurl: '<%= ResolveUrl("~/secretLoc.aspx") %>?oper=DEMO_NAME_EDIT',
  18                 datatype: 'json',
  19                 mtype: 'GET',
  20                 colNames: [ 'Edit', '+', 'Name Type', 'Prefix', 'First', 'Middle', 'Last', 'Suffix'],
  21 colModel: [
  22 
  23         {name:'act',index:'act',width:40,align:'center',sortable:false,formatter:'actions',
  24                  formatoptions:{
  25                          // we want use [Enter] key to save the row and [Esc] to cancel editing.
  26                          keys: true,            
  27                          // user cannot delete aliases/names
  28                          delbutton : false,                      
  29                          onEdit:function(rowid) {
  30                                  alert("in onEdit: rowid="+rowid+"\nWe don't need return anything");
  31                          },
  32                          onSuccess:function(jqXHR) {
  33                          // the function will be used as "succesfunc" parameter of editRow function
  34                          // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
  35                                  alert("in onSuccess used only for remote editing:"+
  36                                    "\nresponseText="+jqXHR.responseText+
  37                                    "\n\nWe can verify the server response and return false in case of"+
  38                                    " error response. return true confirm that the response is successful");
  39                          // we can verify the server response and interpret it do as an error
  40                          // in the case we should return false. In the case onError will be called
  41                                  return true;
  42                          },
  43                          onError:function(rowid, jqXHR, textStatus) {
  44                          // the function will be used as "errorfunc" parameter of editRow function
  45                          // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
  46                          // and saveRow function
  47                          // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow)
  48                                  alert("in onError used only for remote editing:"+
  49                                            "\nresponseText="+jqXHR.responseText+
  50                                            "\nstatus="+jqXHR.status+
  51                                            "\nstatusText"+jqXHR.statusText+
  52                                            "\n\nWe don't need return anything");
  53                          },
  54                          afterSave:function(rowid) {
  55                            alert("in afterSave (Submit): rowid="+rowid
  56                                    +"\nWe don't need return anything");
  57                          },
  58                          afterRestore:function(rowid) {
  59                            alert("in afterRestore (Cancel): rowid="+rowid
  60                                    +"\nWe don't need return anything");
  61                          }      //,
  62                          //delOptions: myDelOptions
  63                  }
  64         },
                             
  65         { name: 'EDITME', key:true, index: 'EDITME', width: 12 },
  66         { name: 'NAMETYPE', index: 'NAMETYPE', width: 65 },
  67         { name: 'PREFIX', editable:true, index: 'PREFIX', edittype:'select', 
  68                 editoptions:{value:"<%= helperClasses.utils.dataTable2JqGridEditoptions(dtNamePrefixes) %>"}, 
  69                 width: 80 },
  70         { name: 'FNAME', editable:true, index: 'FNAME', width: 200 },
  71         { name: 'MNAME', editable:true, index: 'MNAME', width: 300 },
  72         { name: 'LNAME', editable:true, index: 'LNAME', width: 200 },
  73         { name: 'SUFFIX', editable:true, index: 'SUFFIX', edittype:'select', 
  74                 editoptions:{value:"<%= helperClasses.utils.dataTable2JqGridEditoptions(dtNameSuffixes) %>"}, 
  75                 width: 80 },
  76 ],
  77                 pager: '#pager',
  78                 rowNum: 10,
  79                 rowList: [10, 20, 30],
  80                 sortname: 'p_name_prefix',
  81                 sortorder: 'desc',
  82                 viewrecords: true,
  83                 height: 230,
  84                 width: 890,
  85                 jsonReader: { repeatitems: false, id: "0" },
  86                 caption: 'All Names',
  87                 //afterShowForm:afterShowAdd,
  88                         
  89                 onSelectRow: function(id){ 
  90                 if(id && id!==lastSel && lastSel != -10){ 
  91                         jQuery(this).restoreRow(lastSel); 
  92                         lastSel=id; 
  93                 } 
  94                         jQuery(this).editRow(id, true); 
  95                 }
  96                                                         
  97         }).navGrid('#pager',{edit:false,add:true,addtext:"Add New Name",
  98                 refresh:false,del:false,search:false
  99         }).navButtonAdd('#pager',{
 100                 caption:"Add new name", onClickButton:function(){ helloWorld("1001") }, 
 101                 position:"first"
 102         })
 103                                         
 104 });

Labels: jqGrid, jquery, noteToSelf