kendo grid 'data-pageable' attribute not splitting pages

2 posts, 0 answers
  1. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2013

    Posted 08 Nov Link to this post

    I have a kendo grid which I bind to a kendo.obervable view model.
    The grid (shown below) has the attribute 
    `data-pageable='{ "pageSize": 10 }'`

    This is not working, all records (2000 or so) are on the first page.
    I have other kendo grids in my application with almost the same structure, and paging works (I've shown an example of a page whose paging works on the bottom)


    Here is the grid that is not working (no paging):

        <div id="PatrolRecords">
            <div data-filterable='{ "mode": "row" }'
                 data-role='grid'
                 data-sortable='true'
                 data-detail-template='patrolDetailTemplate'
                 data-detail-init='detailInit'
                 data-bind='source: reportData, events: {excelExport: excelExportHandler}'
                 data-pageable='{ "pageSize": 10 }'
                 data-toolbar='["excel"]'
                 data-excel='{ "fileName": "Patrols.xlsx", "allPages": "true" }'
                 data-columns='[
                     {
                            field: "patrol_id_plain",
                            title: "Patrol ID",
                            filterable: false,
                            width: 70
                        },
                        {
                            field: "tour_name",
                            title: "Tour",
                            filterable: { cell: { operator: "contains" } }
                        },
                        {
                            field: "location_name",
                            title: "Location",
                            filterable: { cell: { operator: "contains" } }
                        },
                        {
                            field: "client_company",
                            title: "Company",
                            filterable: { cell: { operator: "contains" } }
                        },
                        {
                            field: "address",
                            title: "Address",
                            template: kendo.template($("#addressTemplate").html()),
                            filterable: { cell: { operator: "contains" } }
                        },
                        {
                            field: "end_date_seconds",
                            title: "Date & Time",
                            template: kendo.template($("#dateTemplate").html()),
                            filterable: false
                        },
                        {
                            field: "patrolled_by",
                            title: "Patrolled By",
                            filterable: { cell: { operator: "contains" } }
                        },
                        {
                            field: "checkpoints",
                            title: "Checkpoints",
                            template: kendo.template($("#checkpointsTemplate").html()),
                            filterable: false,
                            width: 90
                        },
                        {
                            field: "incident_count",
                            title: "Incidents",
                            filterable: false,
                            width: 70
                        },
                        {
                            title: "GPS",
                            template: kendo.template($("#gpsTemplate").html()),
                            filterable: false,
                            width: 50
                        },
                        {
                            title: "",
                            template: kendo.template($("#viewLinkTemplate").html()),
                            filterable: false,
                            width: 60
                        },
                ]'>
            </div>
        </div>
        
        <script type="text/x-kendo-template" id="dateTemplate">
            ${end_date}
        </script>
        
        <script type="text/x-kendo-template" id="patrolDetailTemplate">
            <div class="container">
            </div>
        </script>
        
        <script type="text/x-kendo-template" id="viewLinkTemplate">
            <a href="/patrol/patrol.aspx?r=1&p=${patrol_id}" target="_blank">View</a>
        </script>
        
        <script type="text/x-kendo-template" id="gpsTemplate">
            # if((longitude && latitude) || Number(checkpoint_gps_count) > 0) { #
                <a href="\\#" onclick="javascript: OpenWindow('/patrol/gpsmap.aspx?p=${patrol_id}', 'gps_map', 750, 550); return false;"><img style="border:0px;" src="/images/icons/gps.gif"></a>
            # } else { #
                -   
            # } #
        </script>
        
        <script type="text/x-kendo-template" id="checkpointsTemplate">
            # if(incident_only == "1") { #
                -
            # } else { #
                ${completed_checkpoint_count} of ${total_checkpoint_count}
            # } #
        </script>
        
        <script type="text/x-kendo-template" id="addressTemplate">
            # if(address) { #
                # address = address.trim(); #
                ${address}<br/>
            # } #
            # if(city) { #
                # city = city.trim(); #
                ${city},&nbsp;
            # } #
            # if(abbreviation) { #
                # abbreviation = abbreviation.trim(); #
                ${abbreviation}
            # } #
        </script>
        
        
        <script type="text/x-kendo-template" id="patrolUserTemplate">
            # if(first_name) { #
                # first_name = first_name.trim(); #
                ${first_name}
            # } #
                # if(last_name) { #
                # last_name = last_name.trim(); #
                ${last_name}
            # } #
        </script>
        
        <script type="text/x-kendo-template" id="geotagTemplate">
            # if(barcode) { #
            # if(barcode_scanned == "1") { #
            <span style="color:\\#009900;">Scanned</span>
            # } else if(barcode_required == "1") { #
            <span style="color:\\#FF0000;">Not scanned - Overridden</span>
            # } else { #
            <span style="color:\\#FF0000;">Not scanned</span>
            # } #
            # } else { #
            N/A
            # } #
        </script>
        
        
        <script type="text/x-kendo-template" id="geofenceTemplate">
            # if(geofence_enabled == "1") { #
                # if(!latitude || !longitude) { #
                    <span style="color:\\#FF0000;">No GPS</span>
                # } else if(Number(geofence_distance) > Number(geofence_radius)) { #
                    <span style="color:\\#FF0000;">Outside (${geofence_distance}  feet from center)</span>
                # } else { #
                    <span style="color:\\#009900;">Inside (${geofence_distance} feet from center)</span>
                # } #
                # } else { #
                N/A
            # } #
        </script>
        
        <script type="text/x-kendo-template" id="completedTemplate">
            # if(completed_date) { #
                ${completed_date}
            # } else { #
                <span style="color:\\#FF0000;">Not Completed</span>
            # } #
        </script>
        
        <script type="text/x-kendo-template" id="gpsTemplateCheckpoint">
            # if(latitude && longitude){ #
                <a href="\\#" onclick="javascript: OpenWindow('/patrol/gpsmap.aspx?ptc=${ptc_id}', 'gps_map', 750, 550); return false;"><img style="border:0px;" src="/images/icons/gps.gif"></a>
            # } else { #
                N/A
            # } #
        </script>
        
        <script type="text/x-kendo-template" id="patrolledByTemplate">
            # if(!first_name && !last_name) { #
                n/a
            # } else { #
                # if(first_name) { #
                    # first_name = first_name.trim(); #
                    ${first_name}&nbsp;
                # } #
                # if(last_name) { #
                    # last_name = last_name.trim(); #
                    ${last_name}
                # } #
            # } #
        </script>
        
        <script type="text/javascript">
        
            function createLocationDropdownlist(args) {
                createDropdownlistFilter(args, viewModel.reportData.PatrolDurations, "location_name");
            }
        
            function detailInit(e) {
                e.detailRow.find(".container").kendoGrid({
                    dataSource: e.data.CheckpointRecord,
                    columns: [
                        {
                            field: "checkpoint_name",
                            title: "Checkpoint"
                        },
                        {
                            field: "patrolled_by",
                            title: "Patrolled By"
                        },
                        {
                            field: "geotag",
                            title: "GeoTag",
                            template: kendo.template($("#geotagTemplate").html())
                        },
                        {
                            field: "geofence",
                            title: "GeoFence",
                            template: kendo.template($("#geofenceTemplate").html())
                        },
                        {
                            field: "completed_date",
                            title: "Completed",
                            template: kendo.template($("#completedTemplate").html())
                        },
                        {
                            field: "gps",
                            title: "GPS",
                            template: kendo.template($("#gpsTemplateCheckpoint").html())
                        }
                    ]
                });
            }
        
        </script>






    And here is the similar grid on a different page that is working (10 records per page)

        <div id="CustomFormLocationRecords">
            <div data-filterable='{ "mode": "row" }'
                 data-role='grid'
                 data-sortable='true'
                 data-detail-template='locationDetailTemplate'
                 data-detail-init='detailInit'
                 data-bind='source: reportData.CustomFormPerLocation, events: {excelExport: excelExportHandler}'
                 data-pageable='{ "pageSize": 10 }'
                 data-toolbar='["excel"]'
                 data-excel='{ "fileName": "CustomFormPerLocation.xlsx", "allPages": "true" }'
                 data-columns='[
                    {
                        "field": "location_name",
                        "title": "Location",
                        "filterable": {
                            cell: {
                                template: createLocationDropdownlist,
                                showOperators: false
                            }
                        }
                    },
                    {
                        "field": "client_name",
                        "title": "Client",
                        "filterable": false
                    },
                    {
                        "field": "patrol_count",
                        "title": "Patrols",
                        "filterable": false
                    },
                    {
                        "field": "form_count",
                        "title": "Forms",
                        "filterable": false
                    }
                ]'>
            </div>
        </div>
        
        <script type="text/x-kendo-template" id="locationDetailTemplate">
            <div class="container">
            </div>
        </script>
        
        <script type="text/x-kendo-template" id="patrolUserTemplate">
            # if(first_name) { #
                # first_name = first_name.trim(); #
                ${first_name}
            # } #
            # if(last_name) { #
                # last_name = last_name.trim(); #
                ${last_name}
            # } #
        </script>
        
        <script type="text/x-kendo-template" id="viewFormLinkTemplate">
            <a href="/forms/formsubmission.aspx?r=1&ptc=${ptc_id}" target="_blank">View Form</a>
        </script>
        
        <script type="text/x-kendo-template" id="viewPatrolLinkTemplate">
            <a href="/patrol/patrol.aspx?r=1&p=${patrol_id}" target="_blank">View Patrol</a>
        </script>
        
        <script type="text/javascript">
        
            function createLocationDropdownlist(args) {
                createDropdownlistFilter(args, viewModel.reportData.CustomFormPerLocation, "location_name");
            }
        
            function detailInit(e) {
                e.detailRow.find(".container").kendoGrid({
                    dataSource: e.data.CustomFormRecord,
                    columns: [
                        {
                            field: "form_name",
                            title: "Form"
                        },
                        {
                            field: "completed_date",
                            title: "Date"
                        },
                        {
                            field: "patrol_user",
                            title: "Patrolled By",
                            template: kendo.template($("#patrolUserTemplate").html()),
                            filterable: { cell: { operator: "contains" } }
                        },
                        {
                            title: "",
                            template: kendo.template($("#viewFormLinkTemplate").html()),
                            filterable: false,
                            width: 90
                        },
                        {
                            title: "",
                            template: kendo.template($("#viewPatrolLinkTemplate").html()),
                            filterable: false,
                            width: 90
                        }
                    ]
                });
            }
        
        </script>


  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 09 Nov Link to this post

    H Tom,

    The pageable.pageSize Grid option is ignored when an existing Kendo UI DataSource instance is passed to the Grid, and the dataSource.pageSize option should be used instead:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pageable

    Furthermore, when the dataSource.pageSize option is configured, there will be no need to configure Grid's pageable.pageSize option, so you can safely configure the pageSize in the dataSource config in all cases.

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
  3. Kendo UI is VS 2017 Ready
Back to Top