13-Aquamarine

Question

How to add sort functionality to all columns in an Advanced Grid

Forum|Forum|4 years ago
September 2, 2021
4 replies
3553 views

I am using thingworx 8.5.3-b123

I fill an advanced datagrid with a service Search that is inside a Thing called DashboardHelper :

I dont understand how to add sort functionality to all the columns, I mean, if I click on a column it sorts by that column, and I would like to sort data ny the column I click on.

Is this possible?

Could you please tell me how to do it?

I have enabled the EnableSorting property but I dont really know how to sort data by all columns using a query filter?

I found an article to implement sorting but I dont understand it:

https://app-direct-www-cloudfront.s3.amazonaws.com/downloads/229413/AdvancedGridWidgetsExtension4.2.0.pdf

Implement Sorting
1. Set the EnableSorting property to true, either by clicking it in the properties panel of the
Mashup Builder or defining it in the JSON script of a dynamic configuration service. The
QueryFilter property and Filter event will become available in the properties panel. 2. Bind the QueryFilter property to the output query parameter where the data to be sorted is
located:
• If your data is in a table, bind the QueryFilter to the query parameter of the
QueryDataTableEntries service.
• If you are generating data via a data service, bind the QueryFilter to the queryFilter
parameter of the data service.
3. Bind the Filter event to the service that will be triggered when sorting begins:
• If you are using a data table, bind the Filter event to QueryDataTableEntries service.
• If you are generating data via a data service, bind the Filter event to the data service. The example below shows a query parameter with two sort columns applied (name and title):
{"maxItems":100000,"query":{"sorts":[{"fieldName":"name","isAscending":true},{"fieldName":
"title","isAscending":true}]}}

As I am filling the grid with a service, The article says I need to bind the queryfilter to the queryfilter parameter of the data service.

where is the query filter and where is the query filter parameter? I dont find them neither how to bind them and where to write the query

Do I have to create a service inside DashboardHelper or do I Have to include the query filter inside the service Search ?

V

VladimirRosu_116627

19-Tanzanite

Hi,

The story is like this: the Advanced Grid is generating a Query object that contains the desired sorting, but then you need to pass this value to a service which does the actual sorting.

You need to modify your existing Service from the screenshot in order to add a parameter type Query, to which you then bind the Query generated by the grid.

This is the first step. After that, in your service code you need to sort the infotable, and you can use one of the existing snippets.

The thing that threw you of this road is probably the fact that some built in platform services (QueryDataTableEntries etc) already contain such an input parameter.

E

EM_9923519

Author

13-Aquamarine

Thanks for replying,

I think I understand the idea. Could you detail how to manage the click on a column and then perform the sorting, I mean, you click on NAME column and you sort the advanced grid by column, and then you can also click on SERIAL, STATUS etc columns and they would sort by their corresponding clicked column.

How would you detect the click on a given column?

I dont understand this part yet

D

DanWolf

14-Alexandrite

To implement the sorting, enable sorting as mentioned earlier and bind the grid's Query field to a Query input in your service. Finally, bind the grid's Filter event to the service. Every time a column is clicked for sorting, the service is triggered and the input Query value (JSON value) contains the name of the column that was clicked and whether the sort is ascending or descending. You can add a logger output to your service like "logger.debug(JSON.stringify(queryInput))" and see exactly what is being passed in that Query object. Use something like "result.Sort()" to sort the InfoTable within the service based on the values in the Query input.

I don't like that the service is called again every time a column is clicked for sorting - maybe the service is doing something fairly intensive to build the InfoTable and I don't want that being run over and over just because someone is sorting by different columns. When I implement a sortable grid, I create a second service for the sorting that takes the InfoTable from the main service as input. Say my main service is "xxx", I'll create another service called "xxxSorted" (which is triggered by "xxx" ServiceInvokeCompleted event). The "All Data" output from "xxx" is passed as InfoTable input to "xxxSorted" (along with the Query), and the grid's Filter event triggers "xxxSorted". The "All Data" output of "xxxSorted" is bound to the Data of the grid. The "xxx" service does its thing once, then repeated clicks to sort the grid just trigger "xxxSorted" to re-sort that InfoTable.

S

slangley

Community Manager

Hi @EM_9923519.

You can refer to this page from the ThingWorx Help Center for setting up the sort. When viewing the mashup, you will need to hold <ctrl> to select the columns for sorting--primary first, then secondary, etc. You might need to add a text field on your mashup to advise users.

Regards.

--Sharon

S

slangley

Community Manager

HI @EM_9923519

If you feel your question has been answered, please mark the appropriate response as the Accepted Solution for the benefit of others with the same question.

Regards.

--Sharon