Update toolbar item's text

[JP]

Hi,

I want to add a toolbar item which displays the current count of selected items.

Using a template (which accesses the state) did not work (won't update) , and currently I'm using a simple toolbar item and update the text using JQuery in the rowSelected/rowDeselected event and disable the buttn behavior using css.

Is there a more elegant way to do this?

Thanks!

[Dhivya Rajendran]

Hi Jp, 

Greetings from Syncfusion support. 

Query :   I want to add a toolbar item which displays the current count of selected items. 

We could see that you want show the selected record count dynamically in the toolbar item’s value. We have created the sample with your requirement, in that we have dynamically changed the toolbar item value with respect to the selected record count in the rowSelected and rowDeselected event. Please refer the code example and sample for more information. 

export class App extends React.Component { 

   

 

  grid; 

  settings = { type: 'Multiple' }; 

  rowSelected = (args) => { 

    var count = this.grid.getSelectedRecords().length; 

    document.getElementById('grid_Selected Record Count').innerText = 'Selected Record Count' + ' = ' + count 

  }  

  rowDeselected = (args) =>{ 

     var count = this.grid.getSelectedRecords().length; 

     if( count == 0 ){ 

       document.getElementById('grid_Selected Record Count').innerText = 'Selected Record Count' + ' = ' + count 

     } 

  } 

 

 

  render() { 

    this.toolbarClick = this.toolbarClick.bind(this); 

    return ( 

 

<div> 

    <GridComponent id='grid' dataSource={data} toolbar= {[{id: 'Selected_Record_Count', text:'Selected Record Count'}]} rowSelected={this.rowSelected} rowDeselected = {this.rowDeselected} 

toolbarClick={this.toolbarClick} selectionSettings={this.settings} ref={g => this.grid = g}> 

    </GridComponent> 

</div> 

    ); 

  } 

} 

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

UG : https://ej2.syncfusion.com/react/documentation/api/grid/#rowselected 

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

Please get back to us if you need further assistance. 

Regards, 

R. Dhivya