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

Toolbar with Toggle-Button


i have a grid with a toolbar, and i need to add a toggle-button in this toolbar, which stays activated after i clicked this button.

My grid/toolbar in html looks like :

        <e-column field="field1" headerText="Wirkstoff"> </e-column>
        <e-column field="field2" headerText="Dosierung"> </e-column>
        <e-column headerText="someColumn">


private InitToolbar() {
    this.Toolbar = [
        text: 'Edit',
        tooltipText: 'Edit',
        id: 'Edit',
        disabled: false,

I can add "normal" buttons, but toggle-button is a problem.
Do you have any help?


2 Replies 1 reply marked as answer

MW Matthias Wagner April 26, 2023 06:43 AM UTC

Ok, i solved the problem with setting the CssClass

if (argClickEvent.item.id === 'Schnellerfassung')

      if (this.isSchnellerfassung)
          argClickEvent.item.cssClass = "schnellerfassungAktiv";
          argClickEvent.item.cssClass = "schnellerfassungNichtAktiv";

Thx, ticket can be closed.

Marked as answer

SG Suganya Gopinath Syncfusion Team April 26, 2023 09:19 AM UTC

Hi Matthias,

Thanks for sharing the status of the issue and upding the solution which you have tried. Please get back to us if you need any further assistance.


Suganya Gopinath.

Live Chat Icon For mobile
Up arrow icon