Пользовательский интерфейс Kendo для угловой колонки пользовательской сортировки - PullRequest
Новая
       4

Пользовательский интерфейс Kendo для угловой колонки пользовательской сортировки

0 голосов
/ 25 июня 2018

У меня есть следующий столбец в таблице Kendo (пользовательский интерфейс для Jquery) со специальным методом сортировки, основанным на потребностях моих клиентов. 

field: "daysLeft",
title: "Accessible",
width: 130,
sortable: {
  compare: function (a, b, descending) {
    if (a.daysLeft == 'Not started') return 1;
    if (b.daysLeft == 'Not started') return -1;
    if (a.end < b.end) return -1;
    if (a.end > b.end) return +1;
    return 0;
  }
}

Я построил ту же сетку в пользовательском интерфейсе Kendo дляAngular, использующий Angular 6, и я получил все для работы, кроме вышеописанного метода сортировки.Все остальные столбцы используют стандартную сортировку. 

<kendo-grid class="m-2"
[data]="view"
[pageSize]="pageSize"
[skip]="skip"
[pageable]="gridSettings()"
filterable = "menu"
[filter]="state.filter"
[height]="450"
[sortable]="{
  allowUnsort: true,
  mode: multiple ? 'multiple' : 'single'
}"
[sort]="state.sort"
(pageChange)="pageChange($event)"
(dataStateChange)="dataStateChange($event)"
>

Моя текущая функция dataStateChange: 

public dataStateChange(state: DataStateChangeEvent): void {
  this.state = state;
  this.view = process(this.items, this.state);
}

Возможно ли это сделать в пользовательском интерфейсе Kendo для Angular?

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Ответ h3li0s очень помог мне, ему нужно несколько настроек, например: 

public sortChange(sort: SortDescriptor[]): void {
    sort.map((item) =>
    {
        if (item.field == "daysLeft")
        {
            if (item.dir === undefined) {
                this.view.data = this.items;
            } else {
                var data = this.view.data.sort((a, b) => {
                    var aend = parseInt(a.end.substr(6));
                    var bend = parseInt(b.end.substr(6));
                    if (a.daysLeft == 'Not started') return +1;
                    if (b.daysLeft == 'Not started') return -1;
                    if (aend < bend) return -1;
                    if (aend > bend) return +1;
                    return 0;
                 });
            if (item.dir === "desc") {
                data = data.reverse();
            }
            this.view.data = data; 
            this.sort["dir"] = item.dir;
         } else {
             this.sort = sort;
             this.loadData();
         }
    });
}

и не забывайте банан в коробке для данных и сортируйте в html как: [(Вид)] = "сортировать"

0 голосов
/ 26 июня 2018

Поскольку, по-видимому, это в настоящее время недоступно, я написал временное решение для моей конкретной проблемы. Размещение здесь, если это может кому-то помочь.

в своей сетке я добавил: 

(sortChange)="sortChange($event)"

И моя функция sortChange выглядит так: 

public sortChange(sort: SortDescriptor[]): void {
  sort.map((item) =>
  {
    if (item.field == "daysLeft")
    {
      if(item.dir === undefined) this.view.data === this.items;
      var data = this.view.data.sort((a, b) => {
      var aend = parseInt(a.end.substr(6));
      var bend = parseInt(b.end.substr(6));
      if (a.daysLeft == 'Not started') return +1;
      if (b.daysLeft == 'Not started') return -1;
      if (aend < bend) return -1;
      if (aend > bend) return +1;
      return 0;
    });
    if(item.dir === "desc") {
      data = data.reverse();
    }
     this.view.data = data; 
  }
 });
}

this.view - мой объект GridDataResult

...