Question

I am using jqgrid, and added one subgrid inside it, which looks like as below,

As you can see,
Rows with columns having 11 and 13 are main grid rows

And every row has subgrid having interest,
The Add Record element shows Add Pop up for Subgrid

Here is the code for subgrid looks like,

subGridRowExpanded: function(subgrid_id, row_id) {
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id+"_t";
            pager_id = "p_"+subgrid_table_id;
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
            jQuery("#"+subgrid_table_id).jqGrid({
                url:"shops?q=2&ShopID="+row_id,
                datatype: "xml",
                colNames: ['Interest'],
                colModel: [
                    //{name:"Id",index:"ShopID",width:80,editable:false,editoptions:{readonly:false,size:40}}, //Shop ID not required
                    {name:"id",index:"id",editable:true,edittype:"select",editoptions:{dataUrl:'shops?q=3&ShopID='+row_id},editrules:{required:true}}
                ],
                rowNum:10,
                pager: pager_id,
                width: '100%',
                height: '100%',
                scrollOffset: 0,
                sortname: 'num',
                sortorder: "asc",
                height: '100%',
                editurl:'shops?q=5&ShopID='+row_id
            });
            jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:true})
        },
        subGridRowColapsed: function(subgrid_id, row_id) {
            // this function is called before removing the data
            //var subgrid_table_id;
            //subgrid_table_id = subgrid_id+"_t";
            //jQuery("#"+subgrid_table_id).remove();
        }

Once we add value from Pop Up it goes to Interest tab for respective row of main grid and that added value should be removed from pop up.

Currently value gets added successfully but it stays there in pop up, until we refresh the main form.

Is there any way to reload add pop up after submitting ?

Appreciate your time, thanks

Answer 1

Probably the problem could be solved if you would set HTTP header "Cache-Control: private, max-age=0" (see here and here) in the response of dataUrl. If you use ASP.NET I would recommend you to read the answer.

Alternatively you can use the option

ajaxSelectOptions: { cache: false }

(see the answer).

If all above will not help, you can use ajaxSelectOptions.data as function which would allow you sure send different values of ShopID parameter of dataUrl. See the answer for more details.

UPDATED: I would recommend you additionally to use recreateForm: true option of Add and Edit forms. See here an example of the usage.