CODEWITHSUNDEEP
jqueryjqgrid
early
early

Reputation: 543

jqGrid - subgrid reloaded if parent grid page changed?

I have a simple subgrid as grid implemented and the parent gird has more than 1 page.

following is the code for testing:

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/grid.locale-en.js" ></script>
    <script type="text/javascript" src="js/jquery.jqGrid.min.js" ></script>     
</head>
<body>
    <table id="grid1">
    <div id="pager1"></div>
    </table>

    <script type="text/javascript">     
        jQuery("#grid1").jqGrid({ 
        datatype: "local", 
        height: 250, 
        rowNum:5, 
        rowList:[5,10,15],
        cellEdit:true,
        cellsubmit: 'clientArray',
        pager: '#pager1',
        colNames:['Inv No', 'Client','Notes','Checked?' ], 
        colModel:[ 
        {name:'id',index:'id', width:60, sortable:false}, 
        {name:'name',index:'name', width:100, sortable:false}, 
        {name:'note',index:'note', width:150, sortable:false, editable:true}, 
        {name:'ind_checked',index:'ind_checked', width:100, sortable:false, align:'center', editable:true, 
            edittype:'checkbox', editoptions: { value:"Yes:No" },  formatter:'checkbox'}
        ],
        caption: "Testing",
        loadonce: true,
        subGrid : true, 
        subGridOptions: { reloadOnExpand : false},
        subGridRowExpanded: function(subgrid_id, parent_rowid) {
            subgrid_table_id = subgrid_id+"_t";
            subgrid_pager_id = 'p_'+subgrid_table_id;
            jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"'></table><div id='" + subgrid_pager_id + "'></div>");
            jQuery("#"+subgrid_table_id).jqGrid({
                datatype: "local", 
                height: "100%", 
                cellEdit:true,
                cellsubmit: 'clientArray',
                pager: '#'+subgrid_pager_id,
                colNames:['Inv No','Item No', 'Qty'], 
                colModel:[ 
                    {name:'id',index:'id', width:60, sortable:false},
                    {name:'icode',index:'icode', width:60, sortable:false}, 
                    {name:'qty',index:'qty', width:100, sortable:false, editable:true}
                ],
                loadonce: true,
                loadComplete : function() {
                    var dataIds = $('#grid1').jqGrid('getDataIDs');
                    var data = $('#grid1').jqGrid('getRowData',dataIds[parent_rowid-1]);
                    loadDetail(data.id);
                }
            });
        }
        }).navGrid('#pager1');

        var mydata = [ 
        {id:"1",name:"test1",note:"note1",ind_checked:"yes"}, 
        {id:"2",name:"test2",note:"note2",ind_checked:"no"}, 
        {id:"3",name:"test3",note:"note3",ind_checked:"yes"}, 
        {id:"4",name:"test4",note:"note4",ind_checked:"yes"}, 
        {id:"5",name:"test5",note:"note5",ind_checked:"no"}, 
        {id:"6",name:"test6",note:"note6",ind_checked:"no"}, 
        {id:"7",name:"test7",note:"note7",ind_checked:"yes"}, 
        {id:"8",name:"test8",note:"note8",ind_checked:"no"}, 
        {id:"9",name:"test9",note:"note9",ind_checked:"no"} ]
        ;

        for(var i=0;i<mydata.length;i++) {
            jQuery("#grid1").jqGrid('addRowData',i+1,mydata[i]);
        }

        var mySGdata = [ 
        {id:"1",icode:"item1",qty:10}, 
        {id:"1",icode:"item2",qty:10}, 
        {id:"3",icode:"item1",qty:10}, 
        {id:"3",icode:"item2",qty:10}, 
        {id:"3",icode:"item3",qty:10}, 
        {id:"4",icode:"item2",qty:10}, 
        {id:"7",icode:"item1",qty:10}, 
        {id:"7",icode:"item3",qty:10}, 
        {id:"9",icode:"item3",qty:10} ]
        ; 

        function loadDetail(id) {
            for (var i=0; i<mySGdata.length; i++) {
                if (mySGdata[i].id==id) {
                    //alert('Add subgridRow');
                    jQuery("#"+subgrid_table_id).jqGrid('addRowData',i+1,mySGdata[i]);
                }
            }
        }
    </script>
</body>
</html>

The problem is the subgrid will reload the local data if the parent grid changed the page, even I added the options of subGridOptions: { reloadOnExpand : false} and loadonce:ture

Let's say, you can change the QTY in subgrid and then collapse and expand it. The subgrid will not reload the local data and has still kept my changes.

However, if I change to the next page and switch back to the previous page, the subgrid will reload the local data again when I expand it. So, I lost all my changes.

Does anyone has any idea and any workaround, or somethings I'm missing? please advise me. Thank you.

To test my script, please click the rowList and make the grid contains 5 rows first and has 2 pages, because I don't know how to make the page/container to show 5 rows at the very first beginning with local data. If anyone knows how to do it, it would be a bonus to me too. Thanks!

Updated: I figured out it's not only about the page was changed, it also forces the subgrid reload when I change the rowList (how many rows show on a page). Is there any way to avoid this behavior? please. Thank you

Upvotes: 2

Views: 3423

Answers (1)

scessor
scessor

Reputation: 16125

First I would create the data arrays first and set them directly in the grid-options (like in this example). Then the number of rows are ok and no additional javascript code for loading is required.

Otherwise you have to reload the grid to have the number of rows correctly after adding the data:

jQuery("#grid1").trigger("reloadGrid");

Also see this reload example.

To your main question: the option loadonce and the pager don't work together (see this link).

Workaround: I think you have to change your data variables after each data change or before each paging (e.g. you can use the onPaging-event).

Upvotes: 2

Related Questions