I have a JQGrid that updates via an ajax call to a web service.
It's all working fine, except from when I update the grid (and write it back to my database), the changes are not reflected in the grid.
I have read numurous posts with people reporting similar issues, but have tried on the suggestions to no avail.
loadonce is set to false, I reset my datatype to JSON and I have tried to destroy the grid before reloading it.
Here is my code thus far;
function LoadGrid2() {
//jgcontracts Grid
$.ajax({
type: "POST",
contentType: "application/json",
url: "../WebService1.asmx/getDataContacts",
dataType: "json",
success: function (data) {
data = data.d;
$("#jqcontacts").jqGrid({
datatype: "local",
colNames: ['Contact ID', 'Customer ID', 'First Name', 'Last Name', 'Email'],
colModel: [
{ name: 'contid', key: true, index: 'contid', width: 55, editable: true },
{
name: 'cust_name', index: 'cust_name', width: 80, align: "left", editable: true, edittype: "select",
editoptions: {
value: {}
}
},
{ name: 'first_name', index: 'first_name', width: 55, editable: true },
{ name: 'last_name', index: 'last_name', width: 55, editable: true },
{ name: 'email', index: 'email', width: 170, editable: true }
],
data: data,
caption: "Contacts",
viewrecords: true,
height: 200,
rowNum: 10,
pager: "#jqcontactsPager"
});
$('#jqcontacts').navGrid('#jqcontactsPager',
// the buttons to appear on the toolbar of the grid
{ edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false },
// options for the Edit Dialog
{
url: "../WebService1.asmx/modifyDataContacts",
editData: {},
editCaption: "The Edit Dialog",
beforeShowForm: function (form) {
$('#contid', form).attr("disabled", true);
},
reloadAfterSubmit: true,
recreateForm: true,
checkOnUpdate: true,
checkOnSubmit: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
url: "../WebService1.asmx/addDataContacts",
addData: {},
editCaption: "The Add Dialog",
beforeShowForm: function (form) {
$('#contid', form).attr("disabled", true);
},
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dailog
{
url: "../WebService1.asmx/deleteDataContacts",
delData: {},
delCaption: "The Delete Dialog",
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
});
},
error:
function (msg) {
alert(msg.status + " " + msg.statusText);
}
});
}
Here is my WebMethod
[WebMethod]
public object getDataContacts()
{
SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Indigo2.Properties.Settings.Constr"].ConnectionString);
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "SELECT [contid] ,cust.[cust_name] ,[first_name] ,[last_name] ,[email] FROM [Indigo].[dbo].[contacts] con LEFT JOIN [Indigo].[dbo].[customers] cust on con.custid = cust.custid";
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
con.Close();
DataSet ds = new DataSet();
da.Fill(ds);
object obj = new JavaScriptSerializer().DeserializeObject(Newtonsoft.Json.JsonConvert.SerializeObject(ds.Tables[0]));
return obj;
}
Any help greatly appreciated.
You do not need of this code.
afterSubmit: function () {
$("#jqcontacts").setGridParam({ datatype: 'json'}).trigger('reloadGrid');
return [true];
},
Like you do, you do two ajax calls. If you set editurl in grid parameters or url like you do the edited data is posted automatically to the server with ajax call instead that your datatype is local.
jqGrid looks for url(editurl) parameter and not for the datatype when posting edited data.
Remove the afterSubmit event and test. If the data is not saved you will need to see what you posted to the server and your server side code for saving data.
Guriddo jqGrid is server side independent javascript lib when we speak about saving, retrieving, sorting,... data from server side.
UPDATE I see why is this caused. Let me explain.
Question: How do you obtain your initial data?
Answer: You obtain your data with your own ajax call and then pass this data to a grid with datatype local.
Q: How do you update your data?
A: You update your data remotely to the server with separate call using a build in jqGrid functionality.
Problem: if data type is local and updating is server side the update does not reflect the local data in grid since reloading it, it reloads the current local data which is not affected from the update.
How to solve? You have more than one options.
Reconstruct your grid so that it obtain a data direct using the grid option url and jsonReader. Maybe you will need here to read the docs - i.e all your interactions with the data are server side.
In case you do not want to make server sorting, paging and etc. you can use the grid option loadonce to true with combination of url obtaining data from the servrer and jsonReader . In this case you will need to return all the data from the server (not in portion). If you do so then you can set datatype to json in beforeSubmit event so that when the grid reloads after update, then it will read the updated data from the server.
Do not change you current grid configuration, but in this case you will need to set the option reloadAfterSubmit to false in navigator and write additional for updating the local grid data.
I prefer you to use the option2.
I see that there is a small problem with the grid in this situationand we will try to fix it in the future release.