Assign HTML5 placeholder in dropdown filter input

5 posts, 0 answers
  1. Sylvain
    Sylvain avatar
    24 posts
    Member since:
    Feb 2011

    Posted 06 Nov 2015 Link to this post

    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.

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 10 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Sylvain
    Sylvain avatar
    24 posts
    Member since:
    Feb 2011

    Posted 10 Nov 2015 Link to this post

    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 

  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 12 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Sylvain
    Sylvain avatar
    24 posts
    Member since:
    Feb 2011

    Posted 12 Nov 2015 in reply to Georgi Krustev Link to this post

    Thanks
Back to Top
Kendo UI is VS 2017 Ready