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

Question

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.

cyberpirate92 · Accepted Answer · 2018-03-28 05:43:38Z

1

If you don't want the "No Data found" message, you can use the kendoMultiSelectNoDataTemplate and keep it empty

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

Plunkr

answered Mar 28, 2018 at 5:43

cyberpirate92

3,1865 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nate Getch Over a year ago

I have tried that. But have you noticed the blank dropdown box when making kendoMultiSelectNoDataTemplate empty ? My goal is only to show custom values added in that dropdown.

Senne · Accepted Answer · 2019-10-01 10:27:05Z

1

You can also add a custom class to the popup and hide it with CSS. Here's an example that appends the class .k-custom-popup--hidden when emails is empty.

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 (Global)

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

answered Oct 1, 2019 at 10:27

Senne

4834 silver badges14 bronze badges

Comments

Nate Getch · Accepted Answer · 2018-03-29 19:12:17Z

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

Mickaël P · Accepted Answer · 2023-01-13 14:09:17Z

0

You can use kendo-multiselect-messages tag to change the text.

Example :

<kendo-multiselect
  [data]="[items]">
  <kendo-multiselect-messages noDataText="No data on XXXXX"></kendo-multiselect-messages>
</kendo-multiselect>

answered Jan 13, 2023 at 14:09

Mickaël P

3651 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Plunkr

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related