We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid pagination

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)

Datagrid_Question.png


3 Replies 1 reply marked as answer

JC Joseph Christ Nithin Issack Syncfusion Team October 13, 2022 03:50 PM UTC

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: 4pageSizes: 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.


Marked as answer

CK Csatai Krisztián October 18, 2022 12:18 PM UTC

Hi Joseph!


Thank you very much! It works fine! 


Thanks,

Krisztian Csatai 



SG Suganya Gopinath Syncfusion Team October 19, 2022 08:33 AM UTC

Hi Krisztian Csatai, 

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

Regards, 

Suganya Gopinath.


Loader.
Live Chat Icon For mobile
Up arrow icon