Question

我有一个kendo网格，我绑定到一个kendo.obervable视图模型。网格（如下所示）具有属性 data-pageable='{ "pageSize": 10 }'

这不起作用，所有记录（2000左右）都在第一页上。我的应用程序中有其他kendo网格具有几乎相同的结构，并且分页工作（我已经显示了一个页面的示例，其页面的分页工作在底部）

这是不工作的网格（没有分页）：

<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>

以下是不同页面上的类似网格（每页10条记录）

<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>

Answer 1

事实证明，应该在数据源上设置pagesize选项（当它传递给网格时）而不是声明性网格初始化。

viewModel = kendo.observable({
                reportData: new kendo.data.DataSource({
                    data: results.Patrols,
                    schema: {
                        model: {
                            fields: {
                                incident_count: { type: "number" },
                                end_date_seconds: { type: "number" },
                                patrol_id_plain: { type: "number" }
                        }
                    }
                },
                pageSize: 10
            })    
        });

kendo grid'data-pageable'属性不将记录拆分成页面

1 个答案: