kendo grid 'data-pageable' attribute not splitting pages

[Tom]

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>

[Dimiter Topalov]

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