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

[Jonathan Rim]

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!

[Thirupathi Bala Krishnan]

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     };  Documentation link: https://ej2.syncfusion.com/react/documentation/api/pivotview/groupingBarSettingsModel/#allowdraganddrop  Sample link: https://stackblitz.com/edit/react-jpvfhm?file=index.js
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     };  Documentation link: https://ej2.syncfusion.com/react/documentation/pivotview/grouping-bar/#showhide-filter-icon  Sample link: https://stackblitz.com/edit/react-jpvfhm?file=index.js

Please let us know if you have any concerns. 

Regards, 

Scintilla A 

[Jonathan Rim]

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.

[Thirupathi Bala Krishnan]

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 

} 

 

Documentation link: https://ej2.syncfusion.com/documentation/api/pivotview/#onfielddropped 

Sample link: https://stackblitz.com/edit/react-jpvfhm?file=index.js 

Screenshot: 

 

 

Please let us know if you have any concerns. 

Regards, 

Scintilla A