This is a migrated thread and some comments may be shown as answers.

Keyboard Filter DropDownList without expanding

9 Answers 135 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
PrimePay
Top achievements
Rank 1
PrimePay asked on 12 Aug 2015, 08:27 PM

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.

 

 

9 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 17 Aug 2015, 07:19 AM
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!
 
0
PrimePay
Top achievements
Rank 1
answered on 17 Aug 2015, 02:21 PM

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)
)​

0
Alexander Valchev
Telerik team
answered on 19 Aug 2015, 08:04 AM
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!
 
0
PrimePay
Top achievements
Rank 1
answered on 19 Aug 2015, 12:49 PM
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.
0
Alexander Valchev
Telerik team
answered on 21 Aug 2015, 10:09 AM
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!
 
0
PrimePay
Top achievements
Rank 1
answered on 21 Aug 2015, 02:31 PM

 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).
0
Accepted
Georgi Krustev
Telerik team
answered on 25 Aug 2015, 03:35 PM
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!
 
0
PrimePay
Top achievements
Rank 1
answered on 02 Sep 2015, 04:02 PM

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.

0
Georgi Krustev
Telerik team
answered on 04 Sep 2015, 10:31 AM
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!
 
Tags
DropDownList
Asked by
PrimePay
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
PrimePay
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or