navigate to specific page

[Tingting]

Hi,

I have this data grid which has about 100 records, on each page I have 12 records. I would like to show the second page instead of the first page.

I tried to use dataBound event, but it's not working.

function setInitPage() {

      if (gridRef.current !== null) {

        gridRef.current.goToPage(2);

      }

   }

[Rajapandi Ravi]

Hi Tingting,

Greetings from Syncfusion support

Based on your query we have prepared a sample and tried to reproduce the reported problem, but it was working fine at our end. Please refer the below code example and sample for more information.

 

function Home() {

  const dataBound = () => {

    var grid = document.getElementById('Grid').ej2_instances[0];

    grid.goToPage(2);

  }

  return (

    <div>

      {' '}

      <p>Grid-1 using Functional Components</p>

      <GridComponent id="Grid" dataSource={data} dataBound={dataBound} allowPaging={true} editSettings={editSettings}>

              <Inject services={[Page]} />

      </GridComponent>

    </div>

  );

}

 

Sample: https://stackblitz.com/edit/react-t64b7e-ejcsnb?file=index.js

Regards,

Rajapandi R

[Tingting]

Thank you for the reply. I have checked your solution, however, the paging function is not working any more.

For example, if you click page 3 or 4, it will always go to page 2. I would like to go to page 2 first, but user can go to other page afterwards.

thanks.

[Rajapandi Ravi]

Hi Tingting,

Thanks for your update

We have checked your shared information and we could see that you are facing the problem with paging. So, we suggest you use the created event to resolve the problem instead of using dataBound event of Grid. Please refer the below code example and sample for more information.

 

function Home() {

  const created = () => {

    var grid = document.getElementById('Grid').ej2_instances[0];

    grid.goToPage(2);

  };

  return (

    <div>

      {' '}

      <p>Grid-1 using Functional Components</p>

      <GridComponent

        id="Grid"

        dataSource={data}

        created={created}

        allowPaging={true}

        editSettings={editSettings}

      >

        <Inject services={[Page]} />

      </GridComponent>

    </div>

  );

}

 

Sample: https://stackblitz.com/edit/react-t64b7e-2dfhmk?file=index.js

API: https://ej2.syncfusion.com/react/documentation/api/grid/#created

Regards,

Rajapandi R