ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: lgauton on March 28, 2014, 05:27:51 pm

Title: Multiple grids updating from rowselect action
Post by: lgauton on March 28, 2014, 05:27:51 pm: 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
Title: Re: Multiple grids updating from rowselect action
Post by: paramvir on March 28, 2014, 06:07:05 pm: As you also need to refresh data in GridB, it should be refreshDataAndView instead of refresh.
Title: Re: Multiple grids updating from rowselect action
Post by: lgauton on March 28, 2014, 06:28:37 pm: 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: "Contact List",
flexHeight: true,
paging: true,
draggable: true,
editable: false,
//resizable:true,
scrollModel: { horizontal: false },
showToolbar: false,
collapsible: true,
freezeCols: 0,
rowSelect: loadContact
};
Title: Re: Multiple grids updating from rowselect action
Post by: paramvir on March 28, 2014, 06:36:06 pm: looks like it's the code for gridA. where is the code for gridB and loadContact.
Title: Re: Multiple grids updating from rowselect action
Post by: lgauton on March 28, 2014, 07:11:24 pm: 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: "Hotel List",
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: "Contact List",
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
Title: Re: Multiple grids updating from rowselect action
Post by: lgauton on March 28, 2014, 08:49:40 pm: Hi Ancillary question to this - will a null or empty response back from server cause issues - or is that handled by paramquery grid
Title: Re: Multiple grids updating from rowselect action
Post by: lgauton on March 28, 2014, 09:51:56 pm: 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