How to load data in current page with React

[Raef]

Hello

I have a grid with many records in my DB. I want to only request the data that will be displayed on the selected page.
Ex. If I navigate to page 5 with a pageSize of 20, I will skip the first 80 records and receive the next 20.
This is working so far, but my issue is that when I receive those 20 records of data ; page 5 will show up empty since the data will only be displayed on page 1.

If i load all the data without splitting them, the program will crash.

I found a solution for angular, jquery (using serverPaging) but not with React.
What can I do to display my data on the specific page I'm on (in React), and basically ignore all the other pages when I'm not visiting them?

Thank you

this is my source code :

import { Grid, GridColumn } from '@progress/kendo-react-grid';
import React from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";
import { filterBy } from '@progress/kendo-data-query';
class GridDocInput extends React.Component {
// c'est valeur sont a gardé uniquement dans le dev
terminalId = window.SERVER_DATA.terminalid;
functionId = window.SERVER_DATA.functionid;
hostname = window.SERVER_DATA.hostname;
funct = window.SERVER_DATA.funct;
// Let's our app know we're ready to render the data
componentDidMount() {
this.getPosts();
}

    state = {
        filter: {
            logic: "and",
            filters: []
        },
        skip: 0,
        take: 25,
        pageNumber: 1,
        posts: [],
        total_record: 10000
    };

    pageChange = (event) => {
        this.setState({
            skip: event.page.skip,
            take: event.page.take,
            pageNumber: (event.page.skip + event.page.take) / 25
        },()=>{this.getPosts();});
    }
    render() {
        return (
            <div>

                <Grid
                    style={{ height: '100%' }}
                    data={filterBy(this.state.posts,this.state.filter).slice(this.state.skip, this.state.take + this.state.skip)}
                    skip={this.state.skip}
                    take={this.state.take}
                    total={this.state.total_record}
                    onPageChange={this.pageChange}
                    pageable
                    filterable
                    sortable
                    filter={this.state.filter}
                    onFilterChange={(e) => {
                        this.setState({
                            filter: e.filter
                        });
                    }}
                >
                    <GridColumn field="item_no" title="Code article"/>
                    <GridColumn field="description1" title="Description" />
                    <GridColumn field="uom_code" title="UOM code"/>
                    <GridColumn field="vendor_code" title="Code vendeur" />
                </Grid>
            </div >
        );
    }
    getPosts() {
        axios
          // This is where the data is hosted
          .post(

              this.hostname+`in/ui/xitem.p?terminalid=` +
              this.terminalId +
              "&Funct=" + this.funct +
              "&FunctionID=" + this.functionId +
              "&pageSize=25" +
              "&skip=" + this.state.skip +
              "&take=" + this.state.take +
              "&page=" + this.state.pageNumber +"&lastRecord=false"
          )
          // Once we get a response and store data, let's change the loading state
          .then(response => {
            this.setState({
              posts: response.data.ProDataSet.tt_item,
              total_record: response.data.ProDataSet.tt_Misc[0].total_record,
              isLoading: false
            });
          })
          // If we catch any errors connecting, let's update accordingly
          .catch(error => this.setState({ error, isLoading: false }));

          console.log("url: ", this.hostname+`in/ui/xitem.p?terminalid=` +
          this.terminalId +
          "&FunctionID=" +
          this.functionId +
          "&pageSize=25" +
          "&skip=" + this.state.skip +
          "&take=" + this.state.take +
          "&page=" + this.state.pageNumber
          );
      }

}
export default GridDocInput;

 

[Stefan]

Hello, Raef,

Thank you for the code.

I assume that the issue occurs because the data is processed twice. Once we make a request to the server using the take and skip, and then we use them again to slice the data.

What I can suggest is to use the skip and take parameters to make a request to the server then directly pass the data returned from the server without further modifications (or only filtering if the filtering will be on the client, but we recommend all to be on the server).

This can be observed in our oData server operations demo:

https://www.telerik.com/kendo-react-ui/components/grid/data-operations/odata-server-operations/

We also have a demo with ASP.NET Core server and server operations:

https://github.com/telerik/kendo-react-demo-aspnetcore-data/tree/master

I hope this proves helpful.

Regards,
Stefan
Progress Telerik

[Raef]

That's work like a magic , my issue was getting data twice as you mention to me in your answer.

Thank you Stefan.