1. Home
  2. Forum
  3. Angular - EJ 2
  4. Feature request

Feature request

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 !

3 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team September 28, 2020 10:07 AM UTC

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. 
 
 
Please, refer the following links to know more about DashboardLayout component  
  
UG Documentation  
  
Demo link  
Draggable Handle  
 
API reference  
 
   
Please let us know, if you need any further assistance.  
  
Regards,   
Sowmiya.P  


Marked as answer
RY Ryan September 29, 2020 04:29 AM UTC

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

SP Sowmiya Padmanaban Syncfusion Team September 29, 2020 04:47 AM UTC

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 


Loader.
Up arrow icon