JQgrid

JQgrid

jqGrid Treegrid does not expand and collapse rows after dynamic load of data


    <table id="grid"></table>
    <div id="jqGridPager"></div>  

<style>

</style>

@section scripts{
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
    jQuery.browser = {};
    (function () {
        jQuery.browser.msie = false;
        jQuery.browser.version = 0;
        if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
            jQuery.browser.msie = true;
            jQuery.browser.version = RegExp.$1;
        }
    })();  
    $("#grid").jqGrid({
        url:"@Url.Action("GetEmployees", "Home")",
        mtype: 'GET',
        datatype:'json',       
        height: 250,
        colModel: [{name: 'EmployeeID', index: "accounts.account_id", sorttype: "int",key: true,hidden: true,  width: 50   },
                  { name: 'FirstName', index: 'FirstName', sortable: false ,label: " "},
                  { name: 'LastName', index: 'LastName', sortable: false },
                  { name: 'Title', index: 'Title', sortable: false },
                  { name: 'ReportTo', index: 'ReportTo', sortable: false },
                  { name: 'Country', index: 'Country', sortable: false },
                  { name: 'City', index: 'City', sortable: false },
                  { name: "level", hidden: true }],
        treeGrid: true,
        scrollrows: true,
        pager: '#jqGridPager',
        rowNum: 2,
        rowList:[2,20,30],
        ExpandColumn: "FirstName",      
        sortorder: "asc",       
        loadonce:false,
        caption: "Example",
    });
    $('#grid').jqGrid('setGroupHeaders', {
        useColSpanStyle: true,
        groupHeaders: [
            { "startColumnName": 'LastName', "numberOfColumns": 3, "titleText": 'LastName' },
            { "startColumnName": 'Country', "numberOfColumns": 2, "titleText": 'Country' }
        ]
    });


</script>

}