Sidebar ignores initial expanded state unless Responsive=false #647

New Issue

claunia · 2026-01-29T17:40:51Z

claunia commented

2026-01-29 17:40:51 +00:00

Originally created by @drullo on GitHub (Nov 21, 2022).

Describe the bug
As per the examples in the documentation, I have a Sidebar that is bound to a boolean property. However, unlike the examples, I've set the initial state of my property to false. The Sidebar ignores this initial state if the Responsive property is in the default true state.

The OnInitialized code for RadzenSidebar.razor.cs only sets the expanded value to that of Expanded if Responsive is false. Perhaps this it the cause of the bug?

Expected behavior
The expected behavior is for the component to adhere to the value of the property to which it is bound.

Desktop (please complete the following information):

OS: Windows 10
Browser Chrome
Version 107.0.5304.107

Originally created by @drullo on GitHub (Nov 21, 2022).  **Describe the bug** As per the examples in the documentation, I have a Sidebar that is bound to a boolean property. However, unlike the examples, I've set the initial state of my property to false. The Sidebar ignores this initial state if the **Responsive** property is in the default **true** state. The **OnInitialized** code for [RadzenSidebar.razor.cs](https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenSidebar.razor.cs) only sets the **expanded** value to that of **Expanded** if **Responsive** is false. Perhaps this it the cause of the bug? **Expected behavior** The expected behavior is for the component to adhere to the value of the property to which it is bound. **Desktop (please complete the following information):** - OS: Windows 10 - Browser Chrome - Version 107.0.5304.107

claunia closed this issue

2026-01-29 17:40:51 +00:00

claunia commented

2026-01-29 17:40:52 +00:00

@akorchev commented on GitHub (Nov 21, 2022):

This is the behavior by design. If Responsive is set to true the initial state is determined by a media query. It should be documented here.

@akorchev commented on GitHub (Nov 21, 2022): This is the behavior by design. If Responsive is set to `true` the initial state is determined by a media query. It should be documented [here](https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenSidebar.razor.cs#L23-L27).

claunia commented

2026-01-29 17:40:52 +00:00

@drullo commented on GitHub (Nov 21, 2022):

Thank you @akorchev. I have issues with this behavior as I think it's counter-intuitive and not what most developers would expect. I would expect that the initial state would adhere to whatever I set, independent of the Responsive value - as the two properties are independent. The component can still be Responsive, even if the initial state of the sidebar is collapsed. This still seems like a logic flaw to me.

@drullo commented on GitHub (Nov 21, 2022): Thank you @akorchev. I have issues with this behavior as I think it's counter-intuitive and not what most developers would expect. I would expect that the initial state would adhere to whatever I set, independent of the **Responsive** value - as the two properties are independent. The component can still be Responsive, even if the initial state of the sidebar is collapsed. This still seems like a logic flaw to me.

claunia commented

2026-01-29 17:40:52 +00:00

@akorchev commented on GitHub (Nov 21, 2022):

Without this check this happens (I am reloading the browser here).

The sidebar renders expanded from the server (this is the default value of Expanded), then it collapses because the media query kicks in. This leads to a visible flicker which is not needed. Not sure if this can be avoided otherwise but I am open to ideas.

@akorchev commented on GitHub (Nov 21, 2022): Without this check this happens (I am reloading the browser here). ![responsive](https://user-images.githubusercontent.com/454726/203115327-a9ae4ec6-0669-43af-9b5a-a0b3a23dfe18.gif) The sidebar renders expanded from the server (this is the default value of Expanded), then it collapses because the media query kicks in. This leads to a visible flicker which is not needed. Not sure if this can be avoided otherwise but I am open to ideas.

claunia commented

2026-01-29 17:40:53 +00:00

@PaulSinnema commented on GitHub (Feb 17, 2023):

This behavior by design is not nice.

@PaulSinnema commented on GitHub (Feb 17, 2023): This behavior by design is not nice.

claunia commented

2026-01-29 17:40:54 +00:00

@PaulSinnema commented on GitHub (Feb 17, 2023):

I made a work arround:

  <RadzenHeader>
       <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" AlignItems="AlignItems.End" Gap="1rem">
           <RadzenSidebarToggle Click=@ToggleSideBar Class="rz-m-0" />
       </RadzenStack>
   </RadzenHeader>

   <RadzenSidebar @bind-Expanded=@SidebarExpanded @bind-Visible=@SidebarVisible>
       <RadzenPanelMenu>
           <RadzenPanelMenuItem Text="Home" Icon="home" />
           <RadzenPanelMenuItem Text="Users" Icon="account_box" />
       </RadzenPanelMenu>
   </RadzenSidebar>

       private bool SidebarExpanded { get; set; }
       private bool SidebarVisible { get; set; } = false;

       private void ToggleSideBar()
       {
           SidebarExpanded = !SidebarExpanded;
           SidebarVisible = true;
           StateHasChanged();
       }

@PaulSinnema commented on GitHub (Feb 17, 2023): I made a work arround: ``` <RadzenHeader> <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" AlignItems="AlignItems.End" Gap="1rem"> <RadzenSidebarToggle Click=@ToggleSideBar Class="rz-m-0" /> </RadzenStack> </RadzenHeader> <RadzenSidebar @bind-Expanded=@SidebarExpanded @bind-Visible=@SidebarVisible> <RadzenPanelMenu> <RadzenPanelMenuItem Text="Home" Icon="home" /> <RadzenPanelMenuItem Text="Users" Icon="account_box" /> </RadzenPanelMenu> </RadzenSidebar> private bool SidebarExpanded { get; set; } private bool SidebarVisible { get; set; } = false; private void ToggleSideBar() { SidebarExpanded = !SidebarExpanded; SidebarVisible = true; StateHasChanged(); } ```

claunia commented

2026-01-29 17:40:55 +00:00

@fatihbahceci commented on GitHub (Feb 20, 2023):

Here is my solution

<RadzenSidebar @bind-Expanded="@sidebarExpanded" @bind-Responsive="responsive" >

...
...

@code {
    bool sidebarExpanded = false;
    bool responsive = false;
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            responsive = true;
        }
        base.OnAfterRender(firstRender);
    }
}

@fatihbahceci commented on GitHub (Feb 20, 2023): Here is my solution ``` <RadzenSidebar @bind-Expanded="@sidebarExpanded" @bind-Responsive="responsive" > ... ... @code { bool sidebarExpanded = false; bool responsive = false; protected override void OnAfterRender(bool firstRender) { if (firstRender) { responsive = true; } base.OnAfterRender(firstRender); } } ```

claunia commented

2026-01-29 17:40:55 +00:00

@PaulSinnema commented on GitHub (Feb 20, 2023):

Here is my solution

<RadzenSidebar @bind-Expanded="@sidebarExpanded" @bind-Responsive="responsive" >

...
...

@code {
    bool sidebarExpanded = false;
    bool responsive = false;
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            responsive = true;
        }
        base.OnAfterRender(firstRender);
    }
}

Many road lead to Rome ;-)

@PaulSinnema commented on GitHub (Feb 20, 2023): > Here is my solution > > ``` > <RadzenSidebar @bind-Expanded="@sidebarExpanded" @bind-Responsive="responsive" > > > ... > ... > > @code { > bool sidebarExpanded = false; > bool responsive = false; > protected override void OnAfterRender(bool firstRender) > { > if (firstRender) > { > responsive = true; > } > base.OnAfterRender(firstRender); > } > } > ``` Many road lead to Rome ;-)

claunia commented

2026-01-29 17:40:56 +00:00

@akorchev commented on GitHub (Mar 6, 2023):

Closing this issue as there isn't anything actionable for the time being.

@akorchev commented on GitHub (Mar 6, 2023): Closing this issue as there isn't anything actionable for the time being.

claunia referenced this issue

2026-01-29 18:18:01 +00:00

[PR #647] [MERGED] RadzenSelectBar - RadzenSelectBarItem add disabled-property #2264

Sign in to join this conversation.