We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Pivot Table Grouping Bar - Rows & Columns drag & drop handler

Hi,

For the React Pivot Table's Grouping Bar feature,

Is there a way to handle the drag & drop behavior when moving around fields between rows/columns/filters?

I want to prevent this default behavior of filtering since it's a bit slow, and use my own queries to my server instead.

Thank you!

3 Replies

TB Thirupathi Bala Krishnan Syncfusion Team August 5, 2019 04:34 AM

Hi Jonathan, 
Thanks for contacting Syncfusion support. Please find the response below. 

Query 
Response 
Is there a way to handle the drag & drop behavior when moving around fields between rows/columns/filters? 
You can enable/disable drag and drop feature through the property allowDragAndDrop”. Please find the following code snippet for your reference. 

Code snippet: [React] 
  this.groupingSettings = { 
     allowDragAndDrop: false 
   }; 

I want to prevent this default behavior of filtering since it's a bit slow, and use my own queries to my server instead. 

You cannot change the default behavior of filtering. But, you can hide the filter icons in the UI through the property “showFilterIcon” to false. 

Code snippet: [React] 
  this.groupingSettings = { 
     showFilterIcon: false 
   }; 



Please let us know if you have any concerns. 

Regards, 
Scintilla A 



JR Jonathan Rim August 5, 2019 06:22 AM

Hi Scintilla,

Thank you for the neat and detailed response!

Is there a function that does the drag handling? For example, onDragEnd that contains which element in the rows array is being dragged into the columns array, and on returning the results, moves the element between the arrays? I'd like to not let this action go through, and instead make a query from Mongo to update the table.


TB Thirupathi Bala Krishnan Syncfusion Team August 6, 2019 12:48 AM

Hi Jonathan, 

Thanks for the update. Please find the response below. 

We have checked your query and you can get the details of elements which are being dragged using “onFieldDropped” event. Please find the code snippets for your reference. 
 
Code snippet:[React] 
<PivotViewComponent id='PivotView' ref={(scope) => { this.pivotObj = scope; }} onFieldDropped= {this.trend.bind(this)}> 
</PivotViewComponent> 
 
trend(args) { 
    console.log(args); // Paste your code here 
} 
 
Screenshot: 
 
 
Please let us know if you have any concerns. 

Regards, 
Scintilla A 


Loader.
Live Chat Icon For mobile
Up arrow icon