I've been having some success with JQGrid but I'm now in a situation where I need to load data once then perform all the crud operations on the clientside and as easy as that sounds I'm completely stuck. I've been all through stack overflow and google and can't seem to find any good examples of simple clientside jqgrid operations (I could be wrong but I wasn't able to find any clientside stuff in the official jqgrid docs either). I attempted to utilize the example here:
http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm
but I'm still a newbie with ajax/javaxcript/jquery and it was somewhat overwhelming and I just couldn't get it functioning with my grid. I would really appreciate any tips or links to a tutorial. My code and what I've gathered about the process so far is as follows:
I have my grid:
editSettings = {
jqModal: false,
reloadAfterSubmit: false,
closeOnEscape: true,
savekey: [true, 13],
closeAfterEdit: true,
onclickSubmit: editSubmit,
height: 200,
width: 400
},
addSettings = {
jqModal: false,
reloadAfterSubmit: false,
savekey: [true, 13],
closeOnEscape: true,
closeAfterAdd: true,
onclickSubmit: addSubmit,
height: 200,
width: 400
},
$('#engineerGrid').jqGrid({
datatype: 'json',
colNames: ['Engineer Name', 'Engineer Type', '% Utilization'],
colModel: [
{name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select'
},
{ name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select'
},
{ name: 'ut', index: 'ut', width: 125, align: "left", editable: true, sorttype: 'number', formatter: 'number' }
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
loadonce: true,
caption: 'Project Engineers',
editurl: 'clientArray',
url: '@Url.Action("EditProjectEngineerJQGridData","Project",new{projID = Model.projectID})'
}).jqGrid('navGrid', '#pager', {}, editSettings, addSettings, delSettings);
});
I'm getting json info from the server and I think that because I have loadonce:true set it should switch the datatype from json to local. This is where I start to get confused. Do I need to write all the crud functions manually and link to them with onclickSubmit? If that's the case would anyone be willing to explain how to get/set the data correctly?
addSubmit = function(){
//I think something needs to go here?
};
Edit:
Thought I'd reiterate for anyone who sees this. Since I don't have much experience this might be low level but maybe other newbies can benefit from a layman's explanation. When working with local data you cannot use form editing (except for delete which will work). In order to add/edit rows you can however use inlineNav. What I got working is below, there are some finicky parts but as far as add/edit/delete on local data it works.
$(document).ready(function () {
var myData = [],
editOptions = {},
addOptions = {},
lastSel = -1,
parameters = {
edit: false,
editicon: "ui-icon-pencil",
add: true,
addicon: "ui-icon-plus",
save: true,
saveicon: "ui-icon-disk",
cancel: true,
cancelicon: "ui-icon-cancel",
addParams: { useFormatter: false },
editParams: {}
},
myDelOptions = {
onclickSubmit: function (options, rowid) {
var grid = $('#engineerGrid');
// delete the row
grid.delRowData(rowid);
grid.trigger("reloadGrid", [{ page: 0}]);
return true;
},
processing: true
};
$('#engineerGrid').jqGrid({
datatype: 'json',
url: '@Url.Action("CreateProjectEngineerJQGridData", "Project")',
colNames: ['Engineer Name', 'Engineer Type', '% Utilization'],
colModel: [
{ name: 'name', index: 'name', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.engineerOptions)" }, sorttype: 'string', formatter: 'select'
},
{ name: 'type', index: 'type', width: 150, align: "left", editable: true, edittype: "select",
editoptions: { value: "@(Model.typeOptions)" }, formatter: 'select'
},
{ name: 'ut', index: 'ut', width: 125, align: "left", editable: true, formatter: 'number',
formatoptions: { decimalPlaces: '0', defaultValue: '20'}
}
],
rowNum: 20,
rowList: [5, 10, 20],
pager: '#pager',
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
loadonce: true,
width: 750,
caption: 'Project Engineers',
editurl: 'clientArray',
onSelectRow: function (id) {
//if selected row changed restore values of previously selected row
if (id && id !== lastSel) {
jQuery('#engineerGrid').restoreRow(lastSel);
lastSel = id;
}
jQuery('#engineerGrid').editRow(id, true);
}
}).jqGrid('navGrid', '#pager', { edit: false, add: false, del: true }, editOptions, addOptions, myDelOptions);
jQuery("#engineerGrid").jqGrid('inlineNav', '#pager', parameters);
});
Anyway, thanks for the help Oleg!
