Hide disabled toolbar buttons

[Susanti]

Hi,

I am using the combination of default toolbar items for CRUD and custom toolbar items for other functions, as shown below: 

readonly IList<object> ToolbarItems = new List<object>()

{

            "Add", "Edit", "Update", "Delete", "Cancel", "Search",

            new ItemModel { PrefixIcon = "sf-icon-minus", Id = "big", Align = ItemAlign.Right, TooltipText = "60px" },

            new ItemModel { PrefixIcon = "sf-icon-row", Id = "medium", Align = ItemAlign.Right, TooltipText = "40px" },

            new ItemModel { PrefixIcon = "sf-icon-stack-04-wf", Id = "small", Align = ItemAlign.Right, TooltipText = "20px" }

};

  

I would like to be able to hide toolbar buttons that are disabled and display it again when enabled.

For example: 

- When in edit mode, only shows Update and Cancel buttons, and hides button Add, Edit, and Delete.  

- When not in edit mode, only shows button Add, Edit, and Delete, and hides Update and Cancel buttons.

It would be great it if there is a simple or more automatic way to achieve this, such as adding a CSS class to hide disable buttons. 

Thanks beforehand.

[Renjith Singh Rajendran]

Hi Susanti, 

 

Greetings from Syncfusion support. 

 

We suggest you to dynamically apply style for the corresponding toolbar items, based on the flag variables value inside OnActionComplete event of Grid. We have prepared a sample based on this requirement. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1750311588 

 

Please refer the codes below, 

 

 

@if (HideUpdateCancel) 

{ 

    <style> 

        .e-toolbar .e-toolbar-items .e-toolbar-item[title="Cancel"] { 

            display:none; 

        } 

        .e-toolbar .e-toolbar-items .e-toolbar-item[title="Update"] { 

            display:none; 

        }        

    </style> 

} 

@if (HideOtherItems) 

{ 

    <style> 

        .e-toolbar .e-toolbar-items .e-toolbar-item[title="Add"] { 

            display:none; 

        } 

        .e-toolbar .e-toolbar-items .e-toolbar-item[title="Edit"] { 

            display:none; 

        } 

        .e-toolbar .e-toolbar-items .e-toolbar-item[title="Delete"] { 

            display:none; 

        } 

    </style> 

} 

 

    public bool HideUpdateCancel = true; 

    public bool HideOtherItems = false; 

    public void OnActionComplete(ActionEventArgs<Order> args) 

    { 

        if (args.RequestType.Equals(Action.Save) || args.RequestType.Equals(Action.Cancel)) 

        { 

            HideUpdateCancel = true; 

            HideOtherItems = false; 

        } 

        else if (args.RequestType.Equals(Action.BeginEdit) || args.RequestType.Equals(Action.Add)) 

        { 

            HideUpdateCancel = false; 

            HideOtherItems = true; 

        } 

    } 

 

 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith R