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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Update toolbar item's text

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 [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 { 
   
 
  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               


CONFIRMATION

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