How to render current row count

[Ryosei Yawata]

Hello,

I just want to display current row count on top of the grid component.
What I tried is as follow:

1 declare currentRowCount in this.state.
2. I get row count by using this.grid.getCurrentViewRecords().length in actionComplete method.

3. call setState in actionComplete, but it seems that filteringSetting initialized after calling setState.

Current row count can be displayed after that.but filteringSetting is initialized.For example, unchecked box become checked again after calling setState.
Could you tell me the solution?

[Manivel Sellamuthu]

Hi Ryosei, 

Greetings from Syncfusion support. 

We suggest you to use the dataBound event of the Grid component to achieve your requirement. 

Please share the complete Grid to validate further if you still faced any issue. 

Regards, 

Manivel 

[Ryosei Yawata]

Hi Manivel,

Thank you for you replay.

I tried dataBound event, but filtering is initialized and display all record rows after calling setState in dataBound event(1).
Although filtered data display after I uncheck several checkbox and click Filter button again(2).

How many times I tried, (1) and (2) are repeated.

  dataBound = () => {

    if(this.grid){

      const currentRowCount = this.grid.getCurrentViewRecords().length;

      if(currentRowCount !== this.state.materialData.length){

        this.setState({ currentRowCount:currentRowCount });  

      }

    }

  }

[Manivel Sellamuthu]

Hi Ryosei, 

Thanks for your update. 

Could you please explain this query “but filtering is initialized and display all record rows after calling setState in dataBound event(1).Although filtered data display after I uncheck several checkbox and click Filter button again(2).” With the screenshot or complete code example to validate your query and provide the exact solution as soon as possible. 

Regards, 

Manivel 

[Ryosei Yawata]

Hi Manivel,

     

How many times I tried, (1) and (2) are repeated.

That is caused by my another wrong code to prevent from rerendering grid component.

I was able to display current record count, but automatically get all record count after refreshing grid component by calling setState in dataBound.

Is there any solution?

Best Regards, 

Ryosei

[Mohammed Farook J]

Hi Ryosei, 

 

We are unable to understand your requirement clearly. So please share the following information for the further proceeding 

 

1. Please share full Grid rendered code example.
2. Do you have applied any initial filter in Grid.
3. Do want to fetch only filtered all records or current view records only.

 

 

Regards, 

J Mohammed Farook  

[Ryosei Yawata]

Hi Ryosei, 

 

We are unable to understand your requirement clearly. So please share the following information for the further proceeding 

 

1. Please share full Grid rendered code example.
2. Do you have applied any initial filter in Grid.
3. Do want to fetch only filtered all records or current view records only.

 

 

Regards, 

J Mohammed Farook  

Hi Mohammed,

Please share full Grid rendered code example.
Please check my code as follow.

Do you have applied any initial filter in Grid.
yes.Refreshing grid does not happen after removing initial filter.But I need to use initial filter.

Do want to fetch only filtered all records or current view records only.

current view records only.I just want to display current view records count even after filtering records.

Best Regards,

<GridComponent

      height={'100%'}

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

      dataSource={this.state.materialData}

      allowSorting={true}

      allowFiltering={true}

      allowExcelExport={true}

      filterSettings={{

        type: 'Menu', 

        columns: [{

          field: '__enabled__', matchCase: false,

          operator: 'notequal', predicate: 'or', value: ''

        }]

      }}

      rowSelected={this.tableRowClicked}

      sortSettings={{ columns: [{ field: 'updated_at', direction: 'Descending' }] }}

      dataBound={this.dataBound}

    >

      <Inject services={[Sort, Filter, ExcelExport]} />

      <ColumnsDirective>

        <ColumnDirective field='material_id' isPrimaryKey={true} headerText='ID' width="130" />

        <ColumnDirective field='material_name' headerText='資材名' filter={{ type: 'CheckBox' }} width="200" />

        <ColumnDirective field='model_number' headerText='型式' filter={{ type: 'CheckBox' }} width="180" />

        <ColumnDirective field='category_name' headerText='カテゴリー' filter={{ type: 'CheckBox' }} width="200" />

        <ColumnDirective field='manufacturer_name' headerText='メーカー' width='150' filter={{ type: 'CheckBox' }} />

        <ColumnDirective field='ex_col1' headerText='保管場所' width='150' filter={{ type: 'CheckBox' }} />

        <ColumnDirective field='created_at' headerText='登録日' width="170" type="date" format={{ type: "dateTime", format: "yyyy/MM/dd HH:mm" }} />

        <ColumnDirective field='updated_at' headerText='更新日' width="170" type="date" format={{ type: "dateTime", format: "yyyy/MM/dd HH:mm" }} />

        <ColumnDirective field='__enabled__' headerText='使用中' width='120' filter={{ type: 'CheckBox' }} />

      </ColumnsDirective>

    </GridComponent >

[Manivel Sellamuthu]

Hi Ryosei, 

Thanks for sharing the details. 

From your query we can understand that Grid is re-rendered after changing the state value . 

By default, React components are automatically re-rendered based on the state value change. In this cause, Grid component is also forced to re-render.  please refer the below documentation link to prevent this behavior. 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/how-to/prevent-the-grid-refresh-in-react-state-change/#prevent-the-grid-refresh-in-react-state-change 

Please let us know if you need further assistance. 

Regards, 

Manivel 

[Ryosei Yawata]

Hi Manivel,

Thank you for the solution.

Regards,

Ryosei 

[Manivel Sellamuthu]

Hi Ryosei, 

Thanks for your update. 

We hope your requirement has been achieved. Please get back to us, if you need further assistance. 

Regards, 

Manivel