jqGrid Subgrid with "local" Data

Question

I'm trying to get my subgrid to work with local data. However, when I click expand, I just get a Loading box like the grid is attempting to pull the data from somewhere. I'm assuming I don't need a subGridUrl since the master grid's datatype is datatype:'local'. Is there anything else I should be doing?

Solution

There are no direct way to define subgrid with local data, but you can relatively easy implement the same behavior using subGridRowExpanded (Subgrid as Grid). What one need to do is just to get from some you internal structures the data for the subgrid by the rowid of the grid. For example if you would have subgrids map as

var myGridData = [
        // main grid data
        {id: "m1", col1: "11", col2: "12"},
        {id: "m2", col1: "21", col2: "22"}
    ],
    mySubgrids = {
        m1: [
            // data for subgrid for the id=m1
            {id: "s1a", c1: "aa", c2: "ab", c3: "ac"},
            {id: "s1b", c1: "ba", c2: "bb", c3: "bc"},
            {id: "s1c", c1: "ca", c2: "cb", c3: "cc"}
        ],
        m2: [
            // data for subgrid for the id=m2
            {id: "s2a", c1: "xx", c2: "xy", c3: "xz"}
        ]
    };

Inside of subGridRowExpanded you can create subgrid with the following code:

$("#grid").jqGrid({
    datatype: 'local',
    data: myGridData,
    colNames: ['Column 1', 'Column 2'],
    colModel: [
        { name: 'col1', width: 200 },
        { name: 'col2', width: 200 }
    ],
    ...
    subGrid: true,
    subGridRowExpanded: function (subgridDivId, rowId) {
        var subgridTableId = subgridDivId + "_t";
        $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
        $("#" + subgridTableId).jqGrid({
            datatype: 'local',
            data: mySubgrids[rowId],
            colNames: ['Col 1', 'Col 2', 'Col 3'],
            colModel: [
                { name: 'c1', width: 100 },
                { name: 'c2', width: 100 },
                { name: 'c3', width: 100 }
            ],
            ...
        });
    }
});

The demo shows the results live:

Comments

[FastTrack]

Great answer Oleg. I'm going to implement this in my code! I'm actually using this in conjunction with the Drag and Drop from grid to grid (from my other question).

[Vikas Gupta]

@oleg Great answer, it helped me in a major issue though i can upvote it only once. :(

[Oleg]

@VikasGupta: I'm glad that I could help you. You are welcome!

[CJ Ramki]

@Oleg in this mySubgrids[rowId], rowId is a connection between parent grid and children grid?. Then how about view in model? view data in dialog of parent grid row will contain that children grid data too?

[Oleg]

@CJRamki: I'm not sure that I understand what you mean. One need have different (correct) subgrid for every row and the rows are identified by unique rowid which have some meaning in the data model (id from database for example). Now about view/model. jqGrid get jqGrid data per Ajax from the server. So one need just use empty table in the view and the binding to the data model should be in URL only. View means mostly HTML fragment with data. In case of Ajax data view will be empty and you need just have some Actions on MVC controller.

[Oleg]

@CJRamki: I recommend you to use idPrefix in subgrids. Moreover the part of information about subgrid data (mySubgrids) can be the part of the item data. See the answer, this one and this one. You can use alternatively userdata part of the server response for subgrid information. You can do this directly on the server or like in the answer on the client side inside of beforeProcessing callback.

[CJ Ramki]

@Oleg Thanks for your response. I need more informations to solve my issue... So I posted my issue as SO question. Please help me to solve my issue.