hello,
I am using a fluid layout which works great on my desktop browser, scales to fit nicely when browser is collapsed. however, on a mobile device (iPhone), the grid does not compress to fit. not only that, any explicit size I set the column to is not honored either. any ideas? here's my code:
note - I've tried to publish the site with either the width set as px in the colM OR the width set as a percentage in the columnTemplate, not both at the same time (as shown below), but neither has any effect. on a mobile device, the column end up spanning about the entire width of the screen. also note that I reduced the colM for brevity here, I actually have 10 cols.
var colM = [
{
title: "Marker#",
width: "30px", // not working on mobile
dataType: "string",
dataIndx: "MarkerNumber"
},
{
title: "Project",
width: "30px", // not working on mobile
dataType: "string",
dataIndx: "ProjectName"
},
];
var gridM = {
width: "auto",
flexHeight: true,
colModel: colM,
columnTemplate: { width: '10%' }, // not working on mobile
dataModel: dataM,
create: function (ui) {
var $grid = $(this),
$pager = $grid.find(".pq-grid-bottom").find(".pq-pager");
if ($pager && $pager.length) {
$pager = $pager.detach();
$grid.find(".pq-grid-top").append($pager);
}
},
pageModel: { type: tmpJSON.length <= 20 ? null : "local", rPP: 20, strRpp: "{0}", strDisplay: "{0} to {1} of {2}" },
scrollModel: { autoFit: true, lastColumn: "auto" },
numberCell: { show: false },
title: null,
showBottom: false,
showTop: tmpJSON.length <= 10 ? false : true,
editable: false,
resizable: true,
collapsible: false,
rowSelect: function (evt, obj) {
evt.preventDefault();
DoMarkerClick(obj.rowData.MarkerNumber);
}
};
$("#gridContainer").pqGrid(gridM);
