How to update rows in JQGrid?
Question
I am using JQGrid for showing results from database. Now I need to update rows by user. I have tried to use Inline Navigator. I have used the following code for making the grid.
$("#MyGrid").jqGrid({
url: service,
datatype: "json",
mtype: 'GET',
colNames: ['Col1', 'Col2'],
colModel: [
{ name: 'Col1', index: 'Col1', sortable: true, resizable: true, editable: true, sorttype: "text" },
{ name: 'Col2', index: 'Col2', align: 'left', sortable: true, resizable: true, width: 50, editable: true },
pager: '#pagerLab',
rowNum: 1000,
rowList: [10, 30, 100, 1000],
sortname: 'modified',
viewrecords: true,
gridview: true,
loadonce: true,
editurl: '/Service.svc/UpdateGrid',
});
jQuery("#MyGrid").jqGrid('navGrid', "#pagerLab", { edit: true, add: false, del: false, search:false });
jQuery("#MyGrid").jqGrid('inlineNav', "#pagerLab");
}
Now I am not sure how to write the server side code to save user's changes in database. I am using AJAX enabled web service.
Here is my web service code for showing the grid:
[OperationContract]
[WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
public JQGridViewTable MyGrid(string ID)
{
Reader reader = new Reader();
return Reader.ReadDetails(ID);
}
And my C# code in Reader class(in data model):
public JQGridViewTable ReadDetails(string ID)
{
JQGridViewTable table = new JQGridViewTable();
// read data from database and store in table
return table;
}
I need help with:
1- Do I need to use Post instead of Get? Notice that I am displaying and editing the grid in one function. 2- Do I need to add anything else in Javascript? for example edit or restore functions? In documentations they have edit and restore functions in inline editing but not in Inline navigation. 3- In what format data is sent to web service for editing? For displaying, it is in JQGridView format. 4- I don't know how to implement UpdateGrid method in web service, because I don't know what exactly Inline Navigator functions are doing, what data it is sending to web service and what data it is expecting from server.
I have searched the whole web, but everyone is using it in a different way. I would appreciate any help.
1 answers
solution1
0 2013-03-25 17:09:09
Based on your example code, the jqGrid will do a post operation on
editurl: '/Service.svc/UpdateGrid'
You will need to create a this method on your WCF service. The jqGrid will invoke and HTTP Post and call this method, sending in the column values.
You will weed to add an operation, simalar to the following to your WCF service:
[OperationContract]
[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json)]
public void UpdateGrid(string col1, string col2)
{
//code to actually do the update to the database
}
The WCF operation will be resposible for actually locating the right row in the database table (I am assuming you can do this based on either the value stored in col1 or col2) and perform the update operation.
The code snippets below are from my implementation using your sample as a starting point:
[default.html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="Scripts/jqGrid/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.2.js"></script>
<link href="Content/ui.jqgrid.css" rel="stylesheet" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
var lastSel;
$(document).ready(function() {
var service = 'http://localhost:5127/Service.svc/GetData';
$("#MyGrid").jqGrid({
url: service,
datatype: "json",
height: 255,
width: 600,
colNames: ['Col1', 'Col2'],
colModel: [
{ name: 'Col1', index: 'Col1', sortable: true, resizable: true, editable: false, sorttype: "text" },
{ name: 'Col2', index: 'Col2', align: 'left', sortable: true, resizable: true, width: 50, editable: true },
],
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "",
repeatitems: false
},
rowNum: 1000,
rowList: [10, 30, 100, 1000],
pager: '#pagerLab',
sortname: 'Col1',
viewrecords: true,
gridview: true,
loadonce: true,
onSelectRow: function (id) {
if (id && id !== lastSel) {
$(this).restoreRow(lastSel);
lastSel = id;
}
jQuery(this).editRow(id, true);
},
editurl: 'http://localhost:5127/Service.svc/UpdateData',
ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },
serializeRowData: function (data) {
return JSON.stringify(data);
}
});
jQuery("#MyGrid").jqGrid('navGrid', "#pagerLab",
{ edit: false, add: false, del: false, search: false }
);
jQuery("#MyGrid").jqGrid('inlineNav', "#pagerLab");
});
</script>
</head>
<body>
<table id="MyGrid"></table>
<div id="pagerLab"></div>
</body>
</html>
[IService.cs]
[ServiceContract]
public interface IService
{
[OperationContract]
[WebInvoke(Method="GET", BodyStyle=WebMessageBodyStyle.Bare, ResponseFormat=WebMessageFormat.Json)]
jqGridModel<GridListItem> GetData();
[OperationContract]
[WebInvoke(Method="POST", BodyStyle=WebMessageBodyStyle.WrappedRequest, RequestFormat=WebMessageFormat.Json)]
void UpdateData(string id, string oper, string Col1, string Col2);
}
[DataContract]
public class GridListItem
{
[DataMember]
public string Col1 { get; set; }
[DataMember]
public string Col2 { get; set; }
}
[DataContract]
public class jqGridModel<T>
{
public jqGridModel()
{
this.total = 0;
this.rows = null;
this.records = 0;
this.page = 0;
}
[DataMember]
public int total { get; set; }
[DataMember]
// this is the property where you store the actual data model
public IList<T> rows { get; set; }
[DataMember]
public int page { get; set; }
[DataMember]
public int records { get; set; }
}
}
[Service.svc.cs]
public class Service : IService
{
jqGridModel<GridListItem> IService.GetData()
{
jqGridModel<GridListItem> model = new jqGridModel<GridListItem>();
List<GridListItem> list = new List<GridListItem>();
GridListItem item = new GridListItem() { Col1 = "1", Col2 = "Dog" };
list.Add(item);
item = new GridListItem() { Col1 = "2", Col2 = "Cat" };
list.Add(item);
model.records = list.Count;
model.rows = list;
return model;
}
void IService.UpdateData(string id, string oper, string Col1, string Col2)
{
//do work here to save the updated data
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.