Docked Sidebar and Treeview

[Egemen]

Hi

Is there a way to change treeview sub items to sub menu item when the left sidebar docked.

Subitems can be reachable even dock and collapse position 

output will be like the azure devops screen :

[Sowmiya Padmanaban]

Hi Egemen,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with Sidebar component. We are on preparing the sample to meet your requirement. We will update the sample to you within three business days on 11^th November 2020. 

 

We appreciate your patience. 

 

Regards,  

Sowmiya.P 

[Sowmiya Padmanaban]

Hi Egemen,  

 

Thanks for your patience. 

 

We have prepared a sample based on your requirement. On expanding the sidebar component, sidebar display TreeView component. On collapse, sidebar will display the menu component. 

 

Please, refer the below code snippet. 

 

<SfSidebar @ref="sidebar" Width="250px" DockSize="45px" EnableDock="true"> 

        <ChildContent> 

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

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

                </TreeViewFieldsSettings> 

            </SfTreeView> 

            <div> 

                <SfMenu ID="menu" CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation"></SfMenu> 

            </div> 

        </ChildContent> 

    </SfSidebar> 

 

<style> 

   /* Hide the TreeView component on close*/ 

    .e-sidebar.e-close .e-treeview { 

        display:none; 

    } 

    /*Hide the menu component on open */ 

    .e-sidebar.e-open .e-menu { 

        display:none; 

    } 

</style> 

 

Please, refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/forum/159447/ze/Sidebar895491645.zip 

 

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

 

Regards,