grid not supporting more than 12 records when using pagercomponent

[Venkatesh Babu S N]

hi,

in batch edit mode grid is not supporting more than 12 records.

i am ussing PagerComponent and the initial pagesize is 10. when i change the pagesize to 20, grid displaying only 12 records even if i have 20 records in data.

please help to fix this issue.

below is my gridcomponent code.

<GridComponent

dataSource={this.state.data}

allowSorting={false}

allowMultiSorting={false}

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

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

allowReordering={true}

allowResizing={true}

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

allowSelection={true}

editSettings={this.editOptions}

selectionSettings={this.settings}

allowPaging={true}

cellEdit={this.cellEdit}

beginEdit={this.beginEdit}

beforeBatchAdd={this.beforeBatchAdd}

rowSelected={this.rowSelected}

contextMenuItems={this.contextMenuItems}

contextMenuClick={this.contextMenuClick}

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

queryCellInfo={this.customizeCell}>

<Injectservices={[Edit,Page,Toolbar,Sort,Reorder,Resize,ContextMenu]}/>

GridComponent>

<PagerComponentpageSizes={[10,20,50]}pageSize={this.state.dataPageSize}totalRecordsCount={this.props.totalFilteredRecords}click={this.pageClick}/>

[Rajapandiyan Settu]

Hi Venkatesh, 

Thanks for contacting Syncfusion support. 

By analyzing your code example, we found that you have rendered separate pager component in UI and trying to affect the Grid when changes made in pager component. Before proceeding with your query we would like to share the behavior of EJ2 Grid. 

The EJ2 Grid will be rendered with default pager when we enable the allowPaging as true in the Grid. To use Pager feature, we need to inject the pager Module in Grid. 

allowPaging: https://ej2.syncfusion.com/react/documentation/api/grid#allowpaging 

By using the pageSize property of Grid’s pageSettings, you can define the number of records per page in the Grid. Its default value is 12. 

pageSize: https://ej2.syncfusion.com/react/documentation/api/grid/pageSettings/#pagesize 

[index.js] 

export class ContextMenuSample extends SampleBase { 

  constructor() { 

    super(...arguments); 

    ---- 

    this.pageSettings = { pageSize: 20 }; // define the pageSize as you want 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent 

            dataSource={this.state.data}- 

            allowPaging={true} 

            pageSettings={this.pageSettings} 

            ----- 

          > 

            <Inject 

              services={[ 

                --- 

                Page, 

              ]} 

            /> 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

} 

 

Sample: https://stackblitz.com/edit/react-4x41bw-esnfyg?file=index.js 

If you want to render your own pager control in Grid, then we suggest you to use pagerTemplate feature in Grid. Refer to the below documentation for more information. 

pagerTemplate: https://ej2.syncfusion.com/react/documentation/grid/paging/#template 

When you using custom pager component, you can dynamically change the pageSize of Grid by programmatic way. 

// get the grid instances and change the pageSize of the Grid 

this.grid.pageSettings.pageSize = 15 ;  

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S