How to align an item to the right of Grid toolbar

[Chi Duc]

Hi,

I would like to add a toolbar item to the right of a grid toolbard, next to the Search built-in item. Please let me know how I could do that.

Thanks and best regards,

Chi Duc

[Venkatesh Ayothi Raman]

Hi Chi, 

Thanks for using Syncfusion products. 

We can move the left toolbar items position into right side with follow the right-side search toolbar item by using grid dataBound event. Please refer to the following code example and sample, 

Code example: 

this.dataBound =  (args) => { 

var toolbarLeftNodes  = document.getElementsByClassName('e-toolbar-left')[0].childNodes; 

//here remove the toolbar items which is in left side 

document.getElementsByClassName('e-toolbar-left')[0].remove(); 

var length =toolbarLeftNodes.length 

//append the left toolbar items into right side after search bar 

for(var i=0;i<length;i++){ 

  document.getElementsByClassName('e-toolbar-right')[0].appendChild(toolbarLeftNodes[0]); 

} 

 

        } 

Sample: https://stackblitz.com/edit/react-te1eof-jmaqqs?file=index.js 

Help documentation: https://ej2.syncfusion.com/react/documentation/grid/api-gridComponent.html#databound 

Screenshot: 

 

Please let us know if you have any further assistance on this. 

Regards,
Venkatesh Ayothiraman. 

[Shamsh]

Is it possibe to move only 1 or few buttons to the right side of search field & rest to left only? 

[Balaji Sekar]

Hi Chi, 

 

Yes,  We can bind the specific button in right side of Search toolbar item by using dataBound event. In below code example, we have bound the “Add” and “Update” toolbar buttons to right side of Search toolbar item. Please refer the below code example and sample for more information. 

[app.component.ts] 

  this.dataBound = (args) => { 

        var toolbarLeftNodes = document.getElementsByClassName('e-toolbar-left')[0].childNodes; 

        var items = [].slice.call(toolbarLeftNodes).filter(item => { return item.getAttribute("title") == "Add" || item.getAttribute("title") == "Update" }) 

        //here remove the toolbar items which is in left side 

        items.forEach(element => { 

          element.remove(); 

        }); 

        //append the left toolbar items into right side after search bar  

        for (var i = 0; i < items.length; i++) { 

          document.getElementsByClassName('e-toolbar-right')[0].appendChild(items[i]); 

        } 

 

 

Sample link: https://stackblitz.com/edit/react-te1eof-yqoe6w 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar