Different SubGrids depend on Main Grid's Column Value in jqGrid

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.

The example from your question is not quite clear for me. You wrote "When user choose Poor for the Student Type column". Typically the grid displays select (dropdown) elements only in editing mode or in the searching dialog. If I understand you correct in your case the second "Student Type" column of the main grid is not the part of data which corresponds to the first column. Is it so? You want to have select control just be displayed in the second column to gives the user the possibility to control which information should be displayed in the subgrid. Is it what you want? — Oleg, Aug 01 '11 at 08:07
@Oleg When a user clicks to show the sub-grid then if Student Type is set as poor then the sub-grid should display Guardian income range and so on. — Tareq, Aug 01 '11 at 08:21
What is unclear for me: is "Poor" is the type which corresponds to "Full Free Studentship" and **the user can't choose** another one value. In the case the requirement is more easy. Or you have the case there in the second column of the grid should be displayed the dropdown list where **the user can choose** something to control the contain of the subgrid contain? What do you mean? Probably my problem is that I know nothing about the scholarships so the information inside of the grid/subgrid is just like x, y, z and I can't guess anything. — Oleg, Aug 01 '11 at 08:33
@Oleg: Sorry, my mistake. Poor, Meritorious and Individual are types that can be associated with any Scholarship Name. When a user associate **Poor** to any Scholarship Name then the sub-grid corresponds to poor will be displayed and so on. — Tareq, Aug 01 '11 at 10:08
I still not quite understand your question. The contain of the second column "Student Type" should be filled so there are some contain in the column **before** and action from the user side. Now "the user can associate" another value in the the "Student Type". So **after the "association"** one will see for example "Sir Alfred Nobel Scholarship" --- "Poor" instead of "Sir Alfred Nobel Scholarship" --- "Meritorious" before in the second row of the table? Is it what you mean? Should the choice be saved on the server? Is the "association" be done in the view mode or in the edit mode? — Oleg, Aug 01 '11 at 10:50

score 1 · Accepted Answer · answered Sep 06 '11 at 15:39

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>

score 0 · Answer 2 · answered Aug 18 '11 at 08:13

0

As far I know, it is not possible in jqGrid. You have to use same sub-grid for a single Grid. Thanks for the nice question.

Oh... If it is possible, then let us inform the process.

answered Aug 18 '11 at 08:13

Tareq

1,999
2
28
57

as far, I also came to the decision that it is not possible. Thanks for the answer. – Tareq Aug 18 '11 at 08:14

Different SubGrids depend on Main Grid's Column Value in jqGrid

2 Answers2