Kendo DropDownList Search on template modified text

Question

I am unable to get the built-in search for Kendo DropDownList to use the templated text instead of the raw text from the dataSource. I want to strip off the leading slash from the dataSource name for display, value, and search purposes.

<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [ "/Apples", "/Oranges" ],

  // None of these templates appear to fix the search text.  
  // Kendo is using the dataSource item to search instead of the template output.
  // I want to be able to search using 'a' (for Apples) or 'o' (for Oranges).  
  // If I use '/' then it cycles through the items which proves to me that the search is not using templated text.

  template: function(t) { return t.name.slice(1); },
  valueTemplate: function(t) { return t.name.slice(1); },
  optionLabelTemplate : function (t) { return t.name.slice(1); },

});
</script>

Here is a non-working sample in Kendo's UI tester:

http://dojo.telerik.com/@Jeremy/UvOFo

I cannot easily alter the dataSource on the server side.

If it's not possible to change how the search works then maybe there is a way to alter the dataSource after it's been loaded into the client from the server?

Answer 1

I'm not sure if this will help you at all, but I was able to force it to work. The control allows for you to subscribe to the filtering event on init. From here, you can set the value of the filter before it is submitted.

<script>
$("#dropdownlist").kendoDropDownList({
    dataSource: ["/Apples", "/Oranges"],
    template: function(t) { return t.slice(1); },
    valueTemplate: function(t) { return t.slice(1); },
    optionLabelTemplate : function (t) { return t.slice(0); },
    filter: "startswith",
    filtering: function(e) {
        e.filter.value = '/'+e.filter.value;
    }
});
</script>