对 kendo-angular 下拉列表中的项目进行分组答案

【问题标题】：grouping items on kendo-angular dropdownlist对 kendo-angular 下拉列表中的项目进行分组
【发布时间】：2017-06-27 16:27:48
【问题描述】：

如何将项目分组以显示在kendo-dropdownlist 中？我一直在尝试将它与来自kendo-data-query 的groupBy 结合起来——groupBy 本身可以工作，但即使没有错误，列表也显示为空（即：没有项目）。

这是我的组件：

import { Component } from '@angular/core';
import { groupBy } from '@progress/kendo-data-query';

@Component({
    selector: 'app-header-channels',
    templateUrl: './header-channels.component.html'
})
export class HeaderChannelsComponent {
    public listItems: Array<{ text: string, value: number, type: string }> = [
        { text: '4 Cantos', value: 1, type: 'Operators' },
        { text: 'CVC', value: 2, type: 'Operators' },
        { text: 'Channel 3', value: 3, type: 'Agencies' }
    ];

    public selectedItem: { text: string, value: number, type: string } = this.listItems[1];

    public data;

    constructor() {
        this.data = groupBy(this.listItems.slice(), [{ field: 'type' }]);
    }

    handleFilter(value) {
        this.data = groupBy(this.listItems.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1), [{ field: 'type' }]);
    }
}

这是我组件的模板：

<kendo-dropdownlist
    [data]="data"
    [filterable]="true"
    [textField]="'text'"
    [valueField]="'value'"
    [(ngModel)]="selectedItem"
    (filterChange)="handleFilter($event)">
</kendo-dropdownlist>

我正在为此头疼......

【问题讨论】：

据我所知，Angular 的 Kendo DropDownList 不支持分组数据。它只能呈现平面数据列表。最好的想法是在这里发布您的想法 - kendoui-feedback.telerik.com/forums/…
是的，你说得对，我一直在寻找解决方案，文档指出“数据必须以类似数组的列表形式提供”。我会听从你的建议。

标签： angular kendo-ui-angular2

【解决方案1】：

我对此进行了很多调查，发现目前无法对将显示在kendo-dropdownlist 中的数据进行分组。 kendo Ui for Angular Docs 声明“必须在类似数组的列表中提供数据。”。

现在我已经设法使用kendoDropDownListItemTemplate 来解决这个问题，以实现不想要的结果（视觉上）。

我已将“第一个”booleanproperty 添加到数组中的对象中：

public listItems: Array<{ text: string, value: number, type: string, first?: boolean }> = [
  { text: '4 Cantos', value: 1, type: 'Operators', first: true },
  { text: 'CVC', value: 2, type: 'Operators' },
  { text: 'Operator 3', value: 2, type: 'Operators' },
  { text: 'Operator 4', value: 2, type: 'Operators' },
  { text: 'Channel 3', value: 3, type: 'Agencies', first: true },
  { text: 'Another Agency', value: 3, type: 'Agencies' }
];

然后在我的模板文件中，我将检查这一点并相应地显示组标题：

<ng-template kendoDropDownListItemTemplate let-dataItem>
  <span class="test-item">
    {{dataItem.text}}
    <span class="k-group test" *ngIf="dataItem.first">{{ dataItem.type }}</span>
  </span>
</ng-template>

以及用于目的的样式（当然）：

.test-item{
   display: block;
   width: 100%;
   position: relative;
}
.test-item > .k-group {
    font-size: 10px;

    background: #ebebeb;
    color: #3f51b5;
    border-bottom-left-radius: 1px;

    display: block;
    position: absolute;
    top: -2px;
    right: 0;
    padding: 0 .5em;
    line-height: 1.8;
}

我实现了我想要的视觉效果：

这个解决方法的问题是数组中的对象在定义为 dropdownList 数据之前必须正确排序和组织，确保 first 的项目987654332@ 始终排在第一位，然后是同一 type 内的所有其他项目。

【讨论】：