Post
Ask Question

Kendo Combo Box with Angular in MVC Razor

  1. <select kendo-combo-box   
  2.    id="AnyID"   
  3.    k-data-text-field="'Key'"   
  4.    k-data-value-field="'Value'"   
  5.    k-filter="'contains'"   
  6.    ng-disabled="true"   
  7.    k-auto-bind="true"   
  8.    k-min-length="3"   
  9.    k-ng-model="model.ComboProperty"   
  10.    k-on-change="FunctionName()"   
  11.    style="width:73%;">
  12. </select>   
As you see the above snippet, the element is same as Select with the different pre-defined attributes for kendo and Angular.

  • kendo-combo-box - Defines the kendo combobox to be displayed on the UI.
  • k-data-text-field - Defines the text value for the combo box data.
  • k-data-value-field - Defines the value field for the combo box data.
  • k-filter - As we know in combo box, we can take user input for few letters and then the data source gets filtered.
  • ng-disabled - Angular attribute to disable the combo box on first load.
  • k-auto-bind - Defines the property auto bind for the data source of combo box.
  • k-min-length - Defines the minimum characters to be input to auto complete the filter.
  • k-ng-model - Here instead of normal Angular attribute, ng-model, k-ng-model is used in order to set the kendo combo box model property. This by default takes the k-data-value-field.
  • k-on-change - This function is triggered when the change event is fired. Instead of ng-change which by default will require ng-model attribute, we use k-on-change.

Hope this simple snippet comes in handy for developers using kendo and Angular. Similar can be used for Kendo Drop down list as well.