The problem when implemented the Header and SlideBar of the Northwind Main Layout demo app

Radzen Studio Blazor Server
1

Hello there, I have a question about the MainLayout.razor of Northwind demo app,

I try to implemented the Header and SlideBar of the Main Layout like this demo

But when I click on RadzenSidebarToggle, seems the Header and the SlideBar was not hide/show correctly. Can you help me check my fault and show me the correct code for that. Thank you.

The my demo project as this link: https://drive.google.com/file/d/17hVw6DWGZJVxan_SMWGIYnEdAwNok-Xn/view?usp=sharing
The MainLayout.razor file : https://drive.google.com/open?id=13hh1J7OVkCiD6qIB4_bhr-8PIuVKi4C5

@inherits LayoutComponentBase

<RadzenHeader Style="margin-left: 250px;">
    <ChildContent>
            <div class="row justify-content-start align-items-center">
                <div class="col-md-6 d-flex align-items-center">
                    <RadzenSidebarToggle Click="@SidebarToggle0Click">
                    </RadzenSidebarToggle>
                    <RadzenLabel Text="Test">
                    </RadzenLabel>
                </div>
                <div class="col-md-6 text-lg-right">
                </div>
            </div>     
    </ChildContent>
</RadzenHeader>
<RadzenBody @ref="body0">
    <ChildContent>
        <RadzenContentContainer Name="main">
            @Body
        </RadzenContentContainer>
    </ChildContent>
</RadzenBody>
<RadzenSidebar @ref="sidebar0" Style="top: 0px; bottom: 0px; transform: translateX(0px);">
    <ChildContent>
        <RadzenImage Path="https://demos.radzen.com/assets/images/radzen-logo-white.svg" Style="margin: 20px; width: 200px;">

        </RadzenImage>
        <RadzenPanelMenu>
            <ChildContent>
                <RadzenPanelMenuItem Text="First Look" Path="/" Icon="home"></RadzenPanelMenuItem>
                <RadzenPanelMenuItem Text="DataGrid" Path="datagrid" Icon="grid_on"></RadzenPanelMenuItem>
            </ChildContent>
        </RadzenPanelMenu>
    </ChildContent>
</RadzenSidebar>
<RadzenFooter>
    <ChildContent>
        <RadzenLabel Text="Test, Copyright &copy; 2019">
        </RadzenLabel>
    </ChildContent>
</RadzenFooter>

@code{
    
    protected RadzenBody body0;

    protected RadzenSidebar sidebar0;
    protected async void SidebarToggle0Click(dynamic args)
    {
        sidebar0.Toggle();

        body0.Toggle();
    }
}

Many thanks.

2

Our Blazor demo application is here: https://blazor.radzen.com/
You can check also the source code: https://github.com/akorchev/blazor.radzen.com/

3

Sorry Radzen Team, my looking for this demo: https://demos.radzen.com/dashboard. We have a customize Header and SlideBar like this picture
https://i.imgur.com/sYJJ1OM.png

4

The screenshot is from our Angular demo - the same stretch behavior for Blazor SideBar is still not added. We will do our best to provide it soon.

1 Like
5

Hi! Has this been implemented yet? I cannot seem to get the sidebar to display in full height in combination with a header

6

Yes, this can easily be done now if you use <RadzenLayout>. Just set its style like this:

<RadzenLayout style="grid-template-areas: 'rz-sidebar rz-header' 'rz-sidebar rz-body' 'rz-sidebar rz-footer'">

RadzenLayour specifies four areas of the page - rz-sidebar, rz-header, rz-body and rz-footer and three rows - one for the header, one for the body and one for the footer. Every quoted string represents the contents of a row. For example 'rz-sidebar rz-header means 'first row contains the sidebar and the header'. By default it is 'rz-header rz-header' which means 'the first row contains the header in its both columns'.

1 Like