JQGrid in MVC Not Loading the Grid

Question

I have an MVC Edit View that contains Contact Information that is of course editable. In that view I want to add a section containing a JQGrid allowing the user to CRUD notes for the Contact but my grid is not loading with data nor is the method on the controller being called. Can anyone give me any insite?

View Code

<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-info">
           Contact Note</h3>
    </div>
    <div class="panel-body">
        <div class="scrollableContainer" style="margin-top: -10px;">
            <table id="JQGrid1"></table>
            <div id="JQGrid1_pager"></div>
        </div>
    </div>
</div>

    <script>
        $("#JQGrid1").jqGrid({
            url: '@Url.Action("GetNotes", "Contact")',
            mtype: "GET",
            datatype: "json",
            page: 1,
            jsonReader: { id: document.getElementById('SelectedContact_ContactID').value },
            prmNames: { id: document.getElementById('SelectedContact_ContactID').value },
            colNames: ["Id", "ContactId", "Note", "Date Created", "Created By"],
            colModel: [
                { key: true, width: 50, name: "ID", hidden: false },
                { width: 60,  name: "ContactID", hidden: false },
                { width: 460,  name: "Note", hidden: false },
                { width: 160,  name: "DateCreated",
                    formatter: "date", formatoptions: { srcformat: "m/d/Y h:i:s A", newformat: "mm-dd-yyyy" }, hidden: false },
                { width: 160,  name: "CreatedBy", hidden: false },
            ],
            height: "auto",
            caption: "Notes",
            rowNum: 5,
            pager: "#JQGrid1_pager",
        });
      </script>

Controller Code

[HttpGet]
public JsonResult GetNotes(int id)
{
    var gridModel = new ContactNotesJQGridModel();
    var resultset = _contactNoteRepository.GetNotes(id);
    return gridModel.ContactNotesGrid.DataBind(resultset.AsQueryable());
}

GridModel Class

public class ContactNotesJQGridModel
{
    public JQGrid ContactNotesGrid { get; set; }

    public ContactNotesJQGridModel()
    {
        ContactNotesGrid = new JQGrid
        {
            Columns = new List<JQGridColumn>()
            {
                new JQGridColumn {DataField = "ID", PrimaryKey = true},
                new JQGridColumn {DataField = "ContactId"},
                new JQGridColumn {DataField = "Note"},
                new JQGridColumn {DataField = "DateCreated"},
                new JQGridColumn {DataField = "CreatedBy"},
            }
        };
    }

Then in the Edit Call for the Contact in the Contact Controller I set model.ContactNotesGrid = new ContactNotesJQGridModel GetNotes(int id) is never executed eventhough it's specified in the jquery.

Try to use `postData` like `postData: { id: "JQGrid1" }` or something like `postData: { id: function () { return document.getElementById('SelectedContact_ContactID').value; } }`. I recommend you additionally to add `loadError` callback (see [the answer](http://stackoverflow.com/a/6969114/315935)). — Oleg, Feb 03 '15 at 07:44
Using postData didn't allow the controller method to be called — Tim, Feb 03 '15 at 07:50
What exactly you tested? Which `id` value you expect on the server? If it's a number then try first `postData: { id: 123 }`. Then include `alert(document.getElementById('SelectedContact_ContactID').value);` inside of `postData: { id: function () {/*here before return*/}}`. Then set breakpoint in the first line of `GetNotes` of the server code. You can use Developer Tools of IE/Chrome (press F12 to start) and examine HTTP traffic. It's important to verify that `id` with correct numeric value will be added to the HTP request sending to the server. — Oleg, Feb 03 '15 at 07:56
`jsonReader` inform jqGrid how to process the server response. `prmNames` can be important during editing of the grid. Because you don't included **the value** of `document.getElementById('SelectedContact_ContactID').value` it's difficult to say what is correct. Moreover you should include *example of the server response*. — Oleg, Feb 03 '15 at 08:00
I added id: 11 to the postData and it didn't call the controller method — Tim, Feb 03 '15 at 08:01
What **exactly** you tried? `postData: { id: 123 }` or some another code? Do you included `loadError` callback? Do you traced HTTP traffic? Could you verify which URL (which parameters of the URL) was really used in the server request and which server response you get back? — Oleg, Feb 03 '15 at 08:04
I used postData{ id: 11 }.. I included the loadError code from the other example as well. Fiddler shows no traffic to the controller not does the breakpoint in the controller get hit — Tim, Feb 03 '15 at 08:07
In any way you should use `return` from `GetNotes` in the way like `return Json(someObjectWithReturnedData, JsonRequestBehavior.AllowGet);` — Oleg, Feb 03 '15 at 08:10
Not seeing a server error other than the id being passed is null when I pass id: 11 — Tim, Feb 03 '15 at 08:14
How look the URL of the request? Could you insert it in the comment? — Oleg, Feb 03 '15 at 08:15
/Contact/GetNotes?_search=false&nd=1422951437834&rows=5&page=1&sidx=&sord=asc — Tim, Feb 03 '15 at 08:19
It has no `id` value. So you didn't used `postData: { id: 11 }` (**NOT** `postData{ id: 11 }` like you posted before) in the test. — Oleg, Feb 03 '15 at 08:21
No I removed it. Like I said in the other comment, when I add postData there is no http traffic recorded in fiddler to the controller. I just tried it again and there is no call to the controller — Tim, Feb 03 '15 at 08:24
Could you include `postData: { id: 11 }` and repeat the test one more time: verify that URL contains `id=11`. — Oleg, Feb 03 '15 at 08:25
I just ran it again and fiddler did not record a url request at all — Tim, Feb 03 '15 at 08:26
Probably you made some syntax error in your last modification (like `,` after `postData: { id: 11 }` for example). Do you seen some error in Console? In any way the option like `postData: { id: 11 }` is really **must to have** in your code. — Oleg, Feb 03 '15 at 08:33
Somehow I did miss the ',' after postData. I added it an now it's working — Tim, Feb 03 '15 at 08:36
I'm getting several errors back from the jquery.jqGrid.js when using IE. unable to get value of the property integer, unable to get value of the property decimalSeperator, unable to get value of the property decimalPlaces, unable to get value of the property thousandsSeperator, unable to get value of the property prefix, unable to get value of the property suffix any idea why these are coming up? Chrome works fine — Tim, Feb 03 '15 at 08:40

score 1 · Accepted Answer · edited May 23 '17 at 12:28

You should use postData to add custom parameter to the server response:

postData: { id: 11 }

or

postData: {
    id: function () {
        return document.getElementById('SelectedContact_ContactID').value;
    }
}

You need additionally modify the code of the server to use something like

return Json(someObjectWithReturnedData, JsonRequestBehavior.AllowGet);

I recommend you to add loadError callback to the list of jqGrid option (see the answer) and add gridview: true and autoencode: true option to jqGrid.

P.S. About the errors like "unable to get value of the property integer", "unable to get value of the property decimalSeperator". You should verify that you included locale file like i18n/grid.locale-en.js before jquery.jqGrid.min.js (see the documentation).

thanks, I know I didn't include that. I'll add that now – Tim Feb 03 '15 at 08:44 — Tim, Feb 03 '15 at 08:44

RajeshKdev · Answer 2 · 2015-02-03T07:11:17.087

0

Try this :

Check 1: Move your Jquery script inside the document ready event:

$( document ).ready(function() {
    console.log( "ready!" );
});

Check 2: Check weather your server request having any problem or not:

protected void Application_Error(object sender, EventArgs e) 
{
  Exception exception = Server.GetLastError();
  Response.Clear();
}

Add the above code in your Global.asax and make sure there is no exception during the call. (Put Break point and check)

Check 3:

Watch your browser console log (F12). If there is any exception log please provide that.

Check 4:

Make sure if the call is success the expected json format is valid or not. In most of the cases it will be the major cause.

The above's are just my guesses / this is what i do first, if i have a prob. :)

edited Feb 03 '15 at 07:11

answered Feb 03 '15 at 06:48

RajeshKdev

6,365
6
58
80

I received an error in the Global.asax. It appears that the id is not being passed to the jquery as it should – Tim Feb 03 '15 at 07:16
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.JsonResult GetNotes(Int32)' in 'ProspectingPlatformWeb.Controllers.ContactController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters – Tim Feb 03 '15 at 07:20
Hey Tim.... I thing your `resultset` doesn't have the value for the field called `"Id"`. Which is non-nullable (int) type to bind. Make sure you are passing it properly. – RajeshKdev Feb 03 '15 at 07:26
I have that value in a hidden field. My guess is that the jquery is executing before the document elements have the value – Tim Feb 03 '15 at 07:28
Yeah... Have you moved your code inside `document ready` event? – RajeshKdev Feb 03 '15 at 07:30
yes I moved it a while ago. I printed to the console the hidden control and it contains the proper value. – Tim Feb 03 '15 at 07:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/70110/discussion-between-rjk-and-tim). – RajeshKdev Feb 03 '15 at 07:40

JQGrid in MVC Not Loading the Grid

2 Answers2