jqGrid set SubGrid width to the row width

Question

I'm creating the jqGrid with a simple Subgrid. I have set the property

autowidth:true

so that the jqGrid expands to the width of the parent element. When I expand the row the Subgrid doesn't expand to the width of the jqGrid. The width of the Subgrid remains the sum of all Subgrid columns. Is this an expected behavior or a bug?

Do I need to use jQuery to manually set the width of the Subgrid or is there an another way?

This is an example of the code that I use:

jQuery("#list").jqGrid({ 
    url:'some-url.php', 
    mtype: "POST",
    datatype: "json",
    colNames:['Inv No','Date','Total'], 
    colModel:[  
                {name:'id',index:'id', width:55}, 
                {name:'amount',index:'amount', width:55}, 
                {name:'tax',index:'tax', width:55} 
    ], 
    multiselect: false,
    autowidth: true,
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager', 
    sortname: 'id', 
    sortorder: "desc",
    viewrecords: true, 
    subGrid : true, 
    subGridUrl: 'some-other-url.php', 
    subGridModel: [ {name:['CustomerId','CustomerName'], width:[55,55,]} ], 
    caption: "Subgrid Example",
    sortable: true        
}); 

jQuery("#list").jqGrid('navGrid','#pager',{add:false,edit:false,del:false});

Answer 1

I have found alternative solution, but it requires creating jqGrid as subgrid. Then the width of the sub grid can be adjusted as we want.

This is as example of the code, I hope that somebody will find it useful:

   $("#list").jqGrid({ 
    url:'some-url.php', 
    mtype: "POST",
    datatype: "json",
    colNames:['Inv No','Date','Total'], 
    colModel:[  
                {name:'id',index:'id', width:55}, 
                {name:'amount',index:'amount', width:55}, 
                {name:'tax',index:'tax', width:55} 
    ], 
    multiselect: false,
    autowidth: true,
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager', 
    sortname: 'id', 
    sortorder: "desc",
    viewrecords: true, 
    subGrid : true, 
    subGridRowExpanded: function(subgrid_id, row_id) { 
    var subgrid_table_id, subgrid_pager_id, desired_width; 
            subgrid_table_id = subgrid_id+"_t";
            subgrid_pager_id = "p_"+subgrid_table_id; 
            desired_width = $("#list").width();
            desired_width -= 25;  // adjust this value as needed
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+
            "' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>"); 
                jQuery("#"+subgrid_table_id).jqGrid({ 
                url:"subgrid-url.php?id="+row_id, 
                datatype: "json", 
                colNames: ['No','Item','Qty','Unit','Line Total'],  
                colModel: [ {name:"num",index:"num",width:80,key:true},  
                            {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,  
                pager: pager_id,  
                sortname: 'num',  
                sortorder: "asc",  
                height: '100%',
                autowidth: false,
                width: desired_width
            });
        },
    caption: "Subgrid Example",
    sortable: true        
});

Answer 2

You could use CSS:

td.subgrid-data div.tablediv table {
  width: 100%
}