Customizing templates (Kendo UI Grid: Auto Complete)

This blog is help to you to load data from database in editable list manner. Here if you press any letter and any match found in database then it display you the list of that data.

Following are the Kendo dependency, so first have to include all files.

Following steps are guiding you for how to make column as AutoComplete column.

• 1) Create one div tag. And give id to it(e.g. id="grid")

• 2) Simply write your javascript for “Kendo UI Grid”

• 3) Here now when you write columns attribute of kendoGrid at that time give
      editor to that field which you want to load automatically when press any
      character.

  • 

  • You can observe that in 2nd column write different function in editor and in 3rd and 4th column we write same function.

  • Reason behind this is, we used only one auto complete widget for two different column which have same working to load images but have different usage one for supplier and other for product. Using template configuration, you do this. Simply write your field name in template and in editor call same function.

• 4) Now create function which you declared in the column attribute.

  • In this function, create HTML input tag for data. Bind that data using data-bind attribute of HTML input tag. Input tag, data-bind attribute is used to bind your field (column) with data-source.

  • Here two different functions are made. Where one function is to load data(text) automatically and other for image.

  • 

  • If you want to make column as required field then see in first function, used “required” attribute in input tag and also used name attribute. After kendoAutoComplete one span is write to display validation message and append that span into the current container. In this span specify the “data-for”.

  • Here it is used to display message for “SupplierName”.

  • Now to add image tag used template configuration of “.kendoAutoComplete ” write your HTML image tag in it. In Image tag, provide the link between “ ” from where your images are loaded. And if you pass any value in query-string then used #: value #.

Reference: Kendo UI Grid(AutoComplete)