jqGrid Subgrid with “local” Data

by

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

More Related Contents:

  1. Adding new row to jqGrid using modal form on client only
  2. Hide expand/collapse symbol or deactivate spec. rows in jqGrid subgrid
  3. JQGrid – How Can We make an Custom Row Detail
  4. Stopping columns resizable in jqgrid
  5. Adding a CSS class to a column
  6. how to persist current row in jqgrid
  7. Browser Memory Usage Comparison: inline onClick vs. using JQuery .bind()
  8. jqgrid: how to set toolbar options based on column value in row selected
  9. Unable to position pager (navigation bar) above jqGrid
  10. Get all rows not filtered from jqGrid
  11. jqGrid client-side searching
  12. Custom jQGrid post action
  13. jqgrid: How to set cell specific css class at generation time
  14. postData not passing any parameters!
  15. JQgrid checkbox onclick update database
  16. jqGrid Not Loading Data
  17. jqGrid : issue loading nested sub grid with local datatype
  18. jqGrid implementing of custom cell: integration of raty-plugin
  19. JQGrid Programmatically Select Grid Row
  20. jqGrid need a field editable on Add dialog but not Edit dialog
  21. Real-time data in a grid – better method
  22. Mapping JSON data in JQGrid
  23. jqGrid – format ratio field as percent value
  24. jqGrid – How to modify form_editing construction?
  25. Add multiple input elements in a custom edit type field
  26. Filtering jqGrid datetime columns using date picker just on date
  27. jqgrid change cell value and stay in edit mode
  28. jqGrid trigger “Loading…” overlay
  29. Setting data attribute on each row of a jqgrid table
  30. How to delete rows with local data in jqgrid

Leave a Comment