Paging does not work

We use React and Kendo:

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

      

        
        
        
      

    

tries to get the rendered grid. Data is loaded from reducers and entered into a state. It componentWillMount

sets the state to am on the gridOptions state. during the render function, we get the parameters and add the data rows and columns to the data source.

We can get it to display data, to format the columns, we can get the paging icons at the bottom, but it will say no items to display

.

The API call returns 50 results, if we remove the page size all 50 will be displayed.

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