How to hide a Toolbar in MainLayout

[Vince]

Hallo,

I have a Toolbar in MainLayout which I want to hide at start of the app and make it visible by clicking a button in another page.  Here I asked the same for a SfSidebar which has property IsOpen but a Toolbar lacks this property. It also has no property Visible which is available for the individual items of the toolbar.

How do i achieve a visiblity toggle for the hole toolbar? 

Best regards,

Vince

[Saritha Sankar]

Hi Vince,

Thank you for reaching out.

Based on your requirement to hide the SfToolbar from another Razor page, we suggest you use a ToolbarService.

 

Step 1: Create a shared service to manage Toolbar state

[ToolbarService.cs]

   public class ToolbarService

   {

       public bool IsToolbarVisible { get; private set; } = false;

 

       public event Action OnChange;

       public void ToggleToolbar()

       {

           IsToolbarVisible = !IsToolbarVisible;

           NotifyStateChanged();

       }

       private void NotifyStateChanged() => OnChange?.Invoke();

   }

Step 2: Register the service in Program.cs

[Program.cs]

builder.Services.AddScoped< ToolbarService >();

Step 3: Update MainLayout.razor to listen for change

[MainLayout.razor]

   @if (ToolbarService.IsToolbarVisible)

   {

           <SfToolbar>

               <ToolbarItems>

                   <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>

                   <ToolbarItem Text="Copy" PrefixIcon="e-icons e-copy"></ToolbarItem><ToolbarItem Text="Paste" PrefixIcon="e-icons e-paste"></ToolbarItem><ToolbarItem Type="ItemType.Separator"></ToolbarItem><ToolbarItem Text="Bold" PrefixIcon="e-icons e-bold"></ToolbarItem>

                   <ToolbarItem Text="Italic" PrefixIcon="e-icons e-italic"></ToolbarItem>

               </ToolbarItems>

           </SfToolbar>

   }

 

@code {

 

  protected override void OnInitialized()

  {

      ToolbarService.OnChange += StateHasChanged;

  }

 

  public void Dispose()

  {

      ToolbarService.OnChange -= StateHasChanged;

  }

 

}

Step 4: Trigger toolbar toggle

<SfButton class="toggle-button" OnClick="ShowToolbar">Toggle Toolbar</SfButton>

 

@code {

    private void ShowToolbar()

    {

        ToolbarService.ToggleToolbar();

    }

}

For your reference we attached a sample.

Sample: Attached as a zip file.

Please let us know if you need any further assistance.

Regards,

Saritha S.

Attachment: BlazorToolbarSample_c69906eb.zip

[Vince]

Hallo Saritha,

Thanks for your sample code. It works great.

Best regards,

Vince

[Saritha Sankar]

Hi Vince,

You're welcome. We are glad the response provided was helpful for you. Please get back to us if you need any further assistance. 

Regards,
Saritha S.