Requirement In ejs-sidebar

[PH Harish]

Hi Team,

              I have a requirement in the sidebar please refer to the attachment for more details.  

Attachment: Expected_Collapse_Behavior_9af16be8.zip

[Sowmiya Padmanaban]

Hi PH Harish,  

 

Greetings from Syncfusion support. 

 

Query- The above both the scenarios I have a requirement when I click on out side it needs be collapse and if on hover on side menu it needs be open. 

 

Sidebar will collapse, when clicking outside the sidebar element (any element in the document excluding Sidebar element and its inner content elements), when CloseOnDocumentClick property is set as true.  

 

  <ejs-sidebar 

        #dockBar 

        id="dockSidebar" 

        [enableDock]="enableDock" 

        [width]="width" 

        [dockSize]="dockSize" 

        [closeOnDocumentClick]="true" 

        (mouseover)="mouseOver($event)" 

      > 

  </ejs-sidebar> 

If you want the Sidebar to expand on hover, you need to bind the mouseover event for Sidebar element. In the mouseover event’s call function, you can call show method of Sidebar to expand it. 

  <ejs-sidebar 

        #dockBar 

        id="dockSidebar" 

        [enableDock]="enableDock" 

        [width]="width" 

        [dockSize]="dockSize" 

        [closeOnDocumentClick]="true" 

        (mouseover)="mouseOver($event)" 

      > 

 

  </ejs-sidebar> 

 mouseOver() { 

    if (!this.dockBar.isOpen) { 

      this.dockBar.show(); 

    } 

  } 

Refer the sample link with above explained solution. 

 

https://stackblitz.com/edit/angular-xtmlw6?file=app.component.ts 

 

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

 

Regards,  

Sowmiya.P 

[PH Harish]

Hi Sowmiya,

                    First thanks for providing the solution it is working fine. Still, two more scenarios are missing please refer to the attachment for more information. 

Attachment: Requirement_in_Sidemenu_2168c166.zip

[Shameer Ali Baig Sulaiman Ali Baig]

Hi PH Harish, 

 

We have checked your requirement with Sidebar and TreeView component. Your requirement can be achieved in application level by using the close event of Sidebar, expandAll and collapseAll methods of Treeview and by overriding some of the default styles of the components. 

 

Please, check out the following sample in which we have rendered TreeView within Sidebar to meet your requirement. 

 

Sample: https://stackblitz.com/edit/sidebar-with-treeview-angular?file=app.component.ts  

 

Default styles of the components overridden to achieve your requirement. Please, find those custom styles below. 

[app.component.css] 

.e-icons.e-icon-expandable, 

.e-icons.e-icon-collapsible { 

  float: right; 

} 

 

#dockSidebar.e-close .e-icons.e-icon-expandable, 

#dockSidebar.e-close .e-icons.e-icon-collapsible { 

  display: none; 

} 

#dockSidebar.e-close .e-list-text { 

  display: block; 

} 

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

  padding: 0; 

  text-align: center; 

} 

#dockSidebar.e-close .e-treeview .e-list-icon { 

  margin: 0; 

} 

 

Please, let us know if you have any concerns. 

Regards, 

Shameer Ali Baig S. 

[PH Harish]

Hi Shameer,

                   Your solution is working fine but in one scenario it is failing. Whenever I mouse over on the left sidebar by default it is expanding all submenus but my requirement is what I expend that only needs to expend remaining need to be close.

[Sowmiya Padmanaban]

Hi PH Harish,  

 

In our previously shared sample, we have used expandAll method of TreeView component. To achieve your requirement, you need to pass the corresponding ID value to the argument of ExpandAll method. 

 

Please, refer the below code snippet. 

 

 mouseOver(args) { 

    if (!this.dockBar.isOpen) { 

      debugger; 

      if (args.target.closest("li") != null) { 

        var node_id = args.target.closest("li").getAttribute("data-uid"); 

        this.treeInstance.expandAll([node_id]); 

      } 

      this.dockBar.show(); 

    } 

  } 

 

Please, refer the modified sample link: 

 

https://stackblitz.com/edit/sidebar-with-treeview-angular-k1kjoh?file=app.component.ts 

 

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

 

Regards,  

Sowmiya.P 

[Vaishali Jain]

I have used sidebar in left and right side and in the middle I am having main content, I am showing chip list in left sidebar dynamically when drag complete event in scatter chart get fired but when I close the left side bar these chip list is not collapsing/hiding with the side bar and not showing back when I am opening it back. Please provide help.

Looking for your response.

Vaishali

Attachment: trenddemo_34ef2fa6.zip

[Shereen Shajahan]

Hi Vishali,

The query has been branched into a new forum, please follow-up using the link below,

Requirement In ejs-sidebar - Branched from 159358 | Angular - EJ 2 Forums | Syncfusion

Regards,

Shereen