I am using JQGrid I am able to edit the row in popup page and post the data but the grid is not loading with current(Updated) data after submit.
Below Is the my code:
var result;
function getData() {
jQuery.ajax({
url: '/Customer/GetCustomers',
datatype: "Json",
async: false,
complete: function (jsondata, stat) {
if (stat == "success") {
result = JSON.parse(jsondata.responseText);
$(result).each(function (e) {
var p = new Date(this["Customer_Start_Dt"]);
$("#list1").addRowData(e, this);
});
}
}
});
}
var locations = jQuery.ajax({
url: '/Customer/GetLocations',
datatype: "Json",
async: false,
success: function (data, result1) {
if (!result1) alert('Failure to retrieve the Location Type.');
}
}).responseText;
$(document).ready(function () {
var lastsel;
debugger;
$("#list1").jqGrid({
datatype: "json",
mtype: "get",
colNames: ["Customer Id", "Customer Location", "Customer Name", "Categories Sold", "Credit Period", "Customer Start Date", "Customer End Date","Location"],
colModel: [
{
name: "Customer_Id", index: "Customer_Id", width: 150, align: "left",
sorttype: "int", key: true, editable: true, editrules: { edithidden: false },
hidedlg: true, hidden: true
},
{
name: "Location_Type", index: "LOCATION.Location_Type", width: 150, align: "left",
sorttype: "float", sortable: true
},
{
name: "Customer_Name", index: "Customer_Name", width: 150,
editable: true, edittype: "text", align: "left",
sorttype: "float", sortable: true, editrules: { required: true }
},
{
name: "Categories_Sold", index: "Categories_Sold", width: 150,
editable: true, edittype: "text", align: "left", sorttype: "float",
editrules: { required: true },
editoptions: {
size: 15, maxlengh: 10,
dataInit: function (element) {
$(element).keyup(function () {
var val1 = element.value;
var num = new Number(val1);
if (isNaN(num))
{ alert("Please enter a valid number"); }
})
}
}
},
{
name: "Credit_Period", index: "Credit_Period", width: 150,
editable: true, edittype: "text", align: "left",
sorttype: "float", editrules: { required: true },
editoptions: {
size: 15, maxlengh: 10,
dataInit: function (element) {
$(element).keyup(function () {
var val1 = element.value;
var num = new Number(val1);
if (isNaN(num))
{ alert("Please enter a valid number"); }
})
}
}
},
{
name: 'Customer_Start_Dt', height: 100, index: 'Customer_Start_Dt', align: 'right', sortable: false,
formatter: 'date', formatoptions: { newformat: 'm/d/y' }, editable: true,
editrules: { required: true },
editoptions: {
readonly: 'readonly',
dataInit: function (el) { $(el).datepicker(); }
}
},
{
name: 'Customer_End_Dt', height: 100, index: 'Customer_End_Dt', align: 'right', sortable: false,
formatter: 'date', formatoptions: { newformat: 'm/d/y' }, editable: true,
editrules: { required: true },
editoptions: {
readonly: 'readonly',
dataInit: function (el) { $(el).datepicker(); }
}
},
{
name: "Location_Id",
index: "Location_Type",
width: 0.00001,
editable: true,
edittype: "select",
editrules: { required: true, edithidden: false },
editoptions: {value: locations},
align: "left", sorttype: "int"
},
],
sortname: "Customer_Name",
sortorder: "asc",
width: 840,
height: 200,
multiselect: true,
rowNum: 20,
rowList: [5, 10, 20, 50, 100],
pager: jQuery('#pager1'),
sortorder: "desc",
viewrecords: true,
reload:true,
caption: "Customer Data"
});
jQuery("#list1").jqGrid(
'navGrid',
'#pager1',
{ edit: true, add: true, del: true, jqModel: true },
{ url: '/customer/Edit', closeAfterEdit: true, reloadAfterSubmit: true, checkOnSubmit: true,checkOnUpdate: true, closeOnEscape: true },
{ url: '/customer/Create', closeAfterDelete: true, closeOnEscape: true },
{ url: '/customer/Delete', closeAfterAdd: true, reloadAfterSubmit: true, checkOnSubmit: true, closeOnEscape: true },
{ multipleSearch: true },
{ width: 450, jqModal: true, closeAfterAdd: true }
);
getData();
jQuery("#list1").trigger('reloadGrid');
});