JqGrid- Expanding Subgrid on page load

Question

I have a Jqgrid with subgrid enabled in my MVC 2 project. Subgrid expands and populates data on the button click. I want to expand and show the subgrid data on page load. So i called exapandSubGridRow method on gridComplete event of the parent grid. Now the problem is, subgrid row is expanded on pageload, but with no data, an empty row appears below the parent grid row. Here is my code, Can anyone help me in fixing the problem.

<script type="text/javascript">
   jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '/jqgrid/DynamicGridData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['SurveyQnGrpId', 'SurveyQnGroup1'],
            colModel: [
              { name:'SurveyQnGrpId', index:'SurveyQnGrpId', width:40, align:'left' },
              { name:'SurveyQnGroup1',index: 'SurveyQnGroup1',width: 400,
                align: 'left'}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'SurveyQnGrpId',
            sortorder: "SurveyQnGroup1",
            viewrecords: true,
            caption: 'My first grid',
            subGrid: true,
            subGridUrl: '/jqgrid/InnerGridData/',
            subGridModel: [{
                name: ['SurveyQnGrpId','SurveyQnId', 'SurveyQn', 'SurveyQnCategory',
                       'MandatoryQn','RadioOption3'],
                width: [10,10, 100, 10, 10,10],
                align: ['left', 'left', 'left', 'left'],
                params: ['SurveyQnGrpId']
            }],
            gridComplete: function () {
                var rowIds = $("#list").getDataIDs();
                $.each(rowIds, function (index, rowId) {
                        $("#list").expandSubGridRow(rowId); 
                }); 
            } 
        });
    });
</script>

Thanks in advance, Ancy

scott.korin scott.korin · Accepted Answer · 2013-04-17T19:10:38

I don't know if this was available at the time this question was asked, but I found there is a subGridOptions property, takes an object. One of the properties in that object is expandOnLoad, which, when set to true, will make rows in the parent grid expand when the grid is loaded:

jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        url: '/jqgrid/DynamicGridData/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['SurveyQnGrpId', 'SurveyQnGroup1'],
        colModel: [
          { name:'SurveyQnGrpId', index:'SurveyQnGrpId', width:40, align:'left' },
          { name:'SurveyQnGroup1',index: 'SurveyQnGroup1',width: 400,
            align: 'left'}],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'SurveyQnGrpId',
        sortorder: "SurveyQnGroup1",
        viewrecords: true,
        caption: 'My first grid',
        subGrid: true,
        subGridOptions: { expandOnLoad: true },
        subGridUrl: '/jqgrid/InnerGridData/',
        subGridModel: [{
            name: ['SurveyQnGrpId','SurveyQnId', 'SurveyQn', 'SurveyQnCategory',
                   'MandatoryQn','RadioOption3'],
            width: [10,10, 100, 10, 10,10],
            align: ['left', 'left', 'left', 'left'],
            params: ['SurveyQnGrpId']
        }],
        gridComplete: function () {
            var rowIds = $("#list").getDataIDs();
            $.each(rowIds, function (index, rowId) {
                    $("#list").expandSubGridRow(rowId); 
            }); 
        } 
    });
});

See: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid

JqGrid- Expanding Subgrid on page load

1 Answers