Need to get the record number range in current viewport

[TeeJT]

I need to get the record number range in current viewport. When I use beforeTableView event, it gives me initV and finalV which are the starting row of viewport and ending row of viewport.

I have used your demo at https://paramquery.com/pro/demos/group_rows
You will see that the initV and finalV when scrolled right to the bottom will exceed the number of records = 830

The JavaScript code:

Code: [Select]


    $(function () {
var numDataRecords;
var gridTitle = "Order Details";
var gridDiv =  "#grid_group_rows";
        function fillOptions(grid) {
            var column = grid.getColumn({ dataIndx: 'ShipCountry' });
            column.filter.options = grid.getData({ dataIndx: ['ShipCountry'] });
            column.filter.cache = null;
            grid.refreshHeader();
        }
        var colM = [
            { title: "ShipCountry", width: 120, dataIndx: "ShipCountry",
                filter: {
                    type: 'select',
                    prepend: { '': 'All Countries' },
                    valueIndx: 'ShipCountry',
                    labelIndx: 'ShipCountry',
                    condition: 'equal',
                    listeners: ['change']
                }
            },
            { title: "Customer Name", width: 130, dataIndx: "ContactName" },
            { title: "Freight", width: 120, format: '$##,###.00',
                summary: {
                    type: "sum"
                },
                dataType: "float", dataIndx: "Freight"
            },
            { title: "Shipping Via", width: 130, dataIndx: "ShipVia" },
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date" },
            { title: "Shipping Address", width: 220, dataIndx: "ShipAddress" },
            { title: "Shipping City", width: 130, dataIndx: "ShipCity" }
];
        var dataModel = {
            location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "/Content/orders.json"
            //url: "/pro/orders/get",//for ASP.NET
            //url: "orders.php",//for PHP
        };
        var groupModel = {
            on: true,
            summaryInTitleRow: 'all', //to display summary in the title row.
            dataIndx: ['ShipCountry', 'ContactName'],
            //showSummary: [true], //to display summary at end of every group.           
            title: [
                "{0} ({1})",
                "{0} - {1}"
            ]
        };
        var obj = {
            height: 500,
            toolbar: {
                items: [{
                    type: 'button',
                    label: "Toggle grouping",
                    listener: function () {
                        this.Group().option({
                            on: !this.option('groupModel.on')
                        });
                    }
                }]
            },
            dataModel: dataModel,
            scrollModel: { autoFit: true },
            colModel: colM,
            numberCell: { show: false },
            filterModel: { on: true, header: true, type: "local" },
            selectionModel: { type: 'cell' },
            groupModel: groupModel,
            load: function (evt, ui) {
                //options for ShipCountry filter.   
                fillOptions(this);
            },
complete: function( event, ui ) {
var data = this.options.dataModel.data;
numDataRecords = data.length
var title = gridTitle + " - " + numDataRecords + " records";
$(gridDiv).pqGrid( "option", "title", title );
            },
beforeTableView: function( event, ui ) {
var initV = ui.initV + 1;
var finalV = ui.finalV + 1;
var title = gridTitle + " - " + initV + " to " + finalV + " of " + numDataRecords + " records";
$(gridDiv).pqGrid( "option", "title", title );
},
            showTitle: true,
            resizable: true,
            virtualX: true,
            virtualY: true,
            hwrap: false,
            wrap: false
        };
        pq.grid("#grid_group_rows", obj);

    });


[paramvir]

initV, finalV are correct values, numbercell can be enabled to verify that.

numDataRecords in your code = this.options.dataModel.data which is the length of ungrouped data = 830.

After grouping number of rows increase due to extra title and summary rows.

TO get total number of rows after grouping use grid.pageData() method.

Hope it helps.

[TeeJT]

I have used your demo at https://paramquery.com/pro/demos/group_rows
The display of initV, finalV and total number of rows is shown in the grid title bar
I have enabled numberCell.
I am surprised that initially it shows 1 to 17 of 940 rows when what I actually see is only 1 to 13.
If I were to move the scroll to the top, it shows 1 to 15 of 940 rows which is not the actual rows I see.
I am using Google Chrome Version 61.0.3163.100 (Official Build) (64-bit) on Windows 10.

Also when I click on the scrollbar below the scroller - to get the next "page"
The title now shows 13 to 27 rows when what I actually see is only 13 to 25 rows.
Looks like there is a discrepancy here.
I have attached an image but the stipulation of less than 100 kB - I had to crop the image of the grid

Code: [Select]


    $(function () {
var numDataRecords;
var gridTitle = "Order Details";
var gridDiv =  "#grid_group_rows";
        function fillOptions(grid) {
            var column = grid.getColumn({ dataIndx: 'ShipCountry' });
            column.filter.options = grid.getData({ dataIndx: ['ShipCountry'] });
            column.filter.cache = null;
            grid.refreshHeader();
        }
        var colM = [
            { title: "ShipCountry", width: 120, dataIndx: "ShipCountry",
                filter: {
                    type: 'select',
                    prepend: { '': 'All Countries' },
                    valueIndx: 'ShipCountry',
                    labelIndx: 'ShipCountry',
                    condition: 'equal',
                    listeners: ['change']
                }
            },
            { title: "Customer Name", width: 130, dataIndx: "ContactName" },
            { title: "Freight", width: 120, format: '$##,###.00',
                summary: {
                    type: "sum"
                },
                dataType: "float", dataIndx: "Freight"
            },
            { title: "Shipping Via", width: 130, dataIndx: "ShipVia" },
    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date" },
            { title: "Shipping Address", width: 220, dataIndx: "ShipAddress" },
            { title: "Shipping City", width: 130, dataIndx: "ShipCity" }
];
        var dataModel = {
            location: "remote",
            dataType: "JSON",
            method: "GET",
            url: "/Content/orders.json"
            //url: "/pro/orders/get",//for ASP.NET
            //url: "orders.php",//for PHP
        };
        var groupModel = {
            on: true,
            summaryInTitleRow: 'all', //to display summary in the title row.
            dataIndx: ['ShipCountry', 'ContactName'],
            //showSummary: [true], //to display summary at end of every group.           
            title: [
                "{0} ({1})",
                "{0} - {1}"
            ]
        };
        var obj = {
            height: 500,
            toolbar: {
                items: [{
                    type: 'button',
                    label: "Toggle grouping",
                    listener: function () {
                        this.Group().option({
                            on: !this.option('groupModel.on')
                        });
                    }
                }]
            },
            dataModel: dataModel,
            scrollModel: { autoFit: true },
            colModel: colM,
numberCell: { show: true },
            filterModel: { on: true, header: true, type: "local" },
            selectionModel: { type: 'cell' },
            groupModel: groupModel,
            load: function (evt, ui) {
                //options for ShipCountry filter.   
                fillOptions(this);
            },
load: function( event, ui ) {
var data = this.options.dataModel.data;
numDataRecords = data.length
var title = gridTitle + " - " + numDataRecords + " records";
$(gridDiv).pqGrid( "option", "title", title );
            },
beforeTableView: function( event, ui ) {
var initV = ui.initV + 1;
var finalV = ui.finalV + 1;
var numDataRows = (ui.pageData) ? ui.pageData.length : 0;
var title = gridTitle + " - " + initV + " to " + finalV + " of " + numDataRows + " rows";
$(gridDiv).pqGrid( "option", "title", title );
},
            showTitle: true,
            resizable: true,
            virtualX: true,
            virtualY: true,
            hwrap: false,
            wrap: false
        };
        pq.grid("#grid_group_rows", obj);

    });



[paramvir]

initV, finalV represent the newly rendered rows in the viewport; finalV is oftenly bit more than visible rows in the viewport.

finalV may be also less in some cases when only part of the viewport is rendered.

There is no API in the grid to get actual visible rows in the grid.

BTW you haven't mentioned the reason to require visible rows in the viewport. What use case are you trying to solve?

[TeeJT]

The user wants to see the number of records being displayed like when there is paging since the scrollbar position cannot tell more accurately which record number is being displayed.
So the finalV is not accurate but the initV can be used.

[paramvir]

Number cell column is used to see precisely the currently visible rows in grid.

initV is also unsuitable for your purpose; when grid is scrolled one record at a time, initV is the index of newly added row in viewport rather than first visible row in viewport.

[TeeJT]

In the case of scrolling one record at a time, your description of initV in the API documentation is misleading. Is there a way to make initV behave as you described in the API documentation when scrolling one record at a time?

initV
Type: Integer
Index of first row displayed in the unfrozen viewport.

[paramvir]

There is undocumented method getViewPortIndx which returns consistent value of initV, finalV, initH, finalH.

Code: [Select]

var obj = grid.getViewPortIndx(),
   initV = obj.initV,
   finalV = obj.finalV;


[TeeJT]

Thank you very much for this undocumented method!
It now works well.