Question

如何对要在kendo-dropdownlist中显示的项目进行分组？我一直在尝试将它与groupBy中的kendo-data-query结合起来 - 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>

我正在打破这个......

Answer 1

我一直在调查这一点，并发现目前无法对将在kendo-dropdownlist中显示的数据进行分组。 kendo Ui for Angular Docs状态＆＃34;数据必须以类似数组的列表提供。＆＃34;。

现在我已经设法使用kendoDropDownListItemTemplate围绕此工作以达到令人厌恶的结果（视觉上）。

我已经添加了第一个＆＃39; boolean property我的数组中的对象为：

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;
}

我实现了我想要的视觉方面：

此workarround的问题是在将数组定义为dropdownList数据之前必须正确排序和组织数组内的对象，确保first项目type始终排在第一位，然后是同一type内的所有其他项目。

在kendo-angular下拉列表中对项目进行分组

1 个答案: