Question

我正在使用Angular 5的Kendo UI。我想使用Kendo的Multiselect组件来启用用户插入自定义文本值。默认情况下，如果没有下拉数据，此组件将列出下拉选项或显示“未找到数据”消息。

在我的情况下，他们没有下拉数据。并且没有必要显示无数据模板。谁能告诉我任何禁用/隐藏无数据模板的可能性？

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

提前致谢。

Answer 1

如果您不想要＆＃34;未找到数据＆＃34; 消息，您可以使用kendoMultiSelectNoDataTemplate并将其保留为空

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

Plunkr

Answer 2

如果有人正在寻找类似的功能，我得到了Telerik团队的回复。可以使用将ViewEncapsulation设置为none的CSS隐藏无数据模板。

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

您还可以将自定义类添加到弹出窗口，并使用CSS将其隐藏。这是一个在.k-custom-popup--hidden为空时追加类emails的示例。

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 Multiselect - Angular 2+

3 个答案:

Plunkr