Need to programmatically order the list of fields in the Pivot Field List

Question

Hi,We are using the Pivot Field List in conjunction with the Pivot View to allow our users to pivot data. The Pivot Field List is in the "fixed" mode so it always appears on screen. The columns the user wants to query on is dynamic, so we do not specify the columns up front. Instead, the control determines the columns when we assign the data source to it. However for some reason when the Field List displays the columns in the "All Fields" area, they are displayed in the reverse order that they appeared in the JSON data source. I can click the "Sort Ascending" button in the field list and it will sort the columns in the correct order:However, the default behavior seems to be to have the "Sort None" selected. Our desired behavior is for the columns to be displayed in ascending order when the data loads. I am unable to find a method on the PivotFieldListComponent that will allow me to change the sort order of the columns. Can you assist in suggesting a way to default to sort ascending?

Saranya Sivan · Answer

Hi Michael,

Based on your requirement we have prepared a sample to programmatically order the list of fields in the pivot field list. Please check the below sample and code snippet for your reference.

Sample Link: https://stackblitz.com/edit/angular-gvbpg2-caqsqa?file=app.component.html

Code Snippet:

app.component.html

<ejs-pivotview #pivotview id="PivotViewFieldList" width="99%" height="600" (dataBound)="ondataBound()"

(enginePopulated)="afterEnginePopulate($event)" [gridSettings]="gridSettings">

</ejs-pivotview>

app.component.ts

ondataBound(): void {

this.fieldlistObj.treeViewModule.fieldTable.sortOrder = "Ascending";

}

We hope the above sample meets your requirements. Please let us know if you have concern.

Regards,

Saranya Sivan.

Michael Evans · Answer

Just wanted to update - this did work, however the sort indicator still showed that it was unsorted (the first of the 3 icons was still colored instead of the "Sort Ascending" one). Not a big deal but I thought I would point it out.

Saranya Sivan · Answer

Hi Michael, 
  
Thank you for the reply 
  
Based on your requirement we have prepared a sample to highlight the sort indicators.Please check the below sample for your reference. 
  
Sample:  https://stackblitz.com/edit/angular-gvbpg2-ge82qs?file=app.component.html 
  
Code Example: 
  




  
ondataBound(): void { 
    this.fieldlistObj.treeViewModule.fieldTable.sortOrder = "Ascending"; 
    if ( 
      document 
        .querySelector("#PivotFieldList .e-icons.e-sort-none.e-selected") 
        .classList.contains("e-selected") 
    ) { 
      document 
        .querySelector("#PivotFieldList .e-icons.e-sort-none") 
        .classList.remove("e-selected"); 
    } 
    if (document.querySelector("#PivotFieldList .e-icons.e-sort-ascend")) 
      document 
        .querySelector("#PivotFieldList .e-icons.e-sort-ascend") 
        .classList.add("e-selected"); 
  }   
  
We hope the above sample meets your requirements. 
  
Regards, 
Saranya Sivan.