On clicking the sort icon in header(column), I want to update data of the table using custom function.

posted on March 29th, 2022

Answered

Manavjeet Gupta asked on March 29, 2022

Hi Team!
I am using custom pagination for the flexmonster table, and at a time only 10 or 20 rows are being made visible, So when clicking the sort icon in column header only that 10 or 20 rows are being sort. BUT I want to call a custom function on clicking the sort icon, and then using that custom function I want to update data in the table. Please provide me the way to do it.

Please look into the issue, and if there is another approach for my use case, then please let me know that approach also.

With regards
Manavjeet Gupta

2 answers

Public

Maksym Diachenko ⋅ Flexmonster ⋅ March 31, 2022

Hello, Manavjeet!

Thank you for your question.

We recommend the following approach for your case:

First, disable the default sorting handler in Flexmonster with the sorting: false property of the options object.
Next, create your own UI controls outside of Flexmonster for sorting the table. In your custom sorting handler, you can use the getReport() and setReport() API calls to reflect the changes in Flexmonster.
This way, you can use your custom sorting function to sort the data in Flexmonster.

You are welcome to check out our example implementing sorting with pagination: https://jsfiddle.net/flexmonster/anowfmbt/.

In the JSFiddle, when the sort button is clicked ("SORT A-Z"), the initial data from both pages is sorted. Then the Array.prototype.slice method is used to get the data corresponding to the selected page. Next the getReport API call is used to access and change the data property of the dataSource object. The changes are applied using the setReport method.

Please let us know if such an approach would work for your case. Looking forward to your response.

Best Regards,
Maksym

Public

Maksym Diachenko ⋅ Flexmonster ⋅ April 7, 2022

Hello, Manavjeet!

Our team is wondering if you had time to check out our approach for sorting Flexmonster flat table with custom pagination. Could you please let us know if our response helped?

Best Regards,
Maksym

On clicking the sort icon in header(column), I want to update data of the table using custom function.

2 answers

Please login or Register to Submit Answer