反应剑道网格客户端分页无法正常工作

Question

我们正在使用React和Kendo：

kendo-ui-core": "^2017.2.621
kendo-ui-react": "^0.14.2
react-kendo": "^0.13.11

尝试显示可分页的网格。数据从Reducer加载并进入状态。它在componentWillMount上设置了gridOptions状态。在render函数中，我们获取选项并将数据行和列添加到数据源。

我们可以让它显示数据，格式化列，我们可以让分页图标显示在底部，但会显示no items to display。

API调用将返回50个结果，如果我们删除页面大小，将显示所有50个结果。

import React, { Component } from "react";
import { withRouter, NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { getDataBookings } from "./actions";
import { Grid } from 'kendo-ui-react'

class DataBookings extends Component {

    componentWillMount(){

        this.state = {
            gridOptions: {

                toolbar: ["excel"],
                excel: {
                    fileName: "bookingsExport.xlsx"
                },

                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },

                scrollable: true,
                resizable: true,
                editable: false,

                //this will stop the data displaying
                // pageable: {
                //  pageSizes: [5,50,100,250],
                // },

                pageable: true,

                filterable: {
                    extra: false,
                    operators: {
                        string: {
                            startswith: "Starts with",
                            eq: "Is equal to",
                            neq: "Is not equal to",
                        },
                        Date: {
                            lt: "Less than",
                            gt: "Greater than"
                        },
                        number: {
                            eq: "Is equal to",
                            gt: "Greater than",
                            gte: "Greater than or equal to",
                            lt: "Less than",
                            lte: "Less than or equal to"
                        }
                    }
                },
                columns: [],

                dataSource: {   
                    // serverPaging: false,
                    // serverFiltering: false,
                    // serverSorting: false,
                    pageSize: 5,
                }   
            }
        }

        this.props.getDataBookings();
    }

    renderBookings = () => {

        const { isLoadingBookings, bookings } = this.props;
        const { gridOptions } = this.state;

        if(isLoadingBookings){
            return (<div>bookings loading....</div>);
        }

        if(bookings.total == 0){
            return (<div>no bookings found</div>);
        }

        gridOptions.columns = bookings.columns;
        gridOptions.dataSource.data = bookings.rows;

        //have also tried
        // gridOptions.dataSource.schema = {
        //  type: 'json',
        //  data: function(){
        //      return bookings.rows;
        //  },
        //  total: function(){
        //      return 1000;
        //  }
        // }

        // gridOptions.dataSource.page = 1;
        // gridOptions.dataSource.total = bookings.total;

        //and also tried
        // gridOptions.dataSource.schema = {
        //  data: bookings.rows,
        //  total: "Total"

        // }


        return (<Grid options={gridOptions}></Grid>);       
    }

    render(){
        const {paymentrequest} = this.props;

        return (
            <section>
                <h3>Bookings Information</h3>
                { this.renderBookings() }           
            </section>
        );
    }

}


const mapStateToProps = state => ({
    isLoadingBookings: state.dataBookings.getDataBookingsRequest.busy,
    bookings: state.dataBookings.bookings,
});

const mapDispatchToProps = dispatch => ({
  getDataBookings:() => dispatch(getDataBookings())
});

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(DataBookings)
);