Author Topic: How to freeze just headers  (Read 2408 times)

joelclark

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 10
    • View Profile
How to freeze just headers
« on: March 26, 2019, 08:46:56 pm »
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");
        }
    },

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: How to freeze just headers
« Reply #1 on: March 26, 2019, 10:41:03 pm »
It's because of flexHeight: true,

If you need frozen headers, please remove flexHeight: true, and assign fixed height to the grid.

Ex: https://paramquery.com/pro/demos/grid_json