Need a special offer?Find out if your project fits.
+

How to drag and drop column programatically in grid

Answered
shilpi asked on March 17, 2020

Hi Team,
 
I want to apply drag and drop column programatically in grid.
Please suggest how to achieve this.
 
Thanks
Kaavya

12 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 17, 2020

Hello,
 
Thank you for your question.
 
We would like to kindly draw your attention to the runQuery API call provided by Flexmonster. Such a method runs a query with specified rows, columns, measures and reportFilters from slice object and displays the result data. Use this method to rearrange hierarchies on the axes or to compose a new report based on the current data source.
 
Please check out an example demonstrating usage of the described method.
 
Detailed information about the method can be found in our documentation.
More about the structure of the slice object: Slice Object.
 
We hope it helps.
 
Kind regards,
Illia

Public
kaavya March 17, 2020

There are some issues in runQuery method.
1- It keeps on running, I tried putting console.log and it was keep on printing
2- My scenario is when I applied checkbox to the grid then checkbox column appears the first column which is correct, but this gave impact on charts, menaing.. chart always showed false and the on drill down the values, which is wrong. To overcome this, I tried loading the grid with chekcbox position at the last and then manually dragged to first column position and in this case charts displayed fine.
 
Now how to drag the particular column to first column position after grid load.

Public
kaavya March 17, 2020

And I had called runQuery method from

onReportComplete method

 

<fm-pivot #pivot [licenseKey]="'test'" 
            [report]="report"
            [toolbar]="true"
            (exportTo) = "exportTo()"
            (beforetoolbarcreated) =  "customizeToolbar($event)"
            (ready)="onPivotReady($event)"
            (reportcomplete)="onReportComplete()"
>
</fm-pivot>

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 18, 2020

Hello,
 
Thank you for your feedback.
 
1. How to resolve cyclic execution of the runQuery method.
 
The reason the runQuery method is executed cyclically is the fact that it entails the reportcomplete event. Being bound to that event, it keeps executing recursively.
 
We recommend removing the following line of code from the code snippet dedicated to creating the new instance of Flexmonster:

<fm-pivot #pivot [licenseKey]="'test'"
...
(reportcomplete)="onReportComplete()"
>
</fm-pivot>

Instead, we suggest using the slice property of the report object in order to predefine the set of hierarchies chosen for the display.
 
Please check out our tutorial on configuring the report object.
Detailed information about the slice object and its properties can be found in our documentation.
 
2. How to hide controls responsible for filtering for a specific hierarchy
 
As for disabling filtering for a specific column, we recommend hiding appropriate controls using CSS. We have modified an example provided earlier so the gear icon is hidden as well as an arrow icon that appears on hover. The tooltip is hidden as well. It is achievable using the following CSS code:

#fm-cols-sheet>div>div.fm-ui-element.fm-scroll-content>div:nth-child(2)>div:nth-child(1)>i.fm-icon.fm-filter-icon,
#fm-cols-sheet>div>div.fm-ui-element.fm-scroll-content>div:nth-child(2)>div:nth-child(1)>i.fm-icon.fm-sort-icon.fm-v-sort-icon {
display: none !important;
}
#fm-cols-sheet>div>div.fm-ui-element.fm-scroll-content>div:nth-child(2)>div:nth-child(1) {
pointer-events: none;
}

However, for now it is not possible to completely disable filtering for the specific hierarchy. Please let us know how critical is such a feature for you.
 
3. How to ignore checkboxes column for charts and compact/classic form.
 
In order to resolve difficulties with checkboxes in charts and problems in opening classic and compact form, our team would like to suggest using the following approach:
 
The hierarchy that serves as a wrapper for checkboxes should be removed from the slice in case something except the flat form is specified in the report.
 
Please check out an example we have prepared for you. It is based on listening to the reportchange event. The function addCheckboxes is responsible for checking whether the flat form is chosen or not. It performs appropriate changes of the slice object and customizes cells if needed.
 
Also, our team would like to draw your attention to the following code snippet:

let prev;

pivot.on('reportcomplete', () => {
prev = pivot.getOptions();
if (pivot.getOptions().viewType == 'grid' && pivot.getOptions().grid.type == 'flat')
drawCheckboxes();
});

The code block above is dedicated to saving the previous configuration of the table to omit false positive results while checking if checkboxes should be added. Also, it allows specifying the flat form of the grid by default.
 
Finally, the described approach should also help with issues while trying to open the classic or the compact form. The problem you are facing is likely to be connected with customizeCell API. In its turn, an approach described above allows avoid cell customization for classic and compact form and as a result solve the problem.
 
We hope it works for you.
 
Kind regards,
Illia

Public
shilpi April 3, 2020

Hi Team,
 
Thanks for response. 
I tried the css given above to hide gear. It did not work. I have integrated flexmonster with Angular, and tried adding this in my component css.
 

#fm-cols-sheet>div>div.fm-ui-element.fm-scroll-content>div:nth-child(2)>div:nth-child(1)>i.fm-icon.fm-filter-icon,
#fm-cols-sheet>div>div.fm-ui-element.fm-scroll-content>div:nth-child(2)>div:nth-child(1)>i.fm-icon.fm-sort-icon.fm-v-sort-icon {
display: none !important;
}
#fm-cols-sheet>div>div.fm-ui-element.fm-scroll-content>div:nth-child(2)>div:nth-child(1) {
pointer-events: none;
}

Actually, I do not want filter popup to be opened for this.

http://prntscr.com/rs6boo
Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster April 3, 2020

Hello,
 
Thank you for your feedback.
 
We would like to provide some explanations due to the way Angular works with CSS styles. It encapsulates them in the way they are applied only for a specific component.
 
In order to apply styles to Flexmonster, an appropriate CSS should be imported to the main CSS file styles.css, or placed there directly. The file extension may vary depending on the CSS engine you are using (e.g., LESS, SCSS, etc.)
 
Also, please note that the selectors we have provided may differ from page to page. You can use an in-built pipette provided by the browser you are using in order to find an actual selector, in case the one provided by us does not work for you.
 
We hope it helps.
 
Kind regards,
Illia

Public
shilpi April 3, 2020

Thanks Illia,
 
Can you please answer the second part as well, how to remove filter popup for a particular column.
http://prntscr.com/rs6boo
 
Usecase - I have select all functionality, where one checkbox will be shown on the header and on click of that all rows I need to select, now what is happening on click of checkbox every time filter popup is coming up.
Please advice how to prevent it.
 
Thanks

Public
shilpi April 5, 2020

Hi Illia,
 
Regarding # 3, firstly big thanks for providing solution to add checkbox.
Now, i am facing issue to fetch the row value on click of checkbox.
Please suggest.
 
Regards
KV

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster April 7, 2020

Hello,
 
Thank you for contacting us.
 

  1. We would like to kindly explain that filtering can not be completely removed for the specific hierarchy at the current version of Flexmonster. However, considering specifics of your case, the best way to implement such functionality would be disabling filtering using the mapping object.
    Such a possibility will be provided with a minor update ETA May 04. We will keep you posted with all updates on this point.
  2. Concerning fetching the row value on a selection of the checkbox, our team would like to draw your attention to the cellclick event, which is triggered after the cell is clicked and return the Cell Data Object. Such an object contains all required information about the cell, including its value, which is a unique identifier of the row for the "ID" hierarchy. We have modified an example provided earlier in the way the row id is returned every time the checkbox is checked or unchecked by the user.

    The code snippet below demonstrates the way to get the row ID after the checkbox is clicked:

    pivot.on('cellclick', (data) => {
    if (data.type == "value" && data.measure && data.measure.uniqueName == 'ID')
    alert(data.value);
    });

    More information about the event in our documentation.

We hope it helps.
Please contact us in case further questions occur.

Best regards,
Illia

Public
shilpi April 14, 2020

Thanks Illia,
 
Gear Icon got hidden and even the cursor, but i still can click on the header and then filter popup opens.
Any way with which I can stop opening the popup as well.
 
Regards
Shilpi

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster April 14, 2020

Hello, Shilpi,
 
Thank you for reaching to us.
 
The possibility to disable filtering for a specific hierarchy will be provided with a minor update ETA May 04. We will notify you as soon as something is changed on this point.
 
Kind regards,
Illia

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster May 6, 2020

Hello, Shilpi,
 
We are glad to announce that a new filters mapping property was added.
It allows defining whether filtering is possible for the chosen hierarchy. It should be specified in the following way:

mapping: {
Category: {
filters: false
...
},
...
}

Please check out an example demonstrating the described functionality: https://jsfiddle.net/flexmonster/z0urbvas/.
 
This is provided in the 2.8.6 version of Flexmonster: https://www.flexmonster.com/release-notes/.
 
You are welcome to update the component: https://www.flexmonster.com/doc/updating-to-the-latest-version/.
 
Please let us know if everything works.
 
Best regards

Please login or Register to Submit Answer