Sort by different field.

[Sarvana]

I have an EJS grid with Employee name and Employee Id. Am displaying the Employee name by 'FirstName + MiddleName + lastName '. this displaying fine. I need to display the 'lastName + MiddleName+ FirstName' when click for sorting. Below I have pasted my code for your reference. In the below code the field name 'fullNameForDisplayInGrid' I need to sort when clicking on the column header.

<ejs-grid #addEmployeeGrid class="px-0 mt-2" allowTextWrap='true' [dataSource]='empdatasource'

[allowPaging]='true' [pageSettings]='pageSettings' [toolbar]='toolbar'

[filterSettings]='filterSettings' allowSorting='true' [sortSettings]='activesortOptions'>

<e-columns>

<e-column field='employeeId' headerText='EmployeeId' style="font-weight: 500;"

[visible]="false">

e-column>

<e-column field='fullNameForDisplayInGrid' headerText='EMPLOYEE' width='40%'

style="font-weight: 500;">

e-column>

<e-column field='jobs' headerText='JOBS' width='60%' title="Jobs"

style="font-weight: 500;">

e-column>

e-columns>

ejs-grid>

[Vignesh Sivagnanam]

Hi Sarvana 

  

Greetings from Syncfusion support 

  

We have validated your query and understand that you want to perform sorting operation in the grid. By default, in EJ2 Grid all grid actions(paging, sorting, filtering, etc.,) are performed based on the dataSource value only.  

  

We have suspect that you are customize the values displayed in the grid and this is the reason that the sorting operation are not performed in the grid. The sorting will not be performed based on the values that are displayed, since it used for display purpose only. 

 

if you want to customize the sorting operation in the grid on your own, you need to write the logic for sorting in the grid.  

  

If perform custom sorting in the Grid component, you can use sortComparer property of the grid column to achieve your requirement. Please refer the below documentation for more information. 

  

In the below documentation using sortComparer we have showed null values always at the bottom. Similarly using sortComparer you can apply your own logic for performing custom sort action. 

  

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/display-null-values-at-bottom/ 

  

Please let us know if you need further assistance. 

  

Regards, 

Vignesh Sivagnanam