Grid pagination

[Krisztián Csatai]

I would like to use Grid component with pagination, but I have a question. Can I use with two pagination bar ?

I would like to place pagination top and bottom of the grid. Is there any solution for this ?

(Like in the picture)

[Joseph Christ Nithin Issack]

Hi Csatai,

  Greetings from Syncfusion support.

   Based on your requirement, you want to render the pager component both at the top and bottom of the grid. We have prepared a sample in which we have rendered pager component at the top and bottom of the grid.

Please refer the below code example.

 

gridInstance;

  pagerInstance;

  dataBound() {

    if (this.pagerInstance && this.gridInstance) {

      // assign grid pager values to the top pager values.

      this.pagerInstance.totalRecordsCount =

        this.gridInstance.pagerModule.pagerObj.totalRecordsCount;

      this.pagerInstance.pageCount = this.gridInstance.pageSettings.pageCount;

      this.pagerInstance.pageSizes = this.gridInstance.pageSettings.pageSizes;

      this.pagerInstance.pageSize = this.gridInstance.pageSettings.pageSize;

      this.pagerInstance.currentPage =

        this.gridInstance.pageSettings.currentPage;

      this.pagerInstance.refresh();

    }

  }

  click(args) {

    // change the page based on the top pager click.

    this.gridInstance.goToPage(args.currentPage);

  }

  dropDownChanged(args) {

    // change the page size in the girds pager based on the value in the top pager.

    this.gridInstance.pageSettings.pageSize = args.pageSize;

  }

  render() {

    return (

      <div className="control-pane">

        <div className="control-section">

          <PagerComponent

            ref={(pager) => (this.pagerInstance = pager)}

            click={this.click.bind(this)}

            dropDownChanged={this.dropDownChanged.bind(this)}

          ></PagerComponent>

          <GridComponent

            ref={(grid) => (this.gridInstance = grid)}

            dataSource={data}

            locale="en-US"

            allowPaging={true}

            height={365}

            pageSettings={{ pageCount: 4, pageSizes: true }}

            dataBound={this.dataBound.bind(this)}

          >

            <ColumnsDirective>

              <ColumnDirective

                field="OrderID"

                headerText="Order ID"

                width="120"

                textAlign="Right"

              ></ColumnDirective>

              <ColumnDirective

                field="CustomerName"

                headerText="Customer Name"

                width="150"

              ></ColumnDirective>

              <ColumnDirective

                field="OrderDate"

                headerText="Order Date"

                width="130"

                format="yMd"

                textAlign="Right"

              />

              <ColumnDirective

                field="Freight"

                headerText="Freight"

                width="120"

                format="C2"

                textAlign="Right"

              />

              <ColumnDirective

                field="ShipCountry"

                headerText="Ship Country"

                width="170"

              ></ColumnDirective>

            </ColumnsDirective>

            <Inject services={[Page]} />

          </GridComponent>

        </div>

      </div>

    );

  }

 

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

Please get back to us for further details.

Regards,

Joseph I.

[Krisztián Csatai]

Hi Joseph!

Thank you very much! It works fine! 

Thanks,

Krisztian Csatai 

[Suganya Gopinath]

Hi Krisztian Csatai, 

We are glad that the provided solution worked. Please contact us if you any issues in future. 

Regards, 

Suganya Gopinath.