Toggle Radzen Layout Sidebar (Blazor Server)

Radzen.Blazor Components
1

Good day,

I am attempting to build a section of my web site wherein, in a mobile browser, a user may swipe right on the page to expand the RadzenSidebar. Alternatively, when on a full browser, the sidebar will simply be expanded at all times.

The issue I have is strictly on mobile, and so everything from this point on will be discussing that.

On initial load, the RadzenSidebar is NOT displayed. However, the code behind thinks that it is. When I perform my "swipe right" gesture and watch from the debugger, I see that the RadzenSidebar's "Expanded" property is set to "true" and the RadzenBody's "Expanded" property is set to "false" even though the sidebar is not displayed on my screen and the RadzenBody is at full width. If I swipe left, the sidebar and the layout body are toggled via their Toggle() methods, but the screen does not change. At that point, however, I can swipe right and left to open and close the sidebar as one would expect. This appears to be a bug on the RadzenSidebar and RadzenBody where they do not recognize that their respective Expanded properties should be set differently when loaded on a small screen.

I cannot think of an appropriate workaround that doesn't involve JSInterop, and I'd rather avoid that if possible.

Sorry, I forgot to mention that this behavior is seen on version 4.1.1

2

This is the default value of the property: radzen-blazor/Radzen.Blazor/RadzenSidebar.razor.cs at master · radzenhq/radzen-blazor · GitHub

You can try using @bind-Expanded to track the expanded state value. The Expanded parameter isn't updated itself - only the internal state is.

<RadzenSidebar @bind-Expanded="expanded">
</RadzenSidebar>
@code {
   bool expanded = true;
}
3

I am uncertain what point you are trying to make. I recognize that it's the default value.

I also recognize that it is incorrect in a mobile setup. When the sidebar is collapsed, having an Expanded value of "true" is unexpected and wrong from my perspective. Especially given that that is the very property that we are given for tracking whether or not the sidebar is expanded. So if the sidebar is collapsed and Expanded is true, that's a problem.

4

The Expanded parameter does not indicate the expanded state. It is a parameter and as such is not updated to reflect the state. You are welcome to check the implementation and try my suggested workaround.

5

I think that I see what you mean. It seems odd to me that it is not intended to describe the state of the control given its name, but it is what it is. Perhaps it's an anomaly of web development vs rich client. I will try your workaround - I suspect that it will work swimmingly, but I will post here when I know for certain.

6

This is actually something imposed by Blazor itself.

7

Huh... I see. I guess it makes sense from a certain perspective.

I was able to get your suggestion to work, but I had to set my "SidebarExpanded" property rather than use the Toggle() method on the sidebar, itself. Trying to use Toggle did not update the bound value. In fact, the bound property appeared to force the sidebar to remain closed. Setting the property to "SidebarExpanded = !SidebarExpanded" worked swimmingly, however. Thank you for your time!