CODEWITHSUNDEEP
angularkendo-ui
Dhruv
Dhruv

Reputation: 645

How to set the "noDataTemplate" text for KendoUI Autocomplete in Angular when no data matches

The Kendo documentation for jQuery includes the feature to set the text for the autocomplete box when no data is found

but I can't make it work in Angular and can't find the right documentation. Need help to figure out which property to use. I have tried a couple of variations as follows:


    <kendo-autocomplete #contactslist [data]="contacts" class="contacts" valueField="label"
      [kendoDropDownFilter]="{operator: 'contains'}" [filterable]="true" placeholder="To: Email Adress*"
      (valueChange)="valueChange($event)" noDataText="blah">
    </kendo-autocomplete>



    <kendo-autocomplete #contactslist [data]="contacts" class="contacts" valueField="label"
      [kendoDropDownFilter]="{operator: 'contains'}" [filterable]="true" placeholder="To: Email Adress*"
      (valueChange)="valueChange($event)" [noDataText]="blah">
    </kendo-autocomplete>



    <kendo-autocomplete #contactslist [data]="contacts" class="contacts" valueField="label"
      [kendoDropDownFilter]="{operator: 'contains'}" [filterable]="true" placeholder="To: Email Adress*"
      (valueChange)="valueChange($event)" [noData]="blank">
    </kendo-autocomplete>

and also with [noDataTemplate]="blank"

The output I keep getting is: enter image description here

Appreciate any help!

Upvotes: 0

Views: 341

Answers (1)

Dhruv
Dhruv

Reputation: 645


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

@Component({
    selector: 'my-app',
    styles: ['.k-i-warning { font-size: 2.5em; } h4 { font-size: 1em;}'],
    template: `
      <kendo-autocomplete [data]="listItems">
          <ng-template kendoAutoCompleteNoDataTemplate>
              <h4><span class="k-icon k-i-warning"></span><br /><br /> No data here</h4>
          </ng-template>
      </kendo-autocomplete>
    `
})
export class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [];
}

Upvotes: 1

Related Questions