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

Button colour

Hello,

    I want highlight add,delete or update button with different colour. i have attached screenshot for your reference.


Attachment: button_colour_c42e7b03.rar

1 Reply

VB Vinitha Balasubramanian Syncfusion Team October 5, 2022 09:31 AM

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.


Loader.
Live Chat Icon For mobile
Up arrow icon