cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Resolver I
Resolver I

How to add custom sorting in a PCF dataset component ?

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!

1 ACCEPTED SOLUTION

Accepted Solutions
Super User
Super User

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."

View solution in original post

8 REPLIES 8
Helper I
Helper I

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.

Helper I
Helper I

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 });

 

Super User
Super User

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."

View solution in original post

@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

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

 

 

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();

}

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

Thank you Diane!!

Yes, its issue with overridden logic in Componentdidupdate. 

Helpful resources

Announcements
New Badges

New Solution Badges!

Check out our new profile badges recognizing authored solutions!

New Power Super Users

Congratulations!

We are excited to announce the Power Apps Super Users!

Power Apps Community Call

Power Apps Community Call: February

Did you miss the call? Check out the Power Apps Community Call here.

Microsoft Ignite

Microsoft Ignite

Join digitally, March 2–4, 2021 to explore new tech that's ready to implement. Experience the keynote in mixed reality through AltspaceVR!

Users online (44,186)