Angular 2 kendo grid sort on click

Question

I would like to sort the kendo grid on a dropdown list change event containing its columns. Can I apply sorting functionality on drop down change?

Answer 1

The Grid state (skip, take, sort, filter...) configuration can be bound to a State object that in turn can be modified in the DropDownList valueChange event handler, e.g.:

<kendo-grid
    [data]="gridData"
    [pageSize]="state.take"
    [skip]="state.skip"
    [sort]="state.sort"
    [filter]="state.filter"
    [sortable]="true"
    [pageable]="true"
    [filterable]="true"
    (dataStateChange)="dataStateChange($event)"
>
...
<kendo-dropdownlist 
  [data]="dropDownData"
  (valueChange)="onDropDownChange($event)"></kendo-dropdownlist>
...
public onDropDownChange(e){
  this.state.sort = [{
    field: e,
    dir: 'asc'
  }];

  this.gridData = process(sampleProducts, this.state);
}

EXAMPLE