@bind-IsOpen

[Hartmut]

I have a Blasor server project where ich replaced the Navigation page by a Syncfusion Sidebar as in your example.

Mainlayout.Razor

<SfSidebar Width="254px" DockSize="72px" EnableDock="true" @ref="Sidebar" HtmlAttributes="@HtmlAttribute">

    <ChildContent>

<NavMenu SidebarInstance="Sidebar">

</NavMenu>

    </ChildContent>

 </SfSidebar>

NavMenu.razor

    <div class="sidebar-item" id="toggle" @onclick="@Toggle">

        <span class="e-icons expand"></span>

        <span class="e-text" title="menu">Menu</span>

    </div>

@code {

    [Parameter]

    public SfSidebar SidebarInstance { get; set; }

    public void Toggle()

    {

        SidebarInstance.Toggle();

    }

The code for collapsing and expanding the sidebar works fine, but I get a message that the "Toggle"-method is not supported any longer, instead "@bind-IsOpen". With the resources on the net I cannot figure out how to use it. When I put @bind-IsOpen into <SfSidebar.... on MainLayout.razor, and the code

    public bool SidebarToggle { get; set; }

    public void Toggle()

    {

   SidebarToggle = !SidebarToggle;

    }

also in MainLayout.razor, the collapse does not work. Obviously, some kind of click event is missing.

Putting the code on NavMenu.razor does not work,too.

How can I tie the two parts together?

Thanks,

Hartmut

[LeoLavanya Dhanaraj]

Hi Hartmut,

Greetings from Syncfusion support.

Based on your shared details, we have prepared and included the Blazor Sidebar sample with the latest version(21.1.37). You can tie that two razor pages using EventCallBack and InvokeAysnc methods. Check out the below code snippets for further assistance.

[MainLayout.razor]

<SfSidebar Width="254px" DockSize="72px" @bind-IsOpen="SidebarToggle" >

    <ChildContent>

        <NavMenu  OnButtonClick="Toggle" />

        <SfButton @onclick="Toggle" CssClass="e-btn close-btn">Close Sidebar</SfButton>

    </ChildContent>

</SfSidebar>

 

@code{

    public bool SidebarToggle = false;

    public void Toggle()

    {

        SidebarToggle = !SidebarToggle;

    }

}

 

[NavMenu.razor]

<div class="sidebar-item" id="toggled" @onclick="@OnButtonClick">

    <span class="e-icons expand"></span>

    <span class="e-text" title="menu">Menu</span>

</div>

 

@code {

    [Parameter] public EventCallback OnButtonClick { get; set; }

    private async Task InvokeButtonClickAsync() {

        await OnButtonClick.InvokeAsync();

    }

}

Refer to the sample and code snippets and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

Attachment: BlazorSidebar_d7772c13.zip

[Hartmut]

Dear Leo,

 your soluztion works fine, but there is onother problem coming up. In my code in [MainLayout.razor] i had:

<SfSidebar Width="254px" DockSize="72px" EnableDock="true" @ref="Sidebar" HtmlAttributes="@HtmlAttribute" @bind-IsOpen="SidebarToggle" >

That gave another method that "HtmlAttributes" should not be used, instead "@attributes" should be used.

When I changed that line to your code above:

<SfSidebar Width="254px" DockSize="72px" @bind-IsOpen="SidebarToggle" >

the show/hide-button gets very small, I think the styling is lost:

with HtmlAttributes="@HtmlAttribute"

without

 

How can I use @attributes, I could not find any documentation for this.

Thank you

Hartmut

[LeoLavanya Dhanaraj]

Hartmut, We have reviewed your query and the shared screenshot. We would like to inform you that we have deprecated the "HtmlAttributes" property in the Blazor Sidebar component. Instead, we recommend using "@attributes" in your application, and you can declare your HTML attributes using this attribute. Refer to the below code snippet for further reference.

[MainLayout.razor]

<SfSidebar Width="254px" DockSize="72px" EnableDock="true" @bind-IsOpen="SidebarToggle" @attributes="@HtmlAttribute">…

</SfSidebar>

 

@code{

    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()

  {

    {"class", "dockSidebar" }

  };

} 

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

We will make these changes to our documentation and refresh it in any of our upcoming releases. Check out the attached sample and get back to us if you need any further assistance.

[Hartmut]

Hi Leo,

thanks, works fine.

Hartmut