Search code examples
angularkendo-ui-angular2

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


I am using Kendo UI with Angular 5. And I wanted to use Kendo's Multiselect component to enable user insert custom text values. By default, this component lists dropdown options or displays "No data found" message, if no dropdown data is present.

In my case, their is no dropdown data. And unnecessary to display the No-Data Template. Can anyone please tell me any possibility to disable/hide the No-Data Template?

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

Thanks in advance.


Solution

  • In case anyone is looking for similar feature, I have got response from Telerik team. The No-Data Template can be hidden using CSS having set ViewEncapsulation to none.

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