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
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
Rank 1
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))​.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)
)​
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
Rank 1
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
Rank 1
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).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
Rank 1
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.
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