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

Subscribe to this post

Tags: Grid

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!

Reply | Reply with quote

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>

);

}

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

Reply | Reply with quote

Update toolbar item's text

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US