How to load data from sql to jqGrid and then modify it locally?

[akiamsitha]

I'm new using JQGrid and I'm tryig to do something but I dont have idea how to do it. (I'm using ASP.NET and SQL SERVER)

I want to load a grid from SQL to JqGrid, and then work with this data locally, (add and Edit inline). And in the end, save all the changes in the database.

Now I can load the JqGrid from SQL via Json with WebMethod and I'm using loadonce:true and in editurl: clientArray, this work fine, but I don't know how to save all the grid and send data to SQL. Maybe if I send the clientArray, but how??

Somebody can help me? Give me some idea that What I have to looking for??

This is my jqGrid's code.

$(function () {
var lastsel;
$("#grid").jqGrid({
sortable: true,

datatype: function () {
$.ajax(
{
url: "Default3.aspx/GetPersons", //PageMethod

data: "{'pPageSize':'" + $('#grid').getGridParam("rowNum") +
"','pCurrentPage':'" + $('#grid').getGridParam("page") +
"','pSortColumn':'" + $('#grid').getGridParam("sortname") +
"','pSortOrder':'" + $('#grid').getGridParam("sortorder") +
"','cuenta':'" + $('#grid').getGridParam("postData").Cuenta +
"','nombre':'" + $('#grid').getGridParam("postData").Nombre +
"','descripcion':'" + $('#grid').getGridParam("postData").Descripcion +
"','monedaCuenta':'" + $('#grid').getGridParam("postData").MonedaCuenta + //PageMethod Parametros de entrada
"','saldoMinimo':'" + $('#grid').getGridParam("postData").SaldoMinimo + "'}",

dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
complete: function (jsondata, stat) {
if (stat == "success")
jQuery("#grid")[0].addJSONData(JSON.parse(jsondata.responseText).d);
else
alert(JSON.parse(jsondata.responseText).Message);
}
}); //Fin de AJAX
}, //FIN de Funcion dentro de DataType

jsonReader: //Set the jsonReader to the JQGridJSonResponse squema to bind the data.
{
root: "Items",
page: "CurrentPage",
total: "PageCount",
records: "RecordCount",
repeatitems: true,
cell: "Row",
id: "ID"
},
sortable: true,
width: 780,
height: 230,
colNames: ['Cuenta', 'Nombre', 'Descripcion', 'Moneda', 'Saldo Min'],
colModel: //Columns
[
{ name: 'Cuenta', index: 'Cuenta', width: 100, align: 'Center', editable: true, sorttype: "string" },
{ name: 'Nombre', index: 'Nombre', width: 200, align: 'Left', editable: true, sorttype: "string", searchoptions: { sopt: ['eq', 'ne', 'cn']} },
{ name: 'Descripcion', index: 'Descripcion', width: 300, align: 'Left', editable: true, sorttype: "string", searchoptions: { sopt: ['eq', 'ne', 'cn']} },
{ name: 'MonedaCuenta', index: 'MonedaCuenta', width: 200, align: 'Center', editable: true, sorttype: "string", edittype: "select", editoptions: { value: "EUR:EUR;MXP:MXP;OF:OF;PL:PL;USD:USD" }, searchoptions: { sopt: ['eq', 'ne', 'cn']} },
{ name: 'SaldoMinimo', index: 'SaldoMinimo', width: 100, align: 'center', sorttype: "float", editable: true, searchoptions: { sopt: ['eq', 'ne', 'cn']} }
],
pager: "#pager", //Pager.
loadtext: 'Cargando datos...',
recordtext: "{0} - {1} de {2} elementos",
emptyrecords: 'No hay resultados',
pgtext: 'Pág: {0} de {1}', //Paging input control text format.
rowNum: 100000, // PageSize.
mtype: "POST",
search: true,
viewrecords: true, //Show the RecordCount in the pager.
sortname: "Cuenta", //Default SortColumn
sortorder: "asc", //Default SortOrder.
editurl: "clientArray",
gridview: true,
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#grid').restoreRow(lastsel);
jQuery('#grid').editRow(id, true);
lastsel = id;
}
else {
lastsel = id;
}
},
caption: "Cuentas",
loadonce: true

}).navGrid('#pager', { edit: false, add: false, search: false, del: false});

$('#grid').filterToolbar({ searchOnEnter: false, enableClear: false });
var mygrid = $("#grid");
$("#grid").navButtonAdd("#pager", { caption: "Toggle", title: "Toggle Search Toolbar", buttonicon: 'ui-icon-pin-s',
onClickButton: function () {
mygrid[0].toggleToolbar()
}
});
$("#grid").navButtonAdd("#pager", { caption: "Clear", title: "Clear Search", buttonicon: 'ui-icon-refresh',
onClickButton: function () {
mygrid[0].clearToolbar()
}
});

}); //FIN de $(function ()