JQGrid DataUrl usage with ASP.net (MVC 2.0)

Question

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',
            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*/
      );

score 1 · Answer 1 · edited Jun 26 '13 at 07:10

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;
        }

how does jqgrid know what to default the selected item to when you are updating an existing row ?? — leora, Feb 13 '11 at 07:32

score 0 · Accepted Answer · edited May 23 '17 at 11:55

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 }.

JQGrid DataUrl usage with ASP.net (MVC 2.0)

2 Answers2