Adding New Items

The DropDownList enables you to render a button for adding new items when the search results do not match the filtering conditions of the user.

To display a button for adding non-existent items, use the kendoDropDownListNoDataTemplate directive and implement the dataItem (addNew) function.

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist style="width:400px;"
        [data]="data"
        [filterable]="true"
        [textField]="'text'"
        [valueField]="'value'"
        (filterChange)="handleFilter($event)"
    >
        <ng-template kendoDropDownListNoDataTemplate>
          <div>
              No data found.
              <ng-container *ngIf="filter">Do you want to add new item - '{{ filter }}' ?</ng-container>
              <br />
              <button *ngIf="filter" class="k-button" (click)="addNew()">Add new item</button>
          </div>
        </ng-template>
    </kendo-dropdownlist>
  `
})
export class AppComponent {

    public filter: string;

    public source: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public data: Array<{ text: string, value: number }>;

    constructor() {
        this.data = this.source.slice(0);
    }

    public addNew(): void {      
      this.source.push({
        text: this.filter,
        value: 0
      });      
      this.handleFilter(this.filter);
    }

    public handleFilter(value) {
        this.filter = value;
        this.data = this.source.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1);
    }

}

In this article