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.