Search results

Add Toggle Button in ASP.NET Core Toolbar control

09 Jun 2021 / 1 minute to read

Toolbar supports to add a toggle Button by using the template property. Refer below steps

  • By using Toolbar template property, pass required HTML String to render toggle button.
Copied to clipboard
    template='<button class="e-btn" id="media_btn"></button>'
  • Now render the toggle Button into the targeted element in Toolbar created event handler and bind click event for it. On clicking the toggle Button, change the required icon and content based on current active state.
tagHelper
togglebutton.cs
Copied to clipboard
@using Syncfusion.EJ2.Navigations;

@{
    var content1 = "<button class='e-btn' id='media_btn'></button>";
    var content2 = "<button class='e-btn' id='zoom_btn'></button>";
    var content3 = "<button class='e-btn' id='undo_btn'></button>";
    var content4 = "<button class='e-btn' id='filter_btn'></button>";
    var content5 = "<button class='e-btn' id='visible_btn'></button>";
}
<ejs-toolbar id="defaultToolbar" created="created">
    <e-toolbar-items>
        <e-toolbar-item template=content1></e-toolbar-item>
        <e-toolbar-item type="Separator"></e-toolbar-item>
        <e-toolbar-item template=content2></e-toolbar-item>
        <e-toolbar-item type="Separator"></e-toolbar-item>
        <e-toolbar-item template=content3></e-toolbar-item>
        <e-toolbar-item type="Separator"></e-toolbar-item>
        <e-toolbar-item template=content4></e-toolbar-item>
        <e-toolbar-item type="Separator"></e-toolbar-item>
        <e-toolbar-item template=content5></e-toolbar-item>
    </e-toolbar-items>
</ejs-toolbar>

<script type="text/javascript">
     function created() {
         zoomBtn = new ej.buttons.Button({ cssClass: `e-flat`, iconCss: 'e-icons e-zoomin-icon', isToggle: true });
         zoomBtn.appendTo('#zoom_btn');

         mediaBtn = new ej.buttons.Button({ cssClass: `e-flat`, iconCss: 'e-icons e-play-icon', isToggle: true });
         mediaBtn.appendTo('#media_btn');

         undoBtn = new ej.buttons.Button({ cssClass: `e-flat`, iconCss: 'e-icons e-undo-icon', isToggle: true });
         undoBtn.appendTo('#undo_btn');

         filterBtn = new ej.buttons.Button({ cssClass: `e-flat`, iconCss: 'e-icons e-filter-icon', isToggle: true });
         filterBtn.appendTo('#filter_btn');

         visibleBtn = new ej.buttons.Button({ cssClass: `e-flat`, iconCss: 'e-icons e-hide-icon', isToggle: true, content: 'Hide' });
         visibleBtn.appendTo('#visible_btn');

         document.getElementById('zoom_btn').onclick = () => {
             if (document.getElementById('zoom_btn').classList.contains('e-active')) {
                 zoomBtn.iconCss = 'e-icons e-zoomout-icon';
             } else {
                 zoomBtn.iconCss = 'e-icons e-zoomin-icon';
             }
         };
         document.getElementById('media_btn').onclick = () => {
             if (document.getElementById('media_btn').classList.contains('e-active')) {
                 mediaBtn.iconCss = 'e-icons e-pause-icon';
             } else {
                 mediaBtn.iconCss = 'e-icons e-play-icon';
             }
         };
         document.getElementById('undo_btn').onclick = () => {
             if (document.getElementById('undo_btn').classList.contains('e-active')) {
                 undoBtn.iconCss = 'e-icons e-redo-icon';
             } else {
                 undoBtn.iconCss = 'e-icons e-undo-icon';
             }
         };
         document.getElementById('filter_btn').onclick = () => {
             if (document.getElementById('filter_btn').classList.contains('e-active')) {
                 filterBtn.iconCss = 'e-icons e-filternone-icon';
             } else {
                 filterBtn.iconCss = 'e-icons e-filter-icon';
             }
         };
         document.getElementById('visible_btn').onclick = () => {
             if (document.getElementById('visible_btn').classList.contains('e-active')) {
                 document.getElementById('content').style.display = 'none';
                 visibleBtn.content = 'Show';
                 visibleBtn.iconCss = 'e-icons e-show-icon';
             } else {
                 document.getElementById('content').style.display = 'block';
                 visibleBtn.content = 'Hide';
                 visibleBtn.iconCss = 'e-icons e-hide-icon';
             }
         };
     }
</script>
<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }

    .e-hide-icon::before {
        content: '\e81d';
    }

    .e-show-icon::before {
        content: '\e7cb';
    }

    .e-filter-icon::before {
        content: '\e818';
    }

    .e-filternone-icon::before {
        content: '\e819';
    }

    .e-undo-icon::before {
        content: '\e76e';
    }

    .e-redo-icon::before {
        content: '\e726';
    }

    .e-play-icon::before {
        content: '\e798';
    }

    .e-pause-icon::before {
        content: '\e753';
    }

    .e-zoomin-icon::before {
        content: '\e7b7';
    }

    .e-zoomout-icon::before {
        content: '\e81c';
    }
</style>
Copied to clipboard
public ActionResult Index()
{
    return View();
}