ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: lgauton on April 30, 2014, 02:54:18 pm
-
Hi I have a couple of grids that have titles define such as
var colModel = [
{ title: "Code", dataType: "string", width: "75", dataIndx: 0 },
{ title: "Name", dataType: "string", width: "200", dataIndx: 1 },
{ title: "Resort", dataType: "string", width: "200", dataIndx: 3 },
{ title: "Rating", dataType: "string", width: "100", dataIndx: 6 }
];
When the grid displays it only displays the first title rest are blank, all the column data displays correctly
Have you any ideas on how to fix
Thanks
-
Hi Have fixed this by doing 'refreshDataAndView' but as I was already doing 'refresh' don't understand why I would need to also do a data refresh with if my understanding is correct in my case would resend request to server for data update
-
column titles aren't related to dataModel.data
You mentioned that you are using couple of grids on a page. Do you share colModel within the grids. Do you face the same issue if single grid is used.
Please post your code so that the issue can be reproduced.
-
Here's some sample code
I always have showing on the page grid as this one that lists set of properties to be worked on
var colModel = [
{ title: "Code", dataType: "string", width: "50", dataIndx: 0 },
{ title: "Name", dataType: "string", width: "250", dataIndx: 1 },
{ title: "Resort Name", dataType: "string", 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")",
data: { 'id': ctr }
};
},
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,
selectionModel: {
type: 'row', mode: 'single'
},
toolbar: {
items: [
{
type: 'button', icon: 'ui-icon-plus', label: 'Duplicate Property', listeners: [
{
"click": function (evt, ui) {
//add empty item
duplicateProperty(evt, ui);
}
}
]
},
{
type: 'button', icon: 'ui-icon-plus', label: 'Refresh list', listeners: [
{
"click": function (evt, ui) {
//add empty item
refreshHotellist("1");
}
}
]
}
]
},
collapsible: true,
freezeCols: 0,
rowSelect: loadHotel
};
try {
$grid = $("#HotelGrid").pqGrid("destroy");
}
catch (err) {
}
$grid = $("#HotelGrid").pqGrid(obj);
$grid = $("#HotelGrid").pqGrid("refresh");
$("#HotelName").text("");
$("#tabs").css("display", "none");
$("#HotelGridOuter").css("display", "block");
then underneath are a set of tabbed pages each allowing different functions, most do a a grid of some sort showing, 99% of these tabbed pages display correctly showing full titles. But there is one that doesn't and that has two grids on code as below
var colModel = [
{ title: "Code", dataType: "string", width: "75", dataIndx: 0 },
{ title: "Name", dataType: "string", width: "200", dataIndx: 1 },
{ title: "Resort", dataType: "string", width: "200", dataIndx: 3 },
{ title: "Rating", 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("AccessPriceCheck")",
data: {
'AccomCode': hotelcode,
'Fromdate': $('#PCFromdate').val(),
'Nights': $('#PCNights').val(),
'Adults': $('#PCAdults :selected').val(),
'Child': $('#PCChild :selected').val(),
'Infants': $('#PCInfants :selected').val(),
'ChildAges': $('#PCChildAges').val(),
'ResortCode': $('#OVResortCode').val()
}
};
},
getData: function (dataDoc) {
//debugger;
var obj = { itemParent: "hotel", itemNames: ["code", "name", "resortcode", "resortname", "airportcode", "ratingcode", "ratingname"] };
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,
selectionModel: {
type: 'row', mode: 'single'
},
collapsible: true,
freezeCols: 0
};
//room grid
var colModelr = [
{ title: "Code", dataType: "string", width: "75", dataIndx: 0 },
{ title: "Room", dataType: "string", width: "200", dataIndx: 1 },
{ title: "Board", dataType: "string", width: "200", dataIndx: 2 },
{ title: "Currency", dataType: "string", width: "100", dataIndx: 3 },
{ title: "Price", align: "right", dataType: "float", width: "100", dataIndx: 4 },
{ title: "Supplements", align: "right", dataType: "float", width: "100", dataIndx: 5 },
{ title: "Discounts", align: "right", dataType: "float", width: "100", dataIndx: 6 }
];
var dataModelr = {
//cache: true,
location: "remote",
sortDir: "up",
sortIndx: 1,
sorting: "local",
dataType: "xml",
method: "POST",
getUrl: function () {
return {
url: "@Url.ModuleUrl().Action("AccessPriceCheckRooms")",
data: {
'AccomCode': hotelcode
}
};
},
getData: function (dataDoc) {
//debugger;
var obj = { itemParent: "room", itemNames: ["linkcode", "roomname", "boardname", "currency", "price", "supplements", "discounts"] };
return { data: $.paramquery.xmlToArray(dataDoc, obj) };
}
};
var objr = {
width: 1000, height: 0,
dataModel: dataModelr,
colModel: colModelr,
pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
title: "<b>Room List</b>",
flexHeight: true,
paging: true,
draggable: true,
editable: false,
//resizable:true,
scrollModel: { horizontal: false },
showToolbar: false,
selectionModel: {
type: 'row', mode: 'single'
},
collapsible: true,
freezeCols: 0
};
try {
$grid = $("#PriceCheckHotelGrid").pqGrid("destroy");
}
catch (err) {
}
try {
$gridr = $("#PriceCheckRoomGrid").pqGrid("destroy");
}
catch (err) {
}
$("#PriceCheckHotelGrid").pqGrid(obj);
$("#PriceCheckHotelGrid").pqGrid("refresh"); //refreshDataAndView will fix be resends data request
$("#PriceCheckRoomGrid").pqGrid(objr);
$("#PriceCheckRoomGrid").pqGrid("refresh");
$("#PriceCheckHotelGridOuter").css("display", "block");
$("#PriceCheckHotelGridOuter").scrollToMe();
Hope thats clear
-
your code looks fine and you could try it with JSON data instead of array data using this API
http://paramquery.com/pro/api#method-xmlToJson
1) BTW did you try to use the problematic grid on isolated page.
2) If you still face the issue, could you send the entire solution ( with reproducible issue ) by decoupling client side code from server side code and replacing urls with sample XML files, so that we can test and provide the fix for it.