Feature request

[Ryan]

Hello,

     Is there a way to only allow moving of panels through a small portion of the panel? Like I have a map component inside a panel so whenever I try to move inside the map the whole panel moves. So I only want to move the panel through the header portion of the panel and not the map.

Thank you !

[Sowmiya Padmanaban]

Hi Ryan, 

 

Greetings from Syncfusion component. 

 

We have checked your requirement with DashboardLayout component. By using draggableHandle of DashboardLayout, you can able to set the drag target as any particular element within the panel.  

 

Refer the below code snippet. 

 

 

<ejs-dashboardlayout id="api_dashboard" #api_dashboard columns="6" [draggableHandle]="draggableHandle" [allowResizing]="true" [panels]='panelsData' 

            [cellSpacing]='cellSpacing'> 

        </ejs-dashboardlayout> 

export class AppComponent { 

    public draggableHandle: string =".e-panel-header"; 

    constructor() {        

    }   

} 

 

Setting “e-panel-header” class for draggableHandle property, allows to the drag panel only using its header element. 

 

Please, refer the sample from the following link. 

 

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

 

Please, refer the following links to know more about DashboardLayout component  

  

UG Documentation	https://ej2.syncfusion.com/angular/documentation/dashboard-layout/getting-started/
Demo link	https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default
Draggable Handle	https://ej2.syncfusion.com/angular/documentation/dashboard-layout/interaction-with-panels/dragging-moving-of-panels/#customizing-the-dragging-handler
API reference	https://ej2.syncfusion.com/angular/documentation/api/dashboard-layout/#draggablehandle

   

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

  

Regards,   

Sowmiya.P  

[Ryan]

Thankyou for giving such a detailed answer. It worked!!

[Sowmiya Padmanaban]

Hi Ryan, 

  

Most Welcome. We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 

  

Regards,  

Sowmiya.P