CODEWITHSUNDEEP
angularkendo-grid
LanceM
LanceM

Reputation: 1988

Sorting by propery of object in Kendo Angular Grid

I have an Kendo Angular grid and one of the columns is bound to an object so the editor is a dropdown list. I would like to sort by a property of this object not the object itself but don't see any obvious way to do this. I was looking for a "sortby" property in the kendo-grid-column so I could enter something like "CabinetSupplier.Name" (CabinetSupplier is the object and Name is the property). Below is my column configuration:

<kendo-grid-column field="CabinetSupplier" title="Cabinet Supplier" sort>
 <ng-template kendoGridFilterCellTemplate let-filter>
  <kendo-dropdown-filter [filter]="filter"
                         [data]="cabinetsService.cabinetSuppliers | filter:[{Disabled: false}]"
                         textField="Name"
                         valueField="Id"
                         (filterSelectionChange)="handleFilterSelectionChange($event)"
                         filterBy="CabinetSupplier.Id">
  </kendo-dropdown-filter>
 </ng-template>
 <ng-template kendoGridCellTemplate let-dataItem>
  {{dataItem.CabinetSupplier.Name}}
 </ng-template>
</kendo-grid-column>

I am hoping for a generic solution not something like:

protected sortChange(sort: SortDescriptor[]): void
{
    sort.map((item) =>
    {
        if (item.field == "CabinetSupplier")
        {
            item.field = "CabinetSupplier.Name";
        }
    });

    this.sort = sort;
}

Which as well as being non-generic, I would have to account for the fact that each time you click on the header it is trying to sort by CabinetSupplier so a new sort is created which would need to be deleted and CabinetSupplier.Name sort changed. Also the arrow indicators next to the field header do not appear as these would appear next to a field called CabinetSupplier not CabinetSupplier.Name.

Please help.

Upvotes: 1

Views: 3019

Answers (2)

LanceM
LanceM

Reputation: 1988

I got the answer from Telerik's excellent support team so I will share in case it helps anyone else. They said that the column's field setting is used for operations such as sorting, filtering and grouping, so in my scenario I should set it to CabinetSupplier.Name. As I am using templates to display/edit the data I will still get the object as the value coming across to the code.

Upvotes: 2

CharanRoot
CharanRoot

Reputation: 6325

you need sortChange sortable In your grid.

[sortable]="{
            allowUnsort: allowUnsort,
            mode: multiple ? 'multiple' : 'single'
            }"
          [sort]="sort"
          (sortChange)="sortChange($event)"

Inside sortChange function you do your sortby using CabinetSupplier.Name

more info http://www.telerik.com/kendo-angular-ui/components/grid/sorting/

Upvotes: 1

Related Questions