Question

I faced a critical problem with jqGrid today. Let’s explain my problem first.

I have a main grid which contains the following columns:

Scholarship Name .................................. Student Type
-----------------------------------------------------------------
Full Free Studentship ............................. Poor   
Sir Alfred Nobel Scholarship ...................... Meritorious   
Taj Uddin Memorial Scholarship .................... Individual 

Now I need a sub-grid of this main grid. Student Type is a select type column. When user choose Poor for the Student Type column and click on sub-grid icon then the following sub-grid will be shown:

Guardian Income Range Start Value ....................... Range End Value
--------------------------------------------------------------------------
0 ....................................................... 5000   
5001 .................................................... 10000

When user choose Meritorious then a different sub-grid will be shown which is as follows:

Merit Start .................. Merit End
----------------------------------------
1 ............................ 7

And Individual shows the following:

Student ID
----------
115588   
225577   
336699 

My Question:

Is it possible in jqGrid or any other simple way to implement this.

Thanks in advance.

Answer 1

I’ve found that if you use SubGridRowExpanded and subGridRowColapsed to build the subgrid that you can generate completely different subgrids based upon the row that was expanded.

Below I’ve included a modification of the GridAsSubGrid example at JQGrid Here it simply looks at the ID of the row being expanded, and if its a special case (id=12345) it displays a special grid. You could filter yours based on the student type and show a grid accordingly.

I am using addRowData to add the information, I haven’t tested other data binding methods.

<script type="text/javascript">
var lastsel2;
$(document).ready(function(){
    jQuery("#rowed5").jqGrid({
        datatype: "local",
        height: 250,
        colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
        colModel:[
            {name:'id',index:'id', width:90, sorttype:"int", editable: true},
            {name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
            {name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
            {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},       
            {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}      
        ],
        onSelectRow: function(id){
            if(id && id!==lastsel2){
                jQuery('#rowed5').jqGrid('restoreRow',lastsel2);
                jQuery('#rowed5').jqGrid('editRow',id,true);
                lastsel2=id;
            }
        },
        editurl: "server.php",
        caption: "Input Types",
        multiselect: false,
        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id){
            var subgrid_table_id;
            subgrid_table_id = subgrid_id+"_t";
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'>");

            if(row_id != "12345") {
                jQuery("#"+subgrid_table_id).jqGrid({
                    datatype: "local",
                    colNames: ['No','Item','Qty','Unit','Line Total'],
                    colModel: [
                        {name:"num",index:"num",width:80},
                        {name:"item",index:"item",width:130},
                        {name:"qty",index:"qty",width:70,align:"right"},
                        {name:"unit",index:"unit",width:70,align:"right"},
                        {name:"total",index:"total",width:70,align:"right",sortable:false}
                    ],
                    rowNum:20,
                    sortname: 'num',
                    sortorder: "asc",
                    height: '100%'
                });

                var tdata = [ 
                        { num:"123", item:"single item", qty:"1", unit:"£1.00", total:"£1.00"}, 
                        { num:"234", item:"multi item", qty:"2", unit:"£1.00", total:"£2.00"},
                    ];

                for(var i=0;i < tdata.length;i++)
                    jQuery("#"+subgrid_table_id).jqGrid('addRowData',subgrid_table_id+"r"+tdata[i].num,tdata[i]);
            } else {
                jQuery("#"+subgrid_table_id).jqGrid({
                    datatype: "local",
                    colNames: ['No','Error Message'],
                    colModel: [
                        {name:"num",index:"num",width:80},
                        {name:"error",index:"item",width:250},
                    ],
                    rowNum:20,
                    sortname: 'num',
                    sortorder: "asc",
                    height: '100%'
                });

                var tdata = [ 
                        { num:"1", error:"not validated"}, 
                        { num:"2", error:"only available on thursdays"},
                    ];

                for(var i=0;i < tdata.length;i++)
                    jQuery("#"+subgrid_table_id).jqGrid('addRowData',subgrid_table_id+"r"+tdata[i].num,tdata[i]);
            }
        },
        subGridRowColapsed: function(subgrid_id, row_id){
            var subgrid_table_id;
            subgrid_table_id = subgrid_id+"_t";
            jQuery("#"+subgrid_table_id).remove();
        }

    });
    var mydata2 = [
            {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
            {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
            {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
            {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX"},
            {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
            {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
            {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
            {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
            {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
            ];
    for(var i=0;i < mydata2.length;i++)
        jQuery("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
});
</script>
<table id="rowed5"></table>