Specify custom sorting function for each column in kendo-grid-column

[Jyothi]

Hi,

Is there a way to specify sorting for each column say as an option to kendo-grid-column? Data is populated dynamically from the database. 

We are using Angular 6

Example:

    <kendo-grid #someRef [data]="gridData" [scrollable]="gridSettings.scrollable" [resizable]="gridSettings.resizable"
      [pageable]="gridSettings.pageable || false" [filterable]="gridSettings.filterable" [selectable]="gridSettings.selectable"
      [sortable]="gridSettings.sortable" [pageSize]="gridState.take" [skip]="gridState.skip" [filter]="gridState.filter" [sort]="gridState.sort"
      [style.maxHeight]="gridSettings.maxHeight" (dataStateChange)="onChangeDataState($event)" (selectionChange)="emitSelection($event)">
      <ng-template ngFor [ngForOf]="gridSettings.columns" let-i let-column>

        <kendo-grid-column-group *ngIf="column.columns" [title]="column.title" [headerClass]="'col-title ' + column.headerClass">
          <ng-template ngFor [ngForOf]="column.columns" let-i let-column>
          
            <kendo-grid-column *ngIf="ColumnType.Text === column.type" [field]="column.field" [title]="column.title" 
              <ng-template kendoGridHeaderTemplate let-dataItem>
                <span class="k-link" [title]="dataItem.title" (click)="$event.target.parentElement.click()">
                  {{ (column.titleAccessor != null) ? column.titleAccessor(dataItem, dataItem.title) : dataItem.title }}
                </span>
              </ng-template>
              <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                <div cell [title]="dataItem[column.tooltipField || column.field] | facetsData">
                  {{ (column.fieldAccessor != null) ? column.fieldFormat(dataItem, dataItem[column.field]) : dataItem[column.field] | facetsData
                  }}
                </div>
              </ng-template>
            </kendo-grid-column>

The problem is  for one of the fields, the data has some string and date embedded in it. example: "12345678|08/23/2019" for example. 

The data is correctly displayed as 08/23/2019 as defined by the fieldFormat function. But the sorting doesn't work. The data passed into the default kendo sort function still has ""12345678|08/23/2019" (we cannot change the data coming back from server. Not an option.)

Is there a way we can pass a sort function for the columns that require custom sorting. Like if that function is present use it kind of.

I did look at the example at https://www.telerik.com/kendo-angular-ui/components/grid/sorting/ . But this is for all the columns. 

Regards,

[Svet]

Hi Jyothi,

Thank you for the provided details.

Sorting is performed based on the data passed to the Grid. Thus, if the string "12345678|08/23/2019" is passed to a column cell then it will be used for sorting. Currently, there is no feature that would allow to pass a custom function for the sorting of a column. What could be done at this point is to log a new feature request, outlining the details of the requirement, in our public Feadback Portal, so that we can evaluate the demand for the requested functionality and eventually provide it in a future release of Kendo UI for Angular:
https://feedback.telerik.com/kendo-angular-ui

Indeed, the only option the desired behavior can be achieved is to map the incoming data and create valid JavaScript dates for the desired column cells. 

Regards,
Svetlin
Progress Telerik