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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Update toolbar item's text

Thread ID:





150507 Jan 9,2020 09:31 AM UTC Jan 10,2020 10:31 AM UTC React - EJ 2 1
Tags: Grid
Asked On January 9, 2020 09:31 AM UTC


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?


Dhivya Rajendran [Syncfusion]
Replied On 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 { 
  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 ( 
    <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}> 

Please get back to us if you need further assistance. 

R. Dhivya               


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon