Keyboard Filter DropDownList without expanding

10 posts, 1 answers
  1. PrimePay
    PrimePay avatar
    20 posts
    Member since:
    Feb 2015

    Posted 12 Aug 2015 Link to this post

    I am currently experiencing weird behavior while trying to perform a collapsed filter of a dropdownlist. By collapsed filter I mean typing the value of an item(s) that exist in the dropdownlist without expanding the list and selecting the filtered value when found. What  happens is that no matter how fast I type the dropdownlist only registers the first 3 characters typed. How can I ensure that it accepts more than the first 3 characters? Also how can this filtering to be done using "contains" instead of "startswith". I don't want to have an explicit filter input included in the dropdown so using the "filter" property is not ideal.

     

    Thank you.

     

     

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 17 Aug 2015 Link to this post

    Hi,

    The DropDownList widget does not provide 'collapsed filter' out of the box. How do you achieve this functionality? I am not sure why the widget registers only the first 3 characters. Did you set by any change the minLength configuration option?

    Also it is not clear how do you filter the DataSource. Could you please elaborate more?

    Regards,
    Alexander Valchev
    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. PrimePay
    PrimePay avatar
    20 posts
    Member since:
    Feb 2015

    Posted 17 Aug 2015 in reply to Alexander Valchev Link to this post

    Maybe "filter" is not the right word here, but this is an example you have for what I am asking

    http://demos.telerik.com/kendo-ui/dropdownlist/template

    When you have focus on the dropdown, without expanding it, if you start typing .e.g. "marti" you will notice that "Martine Rance" becomes the selected name from that dropdown. In your demo, if I am fast enough, I can even type more than 5 characters and have it registers correctly. 

     I already set the minLength on the dropdownlist

    Here is the code for the dropdown I am using:

    @(Html.Kendo().DropDownList()
     .Name("C​ustomerID")
     .BindTo((IEnumerable<​CustomerInfo>)ViewData["Customers"])
     .DataValueField("C​ustomerID")
     .DataTextField("CustomerNumber")
     .ValueTemplate("<div>#: ​formatData(data.CustomerNumber, data.​LastName) #</div>")
     .Template("<div>#: formatData(data.CustomerNumber, data.LastName) #</div>")
     .Delay(1500)
     .MinLength(6)
    )​
    @(Html.Kendo().DropDownList()
        .Name("C​ustomerID")
        .BindTo((IEnumerable<​CustomerInfo>)ViewData["Customers"])
        .DataValueField("C​ustomerID")
        .DataTextField("CustomerDescriptor")
        .ValueTemplate("<div>#: ​formatData(data.CustomerNumber, data.​LastName) #</div>")
        .Template("<div>#: formatData(data.CustomerNumber, data.LastName) #</div>")
        .Delay(1500)
        .MinLength(6)
    )​

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 19 Aug 2015 Link to this post

    Hello,

    Your code looks OK. Does the issue still persists if you remove the .Delay() and .MinLength() configuration options? This is the major difference between your implementation and the demo page that you referenced.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. PrimePay
    PrimePay avatar
    20 posts
    Member since:
    Feb 2015

    Posted 19 Aug 2015 in reply to Alexander Valchev Link to this post

    Yes the issue still persists if I remove Delay and MinLength, I actually added the Delay and MinLength as a potential remedy but to no avail.
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Aug 2015 Link to this post

    Hi,

    In order to determine what exactly goes wrong I will need a small but runnable test page which isolates the issue. In this way I will be able to determine what exactly goes wrong and assist you further.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. PrimePay
    PrimePay avatar
    20 posts
    Member since:
    Feb 2015

    Posted 21 Aug 2015 Link to this post

     Alexander,

    We were unable to reproduce this in a runnable file. However, this is an example of how we are binding the data to the widget along with 10 rows of data that we are getting. The DropDownList is located within a grid as an editor template.

     

    @(Html.Kendo().DropDownList()
        .Name("ClientDepartmentID")
        .BindTo((IEnumerable<EmployerDepartment_ForList>)ViewData["DepartmentList"])
        .DataValueField("ClientDepartmentID")
        .DataTextField("DepartmentCode")
        .ValueTemplate("<div>#: p2p.showValue(data.DepartmentCode, data.DepartmentName) #</div>")
        .Template("<div>#: p2p.showValue(data.DepartmentCode, data.DepartmentName) #</div>")
        .Events(e => e.Close("p2p.onDropDownClose"))
    )

    Sample Data:

         1. 00001 - test department

         2. 000100 - GRUNT

         3. 000101 - REGION 1 - AK

         4. 000102 - REGION 2 - AL

         5. 000103 - REGION 3 - AR

         6. 000104 - REGION 4 - AZ

         7. 000105 - REGION 5 - CA

         8. 000​200 - ZIP TIE INESPECTION

         9. 000​500 - Department 500

       10. 000​800 - SALES AND MARKETING

    The issue comes up when the user has the dropdown in focus. The user can begin to type numbers and the dropdown will select the entry who's DepartmentCode matches what the user is typing. However, it seems as if the user can only type three numbers before the "filter" maxes out. I would like to be able to type "0005" and have the selection go to "000500 - Department 500." Instead it starts cycling through every phrase since they all have "000" as the first part of the phrase. I know most browsers support this "select by typing" functionality but I didn't know that it could be limited. Is this a browser issue? Does the kendo widget limit that "filter" length based on configuration? I've provided the object the dropdownlist is being bound with.

    The EmployerDepartment_ForList object:

        Guid ClientDepartmentID

        Guid? ClientWorkLocationID

        string DepartmentCode

        string DepartmentName

        string WorkersCompClassCode

    The showValue function just returns the string (DepartmentCode + " - " + DepartmentName).
  9. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 25 Aug 2015 Link to this post

    Hi,

    In general, the "item search" functionality of the widget is implemented to toggle between items that start with the same character. Basically, we do not concatenate the typed value, if we find next item that starts with the same value. I will log this case for further investigation and possible improvement.

    I am afraid that for the time being there is no feasible workaround. The best solution will be to enable filtering. Thus the users will be able to type the text directly and reduce the list of available items easily.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. PrimePay
    PrimePay avatar
    20 posts
    Member since:
    Feb 2015

    Posted 02 Sep 2015 in reply to Georgi Krustev Link to this post

    Thank you Georgi, 

    If this functionality can be added as a future improvement that would be great, hopefully sooner rather than later. How can I track progress on this issue?

     I'll mark this topic as answered for now.

  11. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 04 Sep 2015 Link to this post

    Hi,

    I would suggest you share your feature request in our Feedback portal. Thus we will be able to gather community feedback for this feature. If it get enough interest, we will schedule it for further investigation.
    Until this is done, we will not be able to include this implementation in our roadmap.

    Regards,
    Georgi Krustev
    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