ASP.NET MVC + jqGrid without AJAX

Question

I have an ASP.NET MVC application which is executing a search against a products database. I want to display the results in a jqGrid using the TreeGrid module. I don't really need the grid to be AJAX-y because the data is static and it is small enough that it can all be sent to the client at once.

First question: how do I set up jqGrid so that instead of pulling the JSON data from a URL it just looks in a JS variable or something?

Secondly, what is the most appropriate way to get ASP.NET MVC to put JSON data into a JavaScript variable? I already have the List in my controller and just want to somehow get it out into a JS variable after JSON-ing it.

Or am I fighting against the current too much and just accept the AJAX-y way that jqGrid seems to want to work?

Thanks,

~ Justin

Answer 1

Here is how to display a jqGrid tree using a JavaScript function.

$(document).ready(function() {
    TreeDemo.setupGrid($("#tree"));
});

TreeDemo = {
    data: { A: ["A1", "A2"], B: ["B1", "B2"] },
    setupGrid: function(grid) {
        grid.jqGrid({
            colNames: ['Name'],
            colModel: [
                  { name: 'Name', index: 'Name', width: "250em" }
                ],
            datatype: TreeDemo.treeData,
            loadui: "none",
            sortname: 'Number',
            treeGrid: true,
            treeGridModel: "adjacency",
            sortorder: "asc"
        })
    },
    treeData: function(postdata) {
        var items = postdata.nodeid ? TreeDemo.data[postdata.nodeid] : TreeDemo.data;
        var i = 0;
        var rows = new Array();
        for (val in items) {
            var isLeaf = postdata.nodeid != undefined;
            rows[i] = {
                Name: val,
                Id: val,
                level: postdata.nodeid ? 1 : 0,
                parent: postdata.nodeid || null,
                isLeaf: isLeaf ? "true" : "false",
                expanded: "false"
            }
            i++;
        }
        $("#tree")[0].addJSONData({
            Total: 1,
            Page: 1,
            Records: 2,
            Rows: rows
        });
    }
};

Note that there are lots of options for how you do this and my example is only one.

The way I would get the JSON into a JS var is to either:

1. Write a HTML Helper which emits a short script to the page.
2. Write an action which returns a JavaScriptResult to get the data in a file, if, for some reason, you can't have the data inline.

You create the JSON using the .NET JavaScript serializer. Look at the JsonResult.ExecuteResult in the MVC source code for an example.

Answer 2

See the Data Manipulation page in the jqGrid documentation wiki. There you'll find many ways to feed the data to the grid.

Answer 3

There is also a Table_to_jqGrid plugin that may be an useful option.