Change visibility of ToolbarItem dynamically

[Tobias Andraschko]

Hey, i want to achieve the following:

AfterRenderAsync evaluates whether to show a specific toolbarItem or not.

I was using @bind-Visible on the <ToolbarItem ... /> with my bool value.

The visibility does not change after the bool changes because a VisibleChanged method was expected on the ToolbarItem. I was also using StateHasChanged() after setting the bool value, which did not update the visibility.

Is there any other way to update the toolbarItem's visibility dynamically from the code?

Best,

Tobias

[Alagumeena Kalaiselvan]

Hi Tobias, 

Greetings from Syncfusion support. 

We have checked your reported issue “Change the visibility of Toolbar item dynamically” and Toolbar component does not have @bind-Visible property and Visible alone supported. So, you can use Visible property to dynamically change the visibility of specified Toolbar item. Refer the below code for that. 

<SfToolbar> 

    <ToolbarItems> 

        <ToolbarItem Text="Cut" Visible="@ShowItem"></ToolbarItem> 

        <ToolbarItem Text="Copy"></ToolbarItem> 

        <ToolbarItem Text="Paste"></ToolbarItem> 

        <ToolbarItem Text="Test"></ToolbarItem> 

    </ToolbarItems> 

</SfToolbar> 

 

@code{ 

    public bool ShowItem = true; 

    protected override Task OnAfterRenderAsync(bool firstRender) 

    { 

        if (firstRender) 

        { 

            ShowItem = !ShowItem;    // To dynamically change the visibility 

        } 

        return base.OnAfterRenderAsync(firstRender); 

    } 

} 

  

Kindly check with shared sample and get back to us whether it meets your requirement. 

Regards 

Alagumeena.K 

[Tobias Andraschko]

Hi Alagumeena,

thanks for your reply.

Your provided code does not work as expected. If ShowItem is true, then the item is always visible and does not disappear after the OnAfterRenderAsync execution.

I am using version 18.1.0.59

Best,

Tobias

[Alagumeena Kalaiselvan]

Hi Tobias, 

Thanks for your update. 

We have checked your reported issue with reported package version 18.1.0.59 and we could replicate this issue at our end. So, we suggest you upgrade our latest release package 18.2.0.44 to overcome the visibility issues. Refer to the below sample link for that. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ToolbarVisibility-791297  

Please note that we have introduced several API break in this release. We would like you to review the breaking changes from the below location before you upgrade.  

https://blazor.syncfusion.com/documentation/release-notes/18.2.44/?type=breaking-changes" 

 

Please get back to us, if you need further assistance. 

Regards 

Alagumeena.K 

[Tobias Andraschko]

Hi Alagumeena,

thanks for your reply.

Very good news! after upgrading to 18.2.0.44 the visibilty issue is solved.

Thank you for the support!

Best,

Tobias

[Vengatesh Maniraj]

Hi Tobias, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh