Loading page following NodeSelected

[Unknown]

I managed to get the Responsive Sidebar with TreeView to work as per the below thread...

https://www.syncfusion.com/forums/162795/responsive-panel

However, I am not sure how I can load a page in the "main-content" following selection of a TreeView item. The example project above has hardcoded text in the "main-content" div with now code showing how to replace this following a selection.

To put it another way, I am trying to mimic the NavLink functionality where selection loads a given page...

<NavLink class="nav-link" rel='nofollow' href="pageToLoad">

I also found the below demo which also does not list how to wire up page loading...

https://blazor.syncfusion.com/demos/sidebar/sidebar-with-menu?_gl=1*1q4wh87*_ga*NjE5ODYwNTA1LjE2MDkyNDk2ODk.*_ga_WC4JKKPHH0*MTY0NTEzNDA3Ni42LjEuMTY0NTEzNTE4NS4w&_ga=2.228276061.1957915989.1645120003-619860505.1609249689

Help much appreciated!

Thanks.

[Indhumathy Loganathan]

Hi Ross, 

 

Greetings from Syncfusion support. 

 

To achieve your requirement, you need to place the Sidebar on the main-layout page in order to view the same Sidebar with TreeView on all the pages of your application. You need to render the @Body as the main-content of the Sidebar in the MainLayout.razor page of your application.  

 

Refer to the below code snippet.  

  

<SfSidebar ID="sidebar" HtmlAttributes="@HtmlAttribute" Target=".main-content" Width="220px"  MediaQuery="(min-width:600px)" @ref="Sidebar">  

        <ChildContent>  

        </ChildContent>  

    </SfSidebar>   

<div class="main-content" id="maintext">  

        <div class="content">  

            @Body  

        </div>  

    </div>  

  

In the TreeView component, we have provided a NavigateUrl property. By using this property, you can navigate to other pages with TreeView node selection. 

 

Refer to the below code snippet.  

  

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

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

                        </TreeViewFieldsSettings> 

                    </SfTreeView>  protected override void OnInitialized() {  

        base.OnInitialized();  

        treedata.Add(new TreeData { nodeId = "01", nodeText = "Installation", navigateUrl ="/"});  

        treedata.Add(new TreeData { nodeId = "02", nodeText = "Deployment", navigateUrl="/Counter" });  

        treedata.Add(new TreeData { nodeId = "03", nodeText = "Quick Start", navigateUrl="/FetchData"});  

        treedata.Add(new TreeData { nodeId = "04", nodeText = "Components", hasChild=true, iconCss = "e-icons e-font", navigateUrl ="/Error" }); 

}  

 

You can find the sample from below link. 

 

https://www.syncfusion.com/downloads/support/forum/172991/ze/SidebarSample660840269 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Unknown]

Many thanks Indhumathy, this worked just as I needed!

I'm just getting into Blazor and really appreciate the inclusion of sample projects with mine and others questions. It's very helpful.

Thanks,

Ross

[Indhumathy Loganathan]

Hi Ross, 

Thanks for the update. We are glad that your issue has been resolved. Please get back to us if you need any further assistance.  

Regards, 

Indhumathy L