Hi Mahendra Venkatrao Manale,
Greetings from Syncfusion support.
Query : To change background color of toolbar items
You can achieve your requirement of changing the background
color of the toolbar items by retrieving the rendered toolbar item elements
from the Grid’s toolbar module, checking the button element of the toolbar
items.
And then setting the required background color to the
toolbarItem using style property. This action can be done in the Grid’s dataBound
event handler. Kindly refer the below code and sample for your references.
[app.component.ts]
onDataBound() {
if (this.initialFlag) {
var toolbarEles =
(this.gridObj.toolbarModule.toolbar as any).tbarEle;
toolbarEles.forEach((ele)
=> {
if
(ele.innerText === 'Add') {
//
Customize the color of the toolbar item's using style property
ele.querySelector('button').style.backgroundColor
= 'red';
} else if
(ele.innerText === 'Edit') {
ele.querySelector('button').style.backgroundColor
= 'blue';
} else if
(ele.innerText === 'Delete') {
ele.querySelector('button').style.backgroundColor
= 'yellow';
} else if
(ele.innerText === 'Update') {
ele.querySelector('button').style.backgroundColor
= 'green';
} else if
(ele.innerText === 'Cancel') {
ele.querySelector('button').style.backgroundColor
= 'pink';
}
});
this.initialFlag = false;
}
}
|
Sample link : https://stackblitz.com/edit/angular-dtah5k-uhgpt2?file=app.component.ts,app.component.html
API reference : https://ej2.syncfusion.com/documentation/api/grid/#databound
Kindly get back to us if you have any further queries
Regards,
Vinitha Balasubramanian
If this post is helpful, please consider
Accepting it as the solution so that other members can locate it more quickly.