10

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?

FastTrack
  • 8,810
  • 14
  • 57
  • 78

1 Answers1

25

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:

enter image description here

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 1
    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](http://stackoverflow.com/questions/10146892/jqgrid-drag-and-drop-row-check)). – FastTrack Apr 16 '12 at 20:24
  • @oleg Great answer, it helped me in a major issue though i can upvote it only once. :( – Vikas Gupta Jun 07 '12 at 07:24
  • @VikasGupta: I'm glad that I could help you. You are welcome! – Oleg Jun 07 '12 at 08:46
  • @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? – CJ Ramki Apr 12 '14 at 05:13
  • @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 Apr 12 '14 at 07:52
  • @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](http://stackoverflow.com/a/14265456/315935), [this one](http://stackoverflow.com/a/13779589/315935) and [this one](http://stackoverflow.com/a/13241406/315935). 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](http://stackoverflow.com/a/14205263/315935) on the client side inside of `beforeProcessing` callback. – Oleg Apr 12 '14 at 07:59
  • @Oleg Thanks for your response. I need more informations to solve my issue... So I posted my issue as SO [question](http://stackoverflow.com/q/23040186/2567813). Please help me to solve my issue. – CJ Ramki Apr 13 '14 at 07:50