How to load data in current page with React

3 posts, 1 answers
  1. Raef
    Raef avatar
    6 posts
    Member since:
    May 2020

    Posted 05 May 2020 Link to this post

    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;

     

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 05 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Raef
    Raef avatar
    6 posts
    Member since:
    May 2020

    Posted 05 May 2020 in reply to Stefan Link to this post

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

    Thank you Stefan.

Back to Top