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

Update toolbar item's text

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!


1 Reply

DR Dhivya Rajendran Syncfusion Team January 10, 2020 10:31 AM UTC

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> 
    ); 
  } 
} 




Please get back to us if you need further assistance. 

Regards, 
R. Dhivya               


Loader.
Up arrow icon