Side bar closing automatically when doing operations

[Samba Shiva Rao Enuganti]

Hi Team,

We Side bar on Left as Push Type & Dockable, inside it we have treeview control.

On right side we have Dashboard Layout.

When we are doing Drag & drop dashboard Layout panel, the left side bar closing automatically and the treeview not collapsing.

I have handled tree collapse in onclose event of sidebar, it's working as expected when I am click the collapse button, but it's not working as expected when auto close happening(while drag & drop of panels).

Thanks,

Shiva

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Samba, 

 

Greetings from Syncfusion support. 

 

Please, find the solutions for your queries. 

 

Query 1 – Sidebar closes unexpected while drag the panels. 

 

We have checked your reported issue from sidebar closes unexpectedly. We suspect the cause of closing of sidebar is due to the gestures in the Sidebar component. By default, when we click drag on the Sidebar, will trigger close event of the sidebar. This functionality can be disabled in the Sidebar by setting enableGestures property as false.  

 

Refer the below KB for enableGestures property. 

 

https://www.syncfusion.com/kb/10491/how-to-disable-expand-or-collapse-on-swiping-in-the-sidebar-container 

 

By disabling this property, it will resolve the reported problem. 

 

Query 2 – Click the collapse button not collapse the TreeView node. 

 

Refer the below UG Documentation for your requirement. In that sample, we can collapse the TreeView nodes using hamburger icon. 

 

https://ej2.syncfusion.com/angular/documentation/sidebar/how-to/sidebar-with-treeview/ 

 

 

If the issue still persists in your end. Can you please share the additional details regarding your requirement, it will helpful for us to resolve your issue at earlier? 

 

1.      Code snippet. 

 

2.      Explain the expected functionality of collapse button. 

 

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

 

Regards,  

Shameer Ali Baig S. 

[Samba Shiva Rao Enuganti]

Hi Shameer,

I have set the enableGestures false then also it's not working as expected.

 public onClose(args: any) {

      this.treeviewInstance.collapseAll();//this one not working when Auto close is happening(while drag & drop of panels).

     

    }

Where as OnClose event is firing...

But our requirement is Sidebar should not close automatically...

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Samba, 

 

We have looked into your reported problem with Sidebar’s close event. We tried to replicate your problem by preparing a simple sample with your issue reproducing scenario. But we are unable to reproduce the reported issue. 

 

We have attached the sample for your reference, in which we set enableGestures property of Sidebar as false, after that, Sidebar’s close event is not triggered on drag and drop the panels of the Dashboard Layout component. Also, we have used collapseAll() method to collapse the TreeView nodes, when the close event of the Sidebar trigger. 

 

Could you please, check the below sample and let us know if it help solve the problem. 

 

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

 

https://stackblitz.com/edit/angular-dashboard-treeview-sidebar?file=app.component.html  

 

If the reported issue still persist, could you please share us the source code of your application in which you face this issue or if possible, could please replicate the reported issue in the attached sample and share it to us? 

 

This information would help us to validate the cause of your problem and to provide you the prompt solution at the earliest. 

 

Regards, 

Shameer Ali Baig S.