Multiple grids updating from rowselect action

[lgauton]

Hi

I have multiple grids on a page. GridB is updated with data after a rowselect on GridA. This all works perfectly the first use.

All Subsequent rowselect's on GridA do not re-populate GridB and GridB is left so it doesn't respond to it's own rowselect action, I thought all I needed to do was call 'refresh' as below

                $grid = $("#ContactsGrid").pqGrid(obj);
                $grid = $("#ContactsGrid").pqGrid("refresh");

is there something I'm missing

[paramvir]

As you also need to refresh data in GridB, it should be refreshDataAndView instead of refresh.

[lgauton]

Thanks tried that but it makes no difference - I should have posted my grid definition if that helps

                var colModel = [
                { title: "ID", dataType: "string", width: "75", dataIndx: 0 },
                { title: "Type:Code", dataType: "string", width: "100", dataIndx: 3 },
                { title: "Type:Desc", dataType: "string", width: "250", dataIndx: 4 },
                { title: "Name", dataType: "string", width: "250", dataIndx: 2 }
                ];

                var dataModel = {
                    cache: true,
                    location: "remote",
                    sortDir: "up",
                    sortIndx: 2,
                    sorting: "local",
                    dataType: "xml",
                    method: "POST",
                    getUrl: function () {
                        return {
                            url: "@Url.ModuleUrl().Action("AccessHotelData")",
                                        data: { 'id': "2" }
                                    };
                                },
                getData: function (dataDoc) {
                    //debugger;
                    var obj = { itemParent: "Contact", itemNames: ["id", "type", "name", "code", "description"] };
                    return { data: $.paramquery.xmlToArray(dataDoc, obj) };
                }
            };
                var obj = {
                    width: 700, height: 0,
                    dataModel: dataModel,
                    colModel: colModel,
                    pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
                    title: "<b>Contact List</b>",
                    flexHeight: true,
                    paging: true,
                    draggable: true,
                    editable: false,
                    //resizable:true,           
                    scrollModel: { horizontal: false },
                    showToolbar: false,
                    collapsible: true,
                    freezeCols: 0,
                    rowSelect: loadContact
                };

[paramvir]

looks like it's the code for gridA. where is the code for gridB and loadContact.

[lgauton]

This is definition for GridA - HotelGrid

                var colModel = [
                { title: "Code", dataType: "string", width: "50", dataIndx: 0 },
                { title: "Name", dataType: "string", width: 250, dataIndx: 1 },
                { title: "Resort Name", width: 250, dataIndx: 4 },
                { title: "Country", dataType: "string", width: 100, dataIndx: 6 }
                ];

                var dataModel = {
                    cache: true,
                    location: "remote",
                    sortDir: "up",
                    sortIndx: 1,
                    sorting: "local",
                    dataType: "xml",
                    method: "POST",
                    getUrl: function () {
                        return { url: "@Url.ModuleUrl().Action("AccessHotelList")" };
                },
                getData: function (dataDoc) {
                    //debugger;
                    var obj = { itemParent: "BriefAccommodationInfo", itemNames: ["code", "name", "inactive", "resortCode", "resortName", "countryCode", "countryName"] };
                    return { data: $.paramquery.xmlToArray(dataDoc, obj) };
                }
            };

                var obj = {
                    width: 700, height: 0,
                    dataModel: dataModel,
                    colModel: colModel,
                    pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
                    title: "<b>Hotel List</b>",
                    flexHeight: true,
                    paging: true,
                    draggable: true,
                    editable: false,
                    //resizable:true,           
                    scrollModel: { horizontal: false },
                    showToolbar: false,
                    collapsible: true,
                    freezeCols: 0,
                    rowSelect: loadHotel
                };

                $grid = $("#HotelGrid").pqGrid(obj);
                $grid = $("#HotelGrid").pqGrid("refresh");

rowselect (calling loadHotel) here builds tab set (using jquery tabs) - one of which is 'Contacts', on click of this option then generates GridB - ContactsGrid

                var colModel = [
                { title: "ID", dataType: "string", width: "75", dataIndx: 0 },
                { title: "Type:Code", dataType: "string", width: "100", dataIndx: 3 },
                { title: "Type:Desc", dataType: "string", width: "250", dataIndx: 4 },
                { title: "Name", dataType: "string", width: "250", dataIndx: 2 }
                ];

                var dataModel = {
                    cache: true,
                    location: "remote",
                    sortDir: "up",
                    sortIndx: 2,
                    sorting: "local",
                    dataType: "xml",
                    method: "POST",
                    getUrl: function () {
                        return {
                            url: "@Url.ModuleUrl().Action("AccessHotelData")",
                                        data: { 'id': "2" }
                                    };
                                },
                getData: function (dataDoc) {
                    //debugger;
                    var obj = { itemParent: "Contact", itemNames: ["id", "type", "name", "code", "description"] };
                    return { data: $.paramquery.xmlToArray(dataDoc, obj) };
                }
            };
                var obj = {
                    width: 700, height: 0,
                    dataModel: dataModel,
                    colModel: colModel,
                    pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
                    title: "<b>Contact List</b>",
                    flexHeight: true,
                    paging: true,
                    draggable: true,
                    editable: false,
                    //resizable:true,           
                    scrollModel: { horizontal: false },
                    showToolbar: false,
                    collapsible: true,
                    freezeCols: 0,
                    rowSelect: loadContact
                };

                 <----------------------------    i've also tried "destroy" here that doesn't work either  ------------------->
                 
                $grid = $("#ContactsGrid").pqGrid(obj);
                $grid = $("#ContactsGrid").pqGrid("refreshDataAndView");

This is the grid that gets messed up

All Ok on first rowselect from HotelGrid, then all subsequent rowselects don't work correctly

[lgauton]

Hi Ancillary question to this - will a null or empty response back from server cause issues - or is that handled by paramquery grid

[lgauton]

Just to give you an update - I found that the problem is when a response set from server is empty/null - this must be returned back as content xml otherwise it doesn't get handled correctly by the grid

Thanks for your help