在没有无数据模板的情况下使用 Kendo UI 多选 - Angular 2+

Question

我正在使用 Kendo UI 和 Angular 5。我想使用 Kendo 的多选组件来允许用户插入自定义文本值。默认情况下，如果不存在下拉数据，此组件会列出下拉选项或显示 "No data found" 消息。

在我的例子中，他们没有下拉数据。无需显示无数据模板。谁能告诉我 disable/hide 无数据模板的任何可能性？

<kendo-multiselect
 formControlName="emails"
 [value]="selectedEmails"
 [allowCustom]="true"
 (valueChange)="onEmailsChange($event)" >                            
</kendo-multiselect>

提前致谢。

Answer 1

如果您不想要 "No Data found" 消息，您可以使用 kendoMultiSelectNoDataTemplate 并将其留空

<kendo-multiselect [data]="listItems">
   <ng-template kendoMultiSelectNoDataTemplate>
   </ng-template>
</kendo-multiselect>

Plunkr

Answer 2

如果有人正在寻找类似的功能，我已收到 Telerik 团队的回复。可以使用 CSS 将 ViewEncapsulation 设置为 none 来隐藏 No-Data 模板。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
   selector: 'my-app',
   template: `
      <div class="example-config">
      Current value: {{value | json}}
      </div>
      <div class="example-wrapper">
      <p>Favorite sport:</p>
      <kendo-multiselect 
         [allowCustom]="true"
         [(ngModel)]="value" >
      </kendo-multiselect>
      </div>`,
   styles:[`
     .k-nodata, .k-nodata .ng-star-inserted {  display: none   }
   `],
   encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public value;
}

Answer 3

您还可以向弹出窗口添加自定义 class 并使用 CSS 隐藏它。这是一个在 emails 为空时附加 class .k-custom-popup--hidden 的示例。

HTML

<kendo-multiselect
 formControlName="emails"
 [value]="selectedEmails"
 [allowCustom]="true"
 (valueChange)="onEmailsChange($event)"
 [data]="listItems"
 [popupSettings]="{popupClass: !emails.length ? 'k-custom-popup--hidden' : ''}">                            
</kendo-multiselect>

CSS（全局）

.k-custom-popup--hidden {
 display: none;
}

在没有无数据模板的情况下使用 Kendo UI 多选 - Angular 2+

Using Kendo UI Multiselect without No-Data Template - Angular 2+

kendo-ui-angular2

angular

Plunkr