Navigation bar not working

[Eduardo]

Hello,

We've found out browsers cannot handle more than about 4,000 rows, so we are enabling server pagination. We have the following configuration:

01.var newDs = new kendo.data.DataSource({
02.    transport: {
03.        // read: gridLoadCall
04.        read: function (options) {
05.            gridLoadCall += "&page=" + options.data.page + "&pageSize=" + options.data.pageSize
06.            $.ajax({
07.                url: gridLoadCall,
08.                datatType: "json",
09.                success: function (result) {
10.                    options.success(result);
11.                },
12.                error: function (result) {
13.                    options.error(result);
14.                }
15.            });
16.        },
17.    },
18.    update: function (e) { return true; },
19.    serverPaging: true,
20.    pageSize: 4000,
21.    serverSorting: true,
22.    schema: {
23.        total: function (response) {
24.            console.log("total: " + 165502);
25.            return 16502;
26.        },
27.        model: {
28.            ...

(The total number of records is hardcoded because we are testing at this stage and we know the result set size beforehand).

The first page of data is displayed correctly, and the navigation bar is displayed, but empty. That is, on page 0, with no page buttons, back/forward buttons are not responding, and the message "No records" is displayed.

Any help, very welcomed.

Edo.

[Tsvetina]

Hello Edo,

I do not see an obvious reason for the problem in your code snippet. If I understand correctly, it is the Grid pager that does not get correctly populated with paging UI and correct labels. If the records returned from the remote point are indeed 4000 on initial read, then the pager should get correctly populated.

Can you also show us the Grid definition, so we can check for any errors there? Additionally, check for any JavaScript errors in the browser console, even though, these would rather result in the Grid not showing at all.
It would be best if you could reproduce the problem in a Dojo and paste the link here, so I can debug the problem on my side.

Regards,
Tsvetina
Progress Telerik

[Eduardo]

Tsvetina,

Thank you for your answer.

$("#periodGrid").kendoGrid({

 

    toolbar: ["excel"],

    excel: {

        fileName: "export.xlsx",

    },

 

    columnMenu: false,

 

    dataSource: {

        transport: {

            read: 'localhost:8088/displayData?periodo=XXX',

        },

     

        update: function (e) { return true; },

 

        serverPaging: true,

        pageSize: 4000,

        serverSorting: true,

 

        schema: {

            total: function (response) {

                return 0;

            },

            model: {

                id: "cab_id",

                fields: {

                    cab_id: { type: "number", },

                    line_id: { type: "number", },

                    programa: { type: "string", },

                    temporada: { type: "string", },

                    capitulo: { type: "string", },

                    cuenta: { type: "number", },

                    cuenta_descripcion: { type: "string", },

                    area: { type: "string", },

                    centro_costo: { type: "string", },

                    centro_costo_descripcion: { type: "string", },

                    glosa: { type: "string", },

 

                    col01: { type: "number", },

                    col02: { type: "number", },

                    col03: { type: "number", },

                    col04: { type: "number", },

                    col05: { type: "number", },

                    col06: { type: "number", },

                    col07: { type: "number", },

                    col08: { type: "number", },

                    col09: { type: "number", },

                    col10: { type: "number", },

                    col11: { type: "number", },

                    col12: { type: "number", },

                    col13: { type: "number", },

                    col14: { type: "number", },

                    col15: { type: "number", },

                    col16: { type: "number", },

                    col17: { type: "number", },

                    col18: { type: "number", },

                    col19: { type: "number", },

                    col20: { type: "number", },

                    col21: { type: "number", },

                    col22: { type: "number", },

                    col23: { type: "number", },

                    col24: { type: "number", },

                    col25: { type: "number", },

                    col26: { type: "number", },

                    col27: { type: "number", },

                    col28: { type: "number", },

                    col29: { type: "number", },

                    col30: { type: "number", },

                    col31: { type: "number", },

                    col32: { type: "number", },

                    col33: { type: "number", },

                    col34: { type: "number", },

                    col35: { type: "number", },

                    col36: { type: "number", },

                    total: { type: "number", },

                }

            }

        },

        // end of schema

    }, // end of DS

    groupable: true,

    pageable: true,

    selectable: 'row',

    columns: [

        /*

        { field: "cab_id", width: "60px", },

        { field: "line_id", width: "60px", },

        */

        { field: "area", width: "120px", title: "Área", },

        { field: "programa", width: "220px", title: "Prgm.", },

        { field: "temporada", width: "70px", title: "Temp.", },

        { field: "capitulo", width: "70px", title: "Cap.", },

        { field: "cuenta", width: "90px", title: "Cta.", },

        { field: "cuenta_descripcion", width: "150px", title: "Descripción Cuenta", template: '<div style="font-size: 9pt; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">#= cuenta_descripcion #</div>', },

        { field: "centro_costo", width: "50px", title: "CC", },

        { field: "centro_costo_descripcion", width: "100px", title: "Centro Costo", template: '<div style="font-size: 9pt; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">#= centro_costo_descripcion #</div>', },

        { field: "glosa", width: "150px", title: "Glosa", },

 

        { field: "col01",

            width: "200px",

            format: "{0:n0}",

            template: '<div style="text-align: right; background-color: #=columnColor(\'col01\')#">#=kendo.toString(col01, "n0")#</div>',

            aggregates: ["sum"],

            groupFooterTemplate: '<div style="text-align: right; background-color: #=columnColor(\'col01\')#"><span style="font-weight: normal;">#=groupRowName(data.col01)#:</span> #=kendo.toString(sum, "n0")#</div>',

            footerTemplate: '<div style="text-align: right; background-color: #=columnColor(\'col01\')#">#=kendo.toString(sum, "n0")#</div>', },

        { field: "col02",

            width: "100px",

            format: "{0:n0}",

            template: '<div style="text-align: right; background-color: #=columnColor(\'col02\')#">#=kendo.toString(col02, "n0")#</div>',

            aggregates: ["sum"],

            groupFooterTemplate: '<div style="text-align: right; background-color: #=columnColor(\'col02\')#">#=kendo.toString(sum, "n0")#</div>',

            footerTemplate: '<div style="text-align: right; background-color: #=columnColor(\'col02\')#">#=kendo.toString(sum, "n0")#</div>', },

        { field: "col03",

            width: "100px",

            format: "{0:n0}",

            template: '<div style="text-align: right; background-color: #=columnColor(\'col03\')#">#=kendo.toString(col03, "n0")#</div>',

            aggregates: ["sum"],

            groupFooterTemplate: '<div style="text-align: right; background-color: #=columnColor(\'col03\')#">#=kendo.toString(sum, "n0")#</div>',

            footerTemplate: '<div style="text-align: right; background-color: #=columnColor(\'col03\')#">#=kendo.toString(sum, "n0")#</div>', },

 

 //.... The same for the rest of the columns 

        { field: "col036",
             width: "100px",

            format: "{0:n0}",

            template: '<div style="text-align: right; background-color: #=columnColor(\'col36\')#">#=kendo.toString(col36, "n0")#</div>',

            aggregates: ["sum"],

            groupFooterTemplate: '<div style="text-align: right; background-color: #=columnColor(\'col36\')#">#=kendo.toString(sum, "n0")#</div>',

            footerTemplate: '<div style="text-align: right; background-color: #=columnColor(\'col36\')#">#=kendo.toString(sum, "n0")#</div>', },

        { field: "total",

            title: "Total",

            width: "100px",

            format: "{0:n0}",

            template: '<div style="text-align: right;">#=kendo.toString(total, "n0")#</div>',

            aggregates: ["sum"],

            groupFooterTemplate: '<div style="text-align: right;">#=kendo.toString(sum, "n0")#</div>',

            footerTemplate: '<div style="text-align: right;">#=kendo.toString(sum, "n0")#</div>', },

    ],

    resizable: true,

    dataBound: function (e) {

        // Set total row label

        $('.k-footer-template td:nth-child(15)').text("Total General");

    },

    excelExport: function (e) {

        console.log("Export starting...");

        var rows = e.workbook.sheets[0].rows;

 

        for (var ri = 0; ri < rows.length; ri++) {

            var row = rows[ri];

            if (row.type == "group-footer" || row.type == "footer") {

                for (var ci = 0; ci < row.cells.length; ci++) {

                    var cell = row.cells[ci];

                    if (cell.value) {

                        // console.log("DATA: " + cell.value);

                        cell.value = $(cell.value).text();

                        // console.log("DATA: " + cell.value);

                        cell.hAlign = 'right';

                    }

                }

            }

            if (row.type == "header")

            {

                for (var ci = 0; ci < row.cells.length; ci++) {

                    var cell = row.cells[ci];

                    if ((typeof cell.value != 'undefined') && cell.value.startsWith("col")) {

                        console.log("DATA: " + cell.value);

                        cell.value = colName[cell.value];

                        console.log("DATA: " + cell.value);

                    }

                }

            }

        }

    },

});

 

There are no errors in the JavaScript console.

I don't know how to reproduce the error in Dojo, because I don't know of a way produce the massive amount of info handled in this situation.

Cheers.

Edo.

[Tsvetina]

Hi Eduardo,

In the last code snippet, your total function returns a 0 value. Can you confirm that this is not the case in your app, because a total of 0 would result in no paging in the Grid. Additionally, you say that you are unable to reproduce the issue in a Dojo because you cannot produce such a large amount of data. Does this mean that the problem is only observable when you load the large page size? Have you tried binding the same Grid to a smaller subset, e.g. 100 items and is the problem with the pager still there?

Regards,
Tsvetina
Progress Telerik

[Eduardo]

Tsvetina,

Effectively, the function in the default Grid Datasource returns 0, but this Datasource is replaced with the definition in the first snippet upon user interaction with the web page. Anyways, we tried returning the total number of records, a smaller number, and removing the definition altogether, and in every case the result is the same.

With a smaller dataset I get the same results We tried pageSize: 10 and total: 200.

Just to make sure: The server has to return only the current page, right?

Running out of ideas,

Edo.

[Eduardo]

Tsvetina,

We removed the field aggregates, groupFooterTemplate, and footerTemplate and it's working.

Please advice on how to handle these in this scenario (server pagination).

Thank you,

Edo,

[Eduardo]

Tsvetina,

We removed the aggregates, groupFooterTemplate, and footerTemplate from the Grid field properties and now it's working?

Please advice on how to handle these properties in this scenario (server pagination).

Thank you.

Edo.

[Tsvetina]

Hello Eduardo,

When you combine server paging with other client operations, the client operations are performed only on the current page of data returned from the server. That is why, it is advised to have either all operations performed on the client, or all operations performed on the server. 

So, if you want to have grouping and aggregates together with server paging, you should also enable serveGrouping and serverAggregates and add the needed logic on the server to return grouped data and aggregates. 

Regards,
Tsvetina
Progress Telerik

[Eduardo]

Tsvetina,

Thank you. We'll follow your directions.

Best regards,

Edo.