[Sidebar navigation with treeview]

[Ciprian-Catalin]

Hello,

I'm using the sidebar with treeview as a navigation menu in my app and I couldn't find a way to expand the sidebar container when the user hover on the preview icons. Is there a built in property or some way to do this?

Also, if the treeview hierarchy has more than 2 levels, can you provide an example of how the sidebar navigation will look like?

Thank you

[SureshRajan Alagarsamy]

Hi Ciprian,

We have reviewed your query and understand that you are looking to toggle the Sidebar by hovering over the icons. We have prepared a sample that demonstrates how to achieve this using the “created” event. In the created event handler, we bind the “mouseleave” and “mouseenter” events for the icon element to toggle the Sidebar using the “toggle” method.

Refer to the below code snippet for further reference.

[app.component.html]

 

<ejs-sidebar

    ....

    position="Left"

    (created)="OnCreated($event)"

> 

    .....

</ejs-sidebar>

 

[app.component.ts]

 

OnCreated(args: void) {

  setTimeout(() => {

    const element = document.querySelector('.e-tbar-menu-icon.e-icons');

    if (element) {

      element.addEventListener('mouseenter', () => {

        this.sidebarobj.toggle();

        // Add your hover in logic here

      });

 

      element.addEventListener('mouseleave', () => {

        this.sidebarobj.toggle();

        // Add your hover out logic here

      });

    }

  }, 50);

}

 

We have also shared a solution sample for your reference.

Sample : https://stackblitz.com/edit/angular-t9j6hq-bai1fm?file=src%2Fapp.component.ts

Regards,
Suresh.

[Ciprian-Catalin]

Hi Suresh,

The provided example is not working as I needed, the css classes for the preview icons looks different, also in the stackblitz you provided, the preview icons are not present, and the hover functionality works for the breadcrumb icon from the navbar. I need to expand/collapse the sidebar when the user hover on the preview icons of the sidebar menu items:

[SureshRajan Alagarsamy]

Hi Ciprian,

We have reviewed your query and understand that you are looking to toggle the Sidebar component by hovering over the icons inside the sidebar. We have prepared a sample that demonstrates how to achieve this using the “created” event. In the created event handler, we bind the “mouseleave” and “mouseenter” events for the icon element which contains “e-list-icon” as class name to toggle the Sidebar using the “toggle” method.

Refer to the below code snippet for further reference.

[app.component.html]

 

<ejs-sidebar

  id="dockSidebar"

  .....

  type="Auto"

  (created)="OnCreated($event)"

></ejs-sidebar>

 

[app.component.ts]

 

  OnCreated(args: void) {

    setTimeout(() => {

      const element = document.querySelectorAll('.e-list-icon');

      for (var i = 0; i < element.length; i++) {

        element[i].addEventListener('mouseenter', () => {

          console.log('Hovered in');

          this.dockBar.toggle();

          // Add your hover in logic here

        });

 

        element[i].addEventListener('mouseleave', () => {

          console.log('Hovered out');

          this.dockBar.toggle();

          // Add your hover out logic here

        });

      }

    }, 50);

  }

 

We have also attached a sample for your reference.

Sample : https://stackblitz.com/edit/angular-316gru-amfhpu?file=src%2Fapp.component.ts

Regards,
Suresh.

[Ciprian-Catalin]

Thank you for the response.

I have a few question, it is possible to implement these functionalities?

1) If I expand a child of one menu item, when the sidebar is collapsed and the dockbar appears, the child is automatically collapsed. How to keep the child expanded when the sidebar is collapsed?

2) Is there a way to have the tree view items indented when the sidebar is expanded, and when the sidebar is collapsed the icons to be aligned? Similar to gmail sidebar, the children are indented when the sidebar is expanded:

and when the sidebar is collapsed, the children's icons return under the parents' icons:

[SureshRajan Alagarsamy]

Hi Ciprian,

We have reviewed your query and understand that you have two concerns regarding the Sidebar integrated with TreeView component. We suggest to check the below details to get answer for your queries.

Query 1 : If I expand a child of one menu item, when the sidebar is collapsed and the dockbar appears, the child is automatically collapsed. How to keep the child expanded when the sidebar is collapsed?

Based on the details you provided, we have validated this scenario, but we were unable to replicate the issue. In our testing, the TreeView node retains its expanded state when the Sidebar is collapsed, and it does not automatically collapse.

For your reference, we have attached a video that demonstrates the expected behavior.

Video Footage : Attached as zip file.

Query 2 : Is there a way to have the tree view items indented when the sidebar is expanded, and when the sidebar is collapsed the icons to be aligned? Similar to gmail sidebar, the children are indented when the sidebar is expanded.

We have understand that you would like to have the child TreeView items indented when the Sidebar is expanded, and aligned icons when it is collapsed. You can achieve this behavior by applying custom CSS styles.

Refer to the below code snippet for further reference.

[app.component.css]

 

.dockSidebar .e-treeview, .dockSidebar .e-treeview .e-ul {

  padding: 0;

  margin: 0;

}

 

.dockSidebar .e-treeview .e-text-content {

  padding-left: 18px;

}

 

.dockSidebar .main-treeview .icon {

  font-family: fontello;

  font-size: 16px;

  margin: -4px 0;

}

 

We have attached a sample for your reference.

Sample : https://stackblitz.com/edit/angular-316gru-yy1p1i?file=src%2Fapp.component.html

Regards,
Suresh.

Attachment: SidebarTreeViewIcons_7a69d8d3.zip

[Ciprian-Catalin]

The first issue is solved, but not the second one, related to the indentation, the children elements are on the same level like their parents, even after applying the code you provided:

[SureshRajan Alagarsamy]

Hi Ciprian,

We have reviewed your query and understand that you would like to render the TreeView items in their default structure when the Sidebar is open state, and have to align the icons vertically with consistent indentation for all tree items when the Sidebar is in collapsed state. To achieve this, you can adjust the padding and margin properties for the child items when the Sidebar is in its collapsed state.

Refer to the below code snippet for further reference.

[app.component.css]

 

/* Specifies sample level styles for Sidebar */

.dockSidebar .e-treeview .e-ul,

.dockSidebar.e-dock.e-close .e-treeview .e-list-item .e-ul {

  margin: 0;

  padding: 0 0 0 5px;

}

 

.dockSidebar .e-treeview .e-list-item .e-ul {

  margin: 2px 0 -2px;

  padding: 0 0 0 20px;

}

 

We have also attached a video that demonstrates the expected behavior and included a sample for your reference.

Sample : https://stackblitz.com/edit/angular-316gru-bujj5m?file=src%2Fapp.component.css

Video Footage : Attached as zip file

Regards,
Suresh.

Attachment: SidebarTreeView_ca4e836.zip