JQGrid DataUrl usage with ASP.net (MVC 2.0)
I want to display a combobox with add/edit dialog on Jqgrid. I could do it with hardcoded values. But now I want to populate data from database (controller action). Can anyone help me writting the controller code for DataUrl. (Does it need Json formatted string of Value & Text?). My Grid definition is as below.
My other url actions are working fine.
jQuery("#myGrid").jqGrid({
pager: jQuery('#myGridPager'),
sortname: 'Name',开发者_Python百科
rowNum: 10,
rowList: [10, 20, 50],
sortorder: "asc",
height: "auto",
autowidth: true,
colNames: ['Id', 'Name', 'Dept', 'Status', 'ParentNodeName'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true, key : true },
{ name: 'Name', index: 'Name', width: 200, editable: true, edittype: "text", editrules: { required: true} },
{ name: 'Dept', index: 'Dept', width: 90, editable: true, editrules: { required: true} },
{ name: 'Status', index: 'Status', width: 25, editable: true, edittype: "select", editoptions: { value: "A:Active;I:Inactive"} },
{ name: 'ParentNodeName',
index: 'ParentNodeName',
editable: true,
edittype: "select",
editoptions: { dataUrl: "/MyEntity/GetMyEntitys" }
},
],
datatype: 'json',
viewrecords: true,
mtype: 'GET',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
url: "/MyEntity/GetMyEntitysData",
multiselect: false,
editurl: "/MyEntity/EditMyEntity?__SESSIONKEY=<%=Model.SessionKey %>",
caption: "Data Entry"
})
.navGrid('#myGridPager', { view: true, del: true, add: true, edit: true },
{ height: 150, reloadAfterSubmit: false, modal: true }, // default settings for edit
{ height: 150, reloadAfterSubmit: true, modal: true, url: "/MyEntity/AddMyEntity?__SESSIONKEY=<%=Model.SessionKey %>" }, // settings for add
{ height: "auto", reloadAfterSubmit: false, modal: true, url: "/MyEntity/DeleteMyEntity?__SESSIONKEY=<%=Model.SessionKey %>" }, // delete
{ closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
{} /* view parameters*/
);
Call controller code in dataUrl using edit options as below:
.aspx/js code:
editoptions: { dataUrl: "/YourControllerName/TheFunction" }
The controller code here:
public string TheFunction()
{
return ConstructSelect(Model.YourList);
}
public string ConstructSelect(SelectList collection)
{
string result = "<select>";
foreach (var item in collection)
{
result = result + "<option value = '" + item.Value + "'>" + item.Text + "</option>";
}
result = result + "</select>";
return result;
}
jqGrid wait for HTML code fragment (a valid HTML <select>
element with the desired <options>
: <select><option value='1'>One</option>…</select>
) as the data returned from the dataUrl: "/MyEntity/GetMyEntitys"
. Because you return the data in JSON format you have to convert the data returned from the server with respect of the editoptions
buildSelect. You can see the corresponding code example in my old answer.
One more small remark. Look at the jqGrid documentation and verify which parameters which you use are default. For example multiselect: false
is default parameter. If you remove the default parameters from the grid definition the code wil be easier to read and it will work a litle bit quickly. In more complex parameters like jsonReader
you could include only the properties which you want to change. For example you can use jsonReader
in the form jsonReader : { repeatitems: true}
because repeatitems
is the only property of jsonReader
which you want to change from the default settings. In the same way you can reduce { view: true, del: true, add: true, edit: true }
to { view: true }
.
精彩评论