Question

I am a beginner in the jQgrid, Last days i try to learn jQgrid and create a sample

Mvc application. refer on jQgrid Website. http://www.trirand.com/blog/jqgrid/jqgrid.html

I try to make a Grid as Subgrid in jQGrid. I want Add, Edit, Delete functions in all

child grid is possible.

and i am facing a problem when i expand a row in the jQgrid, parent row is not showing

the collapse icon. Please see my image below.

please see the Red box. It’s not showing the minus icon. Please see my code below.

  <table id="listsg11">
</table>
<div id="pagersg11">
</div>
<script type="text/javascript">
    jQuery("#listsg11").jqGrid({
        url: '/Home/DynamicGridData/',
        datatype: "json",
        mtype: 'POST',
        height: 190,
        width: 600,
        colNames: ['Id', 'Votes', 'Title'],
        colModel:
        [
            { name: 'Id', index: 'Id', width: 40, align: 'left' },
            { name: 'Votes', index: 'Votes', width: 40, align: 'left' },
            { name: 'Title', index: 'Title', width: 400, align: 'left' }
        ],
        rowNum: 8,
        rowList: [8, 10, 20, 30],
        pager: '#pagersg11',
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        multiselect: false,
        subGrid: true,
        caption: "Grid as Subgrid"
        ,
        subGridRowExpanded: function (subgrid_id, row_id) {
            // we pass two parameters 
            // subgrid_id is a id of the div tag created whitin a table data 
            // the id of this elemenet is a combination of the "sg_" + id of the row 
            // the row_id is the id of the row 
            // If we wan to pass additinal parameters to the url we can use 
            // a method getRowData(row_id) - which returns associative array in type name-value 
            // here we can easy construct the flowing
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id + "_t";
            pager_id = "p_" + subgrid_table_id;
            $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
            jQuery("#" + subgrid_table_id).jqGrid({
                url: "/Home/DynamicGridData1/",
                datatype: "json",
                mtype: 'POST',
                colNames: ['Id', 'Votes', 'Title'],
                colModel:
                [
                    { name: 'Id', index: 'Id', width: 40, align: 'left' },
                    { name: 'Votes', index: 'Votes', width: 40, align: 'left' },
                    { name: 'Title', index: 'Title', width: 400, align: 'left' }
                ],
                rowNum: 20,
                rowList: [8, 10, 20, 30],
                pager: pager_id,
                sortname: 'Id',
                sortorder: "asc",
                height: 180,
                width: 500,
            });
            jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: true, add: true, del: true })
        }
        //,
        //            subGridRowColapsed: function (subgrid_id, row_id) {
        //                alert(row_id);
        //                // this function is called before removing the data 
        //                //var subgrid_table_id; 
        //                //subgrid_table_id = subgrid_id+"_t"; 
        //                //jQuery("#"+subgrid_table_id).remove();
        //            }
    });
    jQuery("#listsg11").jqGrid('navGrid', '#pagersg11', { add: true, edit: true, del: true });

</script>

Please help.

Answer 1

Why you don’t try put the javascript inside of

$(function(){
//here go the script
});

Because one of the reasons are that the jqgrid are not correctly downloaded yet.

So try this!

Good Luck!