Hi there,
I'm looking to just freeze the header row of my pqgrid and was wondering how I would go about doing that? Whenever i scroll on the chrome browser the headers will not stay. Is it possibly because I am scrolling with chrome? You can see the attached screenshot but once I scroll past the headers they disappear.
Below is my code for grid settings, thanks:
initializePqGrid: function () {
let grid = $($('.vc-leasecarentry-grid')[0]);
grid.pqGrid({
colModel: GS.LeaseCar.entry.pqGridSettings.columnModel,
dataModel: GS.LeaseCar.entry.pqGridSettings.dataModel,
flexHeight: true,
filterModel: {
on: true,
mode: "AND",
header: true,
menuIcon: true
},
menuIcon: true, //show header menu icon initially.
menuUI: {
tabs: ['filter'] //display only filter tab.
},
scrollModel: { autoFit: true },
selectionModel: { type: 'row', mode: 'single' },
hoverMode: 'row',
title: '<span id=\"total_records\"></span>',
stripeRows: true,
columnBorders: true,
roundCorners: false,
numberCell: { show: false },
showTop: true,
editable: false,
summaryTitle: { sum: "{0}" },
load: function (event, ui) {
CMN.utility.updateRecordsFound(ui);
},
toolbar: {
items: [
{
type: 'button',
label: 'Toggle filter row',
listener: function () {
this.option('filterModel.header', !this.option('filterModel.header'));
this.refresh();
}
},
{
type: 'button',
label: 'Toggle filter row icon',
listener: function () {
this.option('filterModel.menuIcon', !this.option('filterModel.menuIcon'));
this.refresh();
}
},
{
type: 'button',
label: 'Toggle header filter icon',
listener: function () {
this.option('menuIcon', !this.option('menuIcon'));
this.refresh();
}
},
{
type: 'button',
label: 'Reset filters',
listener: function () {
this.reset({ filter: true });
}
},
]
},
});
this.setDataPqGrid();
},
setDataPqGrid: function (options) {
let grid = $($('.vc-leasecarentry-grid')[0]);
if (undefined !== options) {
grid.pqGrid('option', 'dataModel.data', options.data);
grid.pqGrid("refreshDataAndView");
}
},
