How to show hints in the dropdownlist popup

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

    Posted 29 Jul 2015 Link to this post

    I have a DropDownList with serverFiltering. I need a way to show hints to the user as he types. I'd like the hint to show right below the filter box. I have ​several use cases in mind:

    • Please type 5 more characters...
    • Showing 20 first matches or 12,000. Please refine criteria to get more relevant results.
    • No records match your criteria.

    I there a way do that?

    Thanks

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 03 Aug 2015 Link to this post

    Hello Sylvain,

     

    Straight to your questions: 

     

       1. In order to avoid sending a request to the server before user types the minimum number of characters you can set minLength property. In order to show hints you can bind the keypress event to the input field. 

     

        2 and 3.In order to achieve such behavior you can use the DropDownList dataBound event. To execute your custom logic only when the data source is filtered you can check whether there are any filters set using the filter method of the data source and get the filters. 

     

    Regards,
    Boyan Dimitrov
    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 03 Aug 2015 in reply to Boyan Dimitrov Link to this post

    Thanks for your answer but how do I put this hint inside the dropdown? I see that there is customizable header (headerTemplate) but how would I pass the data?
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 05 Aug 2015 Link to this post

    Hello Sylvain,

    I would like to clarify that there is no way to send data to the header template. In order to achieve the desired behavior I would suggest using jQuery to manipulate the header template DOM element and show the hints.

     The header element has a class "dropdown-header", so it could be accessed by its class name and manipulated.

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready