How do I load data for Dojo Dgrid Table using AJAX?

Question

I am exploring using DGrid for my web application. I am trying to have a table similar to this. The code for the example above is here.

The table uses a memory store as the source of its data - the summary field there is what shows up when we click and expand each row.

I want the details(i.e the text shown when we click a row) to be fetched from the server on clicking on the row instead of being statically loaded along with rest of the page. How do I modify the above code to be able to do that?

(My requirement is that of an HTML table, each row expandable on clicking, where the data on each expansion is fetched from the server, using AJAX for instance. I am just exploring dgrid as an option, as I get sortable columns for free with dgrid. If there is a better option, please let me know)

EDIT: Basically I am looking for ideas for doing that and not expecting anyone to actually give me the code. Being rather unfamiliar with Dojo, I am not sure what would be the right approach

Answer 1

If your ajax call returns html, you could place a dijit/layout/ContentPane in your renderer, and set the url of the contents you want to fetch in the ContentPane's href property. Assuming that your initial data (the equivalent of the example's memory store) would have a property called "yourServiceCallHref" containing the url you want to lazy load, your could try this :

require(["dijit/layout/ContentPane", ...], function(ContentPane){

    renderers = {
        ...,
        table: function(obj, options){
            var div = put("div.collapsed", Grid.prototype.renderRow.apply(this, arguments)),
                cp = new ContentPane({
                    href : obj.yourServiceCallHref
                }),                       
                expando = put(div, "div.expando", cp.domNode);
                cp.startup();
        return div;
    }
});

If your service returns json, you could probably do something with dojo/request in a similar fashion. Just add your dom creation steps in your request callback and put them inside the div called "expando"...

Another option would be to replace the Memory store by a JsonRest store, and have the server output the same json format than the one you see on the Memory store. That means all the data would be fetched in a single call though...