how to search text in kendo dropdown list?

Question

My dropdownlist works fine, but I would like to have something like edit field where user can search values. Can somebody help me? It is in the column of the kendo grid. Here is a code of my dropdownlist. Cheers!

{
    field: "Material",
    title: txt.TXT_MATERIAL,
    width: "15%",
    filterable: {
      ui: function (element) {
          kendoOdsMaterials.setFilterUi(element, undefined);
      }
    },
    editor: function (container, options) {
      if (PCommonPortalMethods.GetSiteLanguage() == "en") {
          $('<input kendo-drop-down-list  k-data-text-field="\'MaterialGlobalName\'" k-data-value-field="\'_Key\'" data-bind="value:' + options.field + '" k-data-source="dataSourceKendoOdsMaterials(undefined)" />').appendTo(container);
      } else {
          $('<input kendo-drop-down-list  k-data-text-field="\'MaterialLocalName\'" k-data-value-field="\'_Key\'" data-bind="value:' + options.field + '" k-data-source="dataSourceKendoOdsMaterials(undefined)" />').appendTo(container);
      }

    },
    template: "#if (PCommonPortalMethods.GetSiteLanguage() == 'en') {# #=Material.MaterialGlobalName# # } else { # #=Material.MaterialLocalName#  # } #"

},

Solution 1

its called filter

add this to your items

data-filter="contains"

look here https://jsfiddle.net/cmstern/thhdzzpq/4/

Solution 2

Try using the ComboBox. It works just like the DropDownList, but you can type and search the list as well.

http://demos.telerik.com/kendo-ui/combobox/index

Comments

[Aviator]

tried to use this function, and call it in a column like: template:"<div id='fabric'></div>" but it doesn't work, i can choose only option for the first row, others are [Object object], textfields.