How to add custom sorting in a PCF dataset component ?

(0) Share

Report

Posted on by Sheldon Copper

200

Hi,

I want to add custom sorting on my PCF grid. However I do not see any method to add sorting.

Also I want the sorting to not only be applied to the data visible as per the page size. Instead it should be applied to the entire data set.

So lets say my Page Size is 4, and I sort the grid by name and in descending order. Now if there's a record with the name starting with 'Z' on the 5th page still it should get displayed on the 1st page as 1st record.

Any suggestion is highly appreciated.

Thanks!

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (8)

Answers (1)

Sort by

Goutham A 76 on at

Like (0)

Report
Copy link

Link copied!

I believe you had implementing some kind of pagination logic in your custom control.from Datasetgrid,You need to load all items from all pages and then apply the sorting logic. use dataset.Paging.Loadnextpage() until it loads all pages or set dataset.paging.pagesize(use SetPageSize) to totalrecordscount. I agree this has some performance considerations.

Please look at below forum for implementing sorting.
https://stackoverflow.com/questions/60513317/apply-a-sort-to-a-dataset-in-a-powerapps-component-pcf

There are also custom grids in PCF gallery which you can look at for sorting.

Was this reply helpful? Yes No
skoofy5 482 on at

Like (0)

Report
Copy link

Link copied!
I'm keen to know the answer to this - I don't believe the code below is supported, but I need a correctly sorted dataset.

dataSet.sorting.push({ name: "columnName", sortDirection: 0 });

Was this reply helpful? Yes No
Verified answer

Diana Birkelbach 3,072 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!
Hi @sheldoncopper73 ,

Basically @skoofy5 is right, but it needs a little more: you need to go to page 1 by yourself.

I use loadExactPage, so my code for sorting is looking like this:

const oldSorting = (sorting || []).find((sort) => sort.name===columnClicked); const newValue : DataSetInterfaces.SortStatus = { name: columnClicked, sortDirection : oldSorting!= null ? (oldSorting.sortDirection === 0 ? 1 : 0) : 0 //0 = ascending }; while (dataset.sorting.length > 0) { dataset.sorting.pop(); } dataset.sorting.push(newValue); (dataset.paging as any).loadExactPage(1); dataset.refresh();

In case you don't work with loadExactPage, I guess you need:

dataset.paging.reset()

in order to go to page 1.

I have a blog about sorting, showing also another issue. Maybe it helps: Dataset PCF using FluentUI: Sorting – Dianamics PCF Lady (wordpress.com)

Kind regards,

Diana

----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

Was this reply helpful? Yes No
skoofy5 482 on at

Like (0)

Report
Copy link

Link copied!

@DianaBirkelbach - do you know if there's any potential issues using this considering it's undocumented?

All I can find regarding sorting is this - https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/sortstatus

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

Hi @skoofy5 ,

If you mean sorting, it is documented here: DataSet - Power Apps | Microsoft Docs

Or do you refer to the unsupported loadExactPage?

Kind regards,

Diana

Was this reply helpful? Yes No
Goutham A 76 on at

Like (0)

Report
Copy link

Link copied!

Hi @DianaBirkelbach ,
I see below code is not working. Am i missing any?From console, i see that column name pushed to sorting is correct.
I am using fluentUi details list and calling this oncolumnheaderclick. Any thoughts would be appreciated?

oncolumnclicked(ev,column) //column is of IColumn type
{
let columnClicked=column.fieldName;
const newValue : DataSetInterfaces.SortStatus = {
name: columnClicked,
sortDirection : 1
};
while (dataset.sorting.length > 0) {
dataset.sorting.pop();
}
dataset.sorting.push(newValue);
(dataset.paging as any).loadExactPage(1);
dataset.refresh();
}

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

Hi @Goutham ,

Besides that the sorting is only descending, (which is not the issue here), I cannot detect any problem in the code.

But similar code works for me.

Calling the dataset.refresh() will call the updateView method of your PCF (later on), this time with refreshed content. Maybe it's a react issue, where the change in the Virtual DOM is not detected. I think a console.log with the data inside the updateView (maybe first line of code there) could clarify this.

Kind regards,

Diana

Was this reply helpful? Yes No
Goutham A 76 on at

Like (0)

Report
Copy link

Link copied!

Thank you Diane!!
Yes, its issue with overridden logic in Componentdidupdate.

Was this reply helpful? Yes No