Custom sorting with filters enabled

[vippin chandhar]

I have a kendo grid which is filterable.  I need sorting enabled as well.  Achieved it by using "[sortable]="true"" (I do not need multi-column sort). 

Now I am trying to implement sorting with nulls last i.e. for both the sort orders (asc & desc), I need the nulls to appear last.  

All the materials I found so far explains custom sort using "(sortChange)="sortChange($event)". For this we need the data to be bound using [data].  But using [data] is not an option for me as I need the filtering option enabled as well. (As per this link, for the filters to work, [kendoGridBinding] needs to be used - [data]  cannot be used)

Please assist me to implement custom sorting. 

<kendo-grid [filterable]="true" 
                        [sortable]="true" 
                        [pageable]="true" 
                        [kendoGridBinding]="dataSource"
                        (dataStateChange)="onDataStateChange($event)" 
                        (cellClick)="onCellClick($event)">

[Svet]

Hi Vippin,

Thank you for the provided details.

It is possible to use filtering with sorting and the other data operations such as paging and groping when using the [data] binding. In that case the (dataStateChane) even should be handled and the data should be processed according to the current state of the Grid. Please check the example from the following article demonstrating such setup:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/#toc-filter-row

In your case in order to implement custom sorting with default filtering then it would be required to check if there is some sorting applied. If there is then the data should be sorted manually. Then the sorted data should be passed to the process() function as a first parameter in order to apply the filtering to it as well. The state passed as a second parameter to the process() function shouldn't include the current sort of the Grid in order to avoid the default sorting functionality as the data should have already been manually sorted. The referenced example above would have to be modified in similar way to the following way:

  public dataStateChange(state: DataStateChangeEvent): void {
    this.state = stater;

    if (state.sort) {
      //TODO sort the data manually
    }
    //use the manually sorted data as a first param passed to the process function
    this.gridData = process(sampleProducts, {filter: this.state.filter});
 }

I hope the provided suggestions point you in the direction.

Regards,
Svetlin
Progress Telerik