This is a migrated thread and some comments may be shown as answers.

kendo grid 'data-pageable' attribute not splitting pages

1 Answer 114 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 08 Nov 2016, 06:08 PM
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>


1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 09 Nov 2016, 02:04 PM
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.
Tags
Grid
Asked by
Tom
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or