Hi Having a problem moving from v2.4 to v3.2 - all code works correctly using v2.4 but after moving to v3.2 my grids are empty of data. I've checked the requirements and all js and css I think are need are loaded on the page. From chnagelog all I needed to do was change to sortModel, here's example code if any can spot where it's wrong please respond
var colModelhl = [
{ title: "Code", dataType: "string", width: "50", dataIndx: 0, render: filterRender },
{ title: "Name", dataType: "string", width: "250", dataIndx: 1, render: filterRender },
{ title: "Resort Name", dataType: "string", width: "250", dataIndx: 4, render: filterRender },
{ title: "Country", dataType: "string", width: "100", dataIndx: 6, render: filterRender },
{ title: "InActive", dataType: "string", width: "100", dataIndx: 2 }
];
var dataModelhl = {
//cache: true,
location: "remote",
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 sortModelhl = {
cancel: false,
single: true,
type: "local",
sorter: [{ dataIndx: "name", dir: "up" }]
};
var obj = {
width: 750, height: 0,
dataModel: dataModelhl,
colModel: colModelhl,
sortModel: sortModelhl,
pageModel: { rPP: 10, type: "local", rPPOptions: [1, 2, 5, 10, 20, 100] },
title: "<b>Hotel List</b>",
flexHeight: true,
paging: true,
draggable: false,
editable: false,
//resizable:true,
scrollModel: { horizontal: false },
numberCell: false,
selectionModel: {
type: 'row', mode: 'single'
},
filterModel: { mode: 'OR', type: 'local' },
toolbar: {
cls: "pq-toolbar-search",
items: [
{ type: "<span style='margin:5px;'>Filter</span>" },
{ type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'keyup': filterhandler }] },
{
type: 'select', cls: "filterColumn",
listeners: [{ 'change': filterhandler }],
options: function (ui) {
var CM = ui.colModel;
var opts = [{ '': '[ All Fields ]' }];
for (var i = 0; i < CM.length; i++) {
var column = CM;
var obj = {};
obj[column.dataIndx] = column.title;
opts.push(obj);
}
return opts;
}
},
{
type: 'select', style: "margin:0px 5px;", cls: "filterCondition",
listeners: [{ 'change': filterhandler }],
options: [
{ "contain": "Contains" },
{ "begin": "Begins With" },
{ "end": "Ends With" },
{ "notcontain": "Does not contain" },
{ "equal": "Equal To" },
{ "notequal": "Not Equal To" },
{ "empty": "Empty" },
{ "notempty": "Not Empty" },
{ "less": "Less Than" },
{ "great": "Great Than" },
{ "regexp": "Regex" }
]
},
{
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");
}
}
]
}
]
},
load: function(evt, ui){
var $grid = $(this),
data = $grid.pqGrid('option','dataModel.data');
$.each(data, function (i, rowData) {
if (rowData[2] == "true") {
//alert("r" + i.toString());
$grid.pqGrid("addClass", { rowIndx: i, cls: "pq-red" });
}
});
},
collapsible: { on: true, collapsed: false },
freezeCols: 0,
rowSelect: loadHotel
};
$gridhl = $("#HotelGrid").pqGrid(obj);
$gridhl = $("#HotelGrid").pqGrid("refresh");
