Assign HTML5 placeholder in dropdown filter input

[Sylvain]

I have a dropdown with serverSideFiltering set to true. How can I set the HTML5 placeholder attribute on the filter input element?

 

I hack would be to set it using jquery with...​

jQuery($0).attr('placeholder', '​some value')

 ...but I have multiple dropdowns in my page and therefore I have multiple elements matching

$('.k-list-filter>.k-textbox')

so I don't know which one belongs to a specific dropdown.

[Georgi Krustev]

Hello Sylvain,

Currently, the widget does not expose an option that allows to define the filter input placeholder attribute. For now, you will need to add the attribute manually using jQuery.

I will log this request in our product backlog and will include a way to define the attribute using a dedicated option.

Regards,
Georgi Krustev
Telerik

 

 

[Sylvain]

Hi Georgi,

Thanks for confirming that the widget does not expose the option. ​But you have have a not told me how to target the specific element using j​Query if I have multiples dropdowns on my page.

Thanks 

[Georgi Krustev]

Hello Sylvain,

Please excuse me for missing the actual question in your first post.

You can target the filter textbox to a particular dropdownlist using either popup id or widget's instance. Here are both approaches:

• Target textbox using popup id:

  <input id="ddl" />
  <script>
    $(function() {
       $("#ddl").kendoDropDownList({ ... });
  
       var input = $("#ddl-list").find("input"); //note that ddl-list is automatically generated based on the widget's id
    });
  </script>

• Target using widget's instance:

  <input id="ddl" />
  <script>
    $(function() {
       var ddl = $("#ddl").kendoDropDownList({ ... }).data("kendoDropDownList");
  
       var input = ddl.list.find("textbox");
    });
  </script>

Regards,
Georgi Krustev
Telerik

 

 

[Sylvain]

Thanks