使用无无数据模板的Kendo多重选择角2+

Question

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

在我的例子中，它们不是下拉数据。也没有必要显示无数据模板。有谁能告诉我禁用/隐藏无数据模板的可能性吗？

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

提前谢谢。

Answer 1

如果有人正在寻找类似的功能，我已经得到了来自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 2

如果您不希望“未找到数据”消息，则可以使用kendoMultiSelectNoDataTemplate并将其保持为空

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

普朗克

Answer 3

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

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