In MvcJQGrid, I have to bind column dynamically that is working fine, but I have to do inline editing with edit button at each row. When I'm passing column model at client side like this...
colModel:[
{ index: 'Id', name: 'Id', align: 'center', 'hidden': true, editable: false },
{ index: 'Name', name: 'Name', align: 'center', editable: true },
{ index: 'Value', name: 'Value', align: 'center', editable: true },
{
name: 'Id', index: 'Id', width: 55, align: 'center', sortable: false, formatter: 'actions',
formatoptions: {
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
onEdit: function (rowid) {
alert("in onEdit: rowid=" + rowid + "\nWe don't need return anything");
},
onSuccess: function (jqXHR) {
var d = $('#dataList').jqGrid('getCell', rowid, 'Id');
alert("in onSuccess used only for remote editing:" +
"\nresponseText=" + jqXHR.responseText +
"\n\nWe can verify the server response and return false in case of" +
" error response. return true confirm that the response is successful");
return true;
},
onError: function (rowid, jqXHR, textStatus) {
alert("in onError used only for remote editing:" +
"\nresponseText=" + jqXHR.responseText +
"\nstatus=" + jqXHR.status +
"\nstatusText" + jqXHR.statusText +
"\n\nWe don't need return anything");
},
afterSave: function (rowid) {
debugger;
var d = $('#dataList').jqGrid('getCell', rowid, 'Id');
alert("in afterSave (Submit): rowid=" + rowid + d);
},
afterRestore: function (rowid) {
alert("in afterRestore (Cancel): rowid=" + rowid + "\nWe don't need return anything");
},
delOptions: {
onclickSubmit: function (rp_ge, rowid) {
debugger;
var selRowId = $('#dataList').jqGrid('getGridParam', 'selrow');
var celValue = $('#dataList').jqGrid('getCell', selRowId, 'Id');
debugger;
alert("The row with rowid=" + rowid + " will be deleted Guid: " + (rowid.Id));
rp_ge.processing = true;
$("#dataList").delRowData(rowid);
$("#delmod" + grid[0].id).hide();
if (grid[0].p.lastpage > 1) {
// reload grid to make the row from the next page visable.
// TODO: deleting the last row from the last page which number is higher as 1
grid.trigger("reloadGrid", [{ page: grid[0].p.page }]);
}
return true;
},
processing: true // !!! the most important step for the "local" editing
// skip ajax request to the server
}
}
}
],
then it is working , but column will be bind on run time and last elemet of column model will provide at client side
on getting column model from server i am getting
[Object { Index="Id", Name="Id", Align="center"}, Object { Index="Name", Name="Name", Align="center"}, Object { Index="Value", Name="Value", Align="center"}]
In that case how to bind column model so that after getting column model like above I can append
{
name: 'Id', index: 'Id', width: 55, align: 'center', sortable: false, formatter: 'actions',
formatoptions: {
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
onEdit: function (rowid) {
alert("in onEdit: rowid=" + rowid + "\nWe don't need return anything");
},
onSuccess: function (jqXHR) {
var d = $('#dataList').jqGrid('getCell', rowid, 'Id');
alert("in onSuccess used only for remote editing:" +
"\nresponseText=" + jqXHR.responseText +
"\n\nWe can verify the server response and return false in case of" +
" error response. return true confirm that the response is successful");
return true;
},
onError: function (rowid, jqXHR, textStatus) {
alert("in onError used only for remote editing:" +
"\nresponseText=" + jqXHR.responseText +
"\nstatus=" + jqXHR.status +
"\nstatusText" + jqXHR.statusText +
"\n\nWe don't need return anything");
},
afterSave: function (rowid) {
debugger;
var d = $('#dataList').jqGrid('getCell', rowid, 'Id');
alert("in afterSave (Submit): rowid=" + rowid + d);
},
afterRestore: function (rowid) {
alert("in afterRestore (Cancel): rowid=" + rowid + "\nWe don't need return anything");
},
delOptions: {
onclickSubmit: function (rp_ge, rowid) {
debugger;
var selRowId = $('#dataList').jqGrid('getGridParam', 'selrow');
var celValue = $('#dataList').jqGrid('getCell', selRowId, 'Id');
debugger;
alert("The row with rowid=" + rowid + " will be deleted Guid: " + (rowid.Id));
rp_ge.processing = true;
$("#dataList").delRowData(rowid);
$("#delmod" + grid[0].id).hide();
if (grid[0].p.lastpage > 1) {
// reload grid to make the row from the next page visable.
// TODO: deleting the last row from the last page which number is higher as 1
grid.trigger("reloadGrid", [{ page: grid[0].p.page }]);
}
return true;
},
processing: true // !!! the most important step for the "local" editing
// skip ajax request to the server
}
}
}