navmenu replacement - Responsive Sidebar With Treeview

[Paul]

Hello

Lo v e your work btw

Is there any chance of getting this sample, but it to a VS project (Server app)

Responsive Sidebar With Treeview

(I tried to post a link to your site but it will not let me)

https://blazor.syncfusion.com/demos/sidebar/responsive-panel

I see its been done for a different menu, If not I shall try but I just wanted the project to start off correctly by the pros lol

I think all your controls are great, and the only bad thing with blazor out the box is its navmenu

Thank You

[Indhumathy Loganathan]

Hi Paul, 

 

Greetings from Syncfusion support. 

 

Based on your requirement, we have prepared a Responsive Sidebar with TreeView sample in Visual Studio. In the below provided sample we have implemented Sidebar in the layout page. 

 

Please find the sample from the below link. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_blazor-1249446659 

 

Please refer the following links to know more about the Blazor Sidebar component. 

 

Documentation: https://blazor.syncfusion.com/documentation/sidebar/getting-started/ 

 

Demos: https://blazor.syncfusion.com/demos/sidebar/default-functionalities?theme=bootstrap4 

 

API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html 

 

Please, let us know if you need any further assistance.  

  

Regards,  

Indhumathy L 

[Paul]

Thank you very much, fantastic support

[Keerthana Rajendran]

Hi Paul,  

 

Most welcome. We are glad that the provided details helped you. Please get back to us if you need further assistance.  

 

Regards, 

Keerthana.  

[Kiran Reddy]

Hi

In the sample the sidebar content is static and is defined in the mainlayout, how can i display a component on node click.

 For example if I click the node "installation" I want the content of the counter component to be displayed as the side bar content.

Basically a replacement for the default navmenu which has rel='nofollow' hrefs to various components or pages.

[Shalini Maragathavel]

Hi Kiran,   

  

Good day to you.  

  

We have checked your requirement with TreeView component (navigate to another page on clicking the TreeView node). To achieve your requirement, you need to add the TreeView in the MainLayout.razor, to avail TreeView in all the pages of the application. The MainLayout.razor page is commonly shared page where the content will be applied to all the pages of the Blazor application.  

  

The following link will help you to understand better about the use of MainLayout.razor page and its contents.  

  

https://docs.microsoft.com/en-us/aspnet/core/blazor/layouts?view=aspnetcore-3.1  

  

By default, In TreeView component, we have provided a support for NavigateURL property. Using this property, we can navigate to another page when clicking the TreeView node.   

  

@body not only denotes the Index.razor page, it also render all pages of the application at the place of @body element in the MainLayout.razor. Please refer to know the purpose @body from the shared link.  

  

Please, refer to the below code snippet.  

 <!-- sidebar element declaration --> 

<SfSidebar HtmlAttributes="@HtmlAttribute" Width="290px" Target=".main-content" @ref="Sidebar" MediaQuery="(min-width:600px)" @bind-IsOpen="isOpen"> 

            <ChildContent> 

                <div class="main-menu"> 

                   

                    <div> 

                        <SfTreeView CssClass="main-treeview" @ref="TreeView" ExpandOn="@Expand" TValue="TreeData"> 

                            <TreeViewEvents TValue="TreeData"></TreeViewEvents> 

                            <TreeViewFieldsSettings Id="nodeId" Text="nodeText" IconCss="iconCss" DataSource="treedata" NavigateUrl="navigateUrl" HasChildren="hasChild" ParentID="pid"> 

                            </TreeViewFieldsSettings> 

                        </SfTreeView> 

                    </div> 

                </div> 

            </ChildContent> 

        </SfSidebar> 

        <!-- end of sidebar element --> 

        <!-- main-content declaration --> 

        <div class="main-content" id="main-text" style="height:100vh"> 

            <div class="sidebar-content"> 

              @Body 

            </div> 

        </div> 

    </div> 

</div> 

@code { 

    public class TreeData 

    { 

        public string nodeId { get; set; } 

        public string nodeText { get; set; } 

        public string iconCss { get; set; } 

        public bool hasChild { get; set; } 

        public string pid { get; set; } 

        public string navigateUrl { get; set; } 

    } 

    private List<TreeData> treedata = new List<TreeData>(); 

    protected override void OnInitialized() 

    { 

        base.OnInitialized(); 

        treedata.Add(new TreeData { nodeId = "01", nodeText = "Installation", iconCss = "icon-microchip icon", navigateUrl="/FetchData" }); 

        treedata.Add(new TreeData { nodeId = "02", nodeText = "Deployment", iconCss = "icon-thumbs-up-alt icon", navigateUrl="/Counter" }); 

  

    } 

  

} 

  

  

Please, find the below sample for your reference.  

  

Sample: https://www.syncfusion.com/downloads/support/forum/162914/ze/SIE76B~11460397253.zip 

  

Please let us know if you need any further assistance.  

  

Regards,   

Shalini M.