Implementing a Dependent jqGrid

Question

I have created a jqGrid, and in that I have a column which is a hyperlink, on click, data is fetched and a new jqGrid is created below the parent Grid.

My problem is, that when I click on any link of the parent grid, the child Grid is created successfully. But after that if I click any other link, the child grid shows the same data.

Issue is that the grid is not getting refreshed with the new data.

I have also tried jQuery('grid1').trigger('reloadGrid') But this also doesn't change anything.

EDIT *Below is the code which gets called onClick of the element in the Parent Grid:*

var dynaData2   =   getDataForWelfareStatusDetails(memberId);
           jQuery('#grid1').jqGrid({
            datatype: 'local',
            data: dynaData2,
            colNames:['Effective Date ','Welfare Status ', 'State', 'IV-A/IV-E Case ID', 'Receipt No.','Case Type'],
            colMandReq:['-1','-1','-1','-1'],
            colModel: [
                   { name: 'effectiveDate',index:'effectiveDate', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false},
                   { name: 'welfareStatus', index:'welfareStatus', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false},
                   { name: 'stateCode', index:'stateCode', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false},
                   { name: 'refCaseId', index:'refCaseId', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false,formatter: returnCaseLink},
                   { name: 'receiptNum', index:'receiptNum', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false},
                   { name: 'caseType', index:'caseType', align:"center", editable:false,readonly:true,hidden:false, sortable:false, search: false}

                   ],
            loadComplete: function() 
                {
                    jQuery('#grid1').trigger('reloadGrid');             
                },
            pager: '#pager1',
            gridview: true,
            rownumbers: false,
            autoencode: true,
            shrinkToFit: true,
            autowidth: true,
            sortable: false,
            height: '100%',
            rowNum: 100,
            caption:""
            });

Any input is welcome and appreciated

I think this answer may help you...http://stackoverflow.com/a/5398136/2567813 — CJ Ramki, Mar 20 '14 at 06:41
@CJRamki: I am not making a server hit, the data is available in the front-end, so will loadonce: true work? — Sashi Kant, Mar 20 '14 at 06:47
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/50097/discussion-between-cj-ramki-and-sashi-kant) — CJ Ramki, Mar 20 '14 at 06:47

CJ Ramki · Accepted Answer · 2014-03-20T07:14:57.117

6

Try this,

jQuery("#grid1")
    .jqGrid('setGridParam',
        { 
            datatype: 'local',
            data:dynaData2
        })
    .trigger("reloadGrid");

or you could try with,

jQuery('#grid1').jqGrid("GridUnload");

SEE THIS DOCUMENTATION

edited Mar 20 '14 at 07:14

answered Mar 20 '14 at 06:47

CJ Ramki

2,620
3
25
47

score 1 · Answer 2 · edited May 23 '17 at 12:11

First of all about your main problem: Why the grid is not getting refreshed with the new data? The reason is: you try to create the grid #grid1 multiple times. It's wrong. During the first call of jQuery('#grid1').jqGrid({...}); the initial empty <table id="grid1"></table> will be converted to relatively complex structure of divs and tables. The second attempt to create grid from the structure will be just ignored and you don't see refreshing of the grid.

You can fix the code in many ways. The smallest code, but not the best one, you will get if you includes jQuery('#grid1').jqGrid("GridUnload");.

In any way you should remove jQuery('#grid1').trigger('reloadGrid'); from loadComplete of jQuery('#grid1'). The callback loadComplete will be processed during loading or reloading of the grid. So you can have recursion.

Another possibility will be in separation of initial creating of the grid and the later refreshing of the grid content. With the code jQuery('#grid1').jqGrid({...}); you can create the grid. To refresh the data you need 1) delete old data of the grid 2) set new data with respect of setGridParam for example and 3) reload the grid with respect of trigger("reloadGrid").

You don't posted onClick part. I would recommend you to use the approach described in the answer (or this one) which uses beforeSelectRow callback instead of setting multiple click handles.

Implementing a Dependent jqGrid

2 Answers2