Hello,
I have been trying to to use arrow keys (up/down) to navigate among a drop-down list's values. However it did not seem to work, even though I was able to find various examples in the documentation. So, I came upon a discrepancy (I think):
Keyboard navigation works, if the drown-down list is created (in Razor) using Html.Kendo().DropDownList(). However, we are using Html.Kendo().DropDownListFor(). A major difference that I can see, is that the first approach creates a <select> HTML element, while the latter an <input>.
Is there a way to have keyboard navigation working with Html.Kendo().DropDownListFor() ?
Thank you very much.
8 Answers, 1 is accepted
I answered to the support thread opened on the same subject. Here is a quote of the asnwer:
Thank you for getting in touch with us. In general, the difference between strongly-typed extension (DropDownListFor) and non-strongly-typed extension (DropDownList) is very subtle. The first just retrieves the name and value from passed model and cakks the regular DropDownList with those values. In other words, DropDownListFor calls DropDownList extension. That being said, both generates HTML Input element. The MultiSelect extension is the only one that generates HTML Select element, other creates input elements.
The navigation works just fine for both extensions on our end. This can be observed in our online demos too. Would it be possible to send us a repro demo that demonstrates the depicted issue? Thus we will be able to observe the erroneous behavior locally and advice you further.
Regards,
Georgi Krustev
Telerik
Rank 1
Iron
Thank you for the reply. I will try to prepare some demo code for you.
In the meantime, and regarding the HTML elements created, please take a look at the two attached images. The screenshots are taken from http://demos.telerik.com/aspnet-mvc/dropdownlist/index.
The first screenshot is the keyboard navigation demo, where the component seems to be a select.
The second screenshot is the basic component, where the first drop-down seems to be an input element, but the second is select.
If all of the above should be input elements, do you think it is a browser (or developer tools) issue?
Here is a quote of the answer posted in the support thread opened on the same subject:
Our online demos for MVC/JSP/PHP use the very same JavaScript demos to demonstrate how the server wrappers should be declared. That is why all of our demos are consolidated. Basically, in all platforms (JavaScript/PHP/JSP/MVC) shared demos expose the same functionality. That is why I would suggest you just review the demonstrated declarations instead of debugging the rendered code.
If you would like to investigate deeply the rendered HTML, then I would suggest you refer to the offline demos that are bundled to the UI for ASP.NET MVC zip. You can find them in the installation folder of the wrappers.
Regards,
Georgi Krustev
Telerik
Rank 1
Iron
Hello,
As you have asked I am sending you two identical DropDownListFor that I have made.
In the first one, the function of the keyboard is right. In the second one the DropDown switches on and off and it makes it difficult for the operator.
As you will have noticed in the first one I use the function Filter("contains") because I have a lot of rows, while in the second one
I don't, because the number of the rows is about 10 !
1st DropDownListFor
<div class="col-md-2">
@(Html.Kendo().DropDownListFor(m => m.CompletedBy.Id)
.Name("CompletedBy.Id")
.DataTextField("FullName")
.DataValueField("Id")
.Filter("contains")
.AutoBind(true)
.OptionLabel(" ")
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("Employees_Read", "Candidate");
})
.Schema(schema =>
{
schema.Data("Data")
.Total("Total");
});
}).Deferred()
)
</div>
......
2nd DropDownListFor
<div class="col-md-2">
@(Html.Kendo().DropDownListFor(c => c.SearchCommunicationType.Id)
.Name("SearchCommunicationType.Id")
.DataTextField("Label")
.DataValueField("Id")
.AutoBind(true)
.OptionLabel(" ")
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("CommunicationTypes_Read", "Candidate");
})
.Schema(schema =>
{
schema.Data("Data")
.Total("Total");
});
}).Deferred()
)
</div>
As you know I am using Bootstrap/'s JavaScript with JQuery 2.1.1 but I have also tried it with the JQuery 1.9.1 and 2.0.x and I had the same side effects.
Thank you very much.
Thank you for the additional information. I took the given code snippets and prepared a simple test demo in my attempt to replicate the issue locally, but to no avail. Here is a screencast of my test. Could you let me know what I am missing? Would it be possible to modify the demo and demonstrate the issue?
As a side note, please do not set Name manually when strongly-typed extension is used (For<>()). It will set the name automatically for you.
Regards,
Georgi Krustev
Telerik
Rank 1
Iron
Hello again,
Let me provide with some more information. As I said before, we are using Kendo UI in conjunction with a bootstrap theme. As such, we are using the bootstrap theme of Kendo UI, to have a look & feel as consistent as possible (by following the instructions here).
After reading your last reply, it got me thinking. So I prepared a test page, that loads all our styles and scripts, with a DropDownList that presents the behavior I discussed. By elimination, I realized that the odd behavior is caused by the boostrap.js library. After removing that, the DropDownList worked as expected. Please note that the theme we are using requires Boostrap version 3.3.4.
Unfortunately I cannot verify if the behavior is present in earlier versions of boostrap, but even if that was true, we cannot - at this point - revert to an older boostrap version.
Please let me know if you can reproduce this behavior, and if you do, whether there is something I can do.
Thank you for your time.
Thank you for the additional information. Indeed, Bootstrap can cause such erratic DropDownList navigation issues. This is due the very obtrusive implementation of Bootstrap. For instance, they prevents or take control over keydown events of every element with role="listbox" attribute, which widget adds to provide WAI-ARIA support.
If this is the case, then I would suggest you refer to this forum thread: If the problem still persists, then I will need a runnable test project that we can investigate locally.
Regards,
Georgi Krustev
Telerik
Rank 1
Iron
Hello,
The solution provided by "Bobby" at 26 Aug 2014 in the link you gave me, seems to do the trick!
I do not yet know how that might affect the project down the line, but at this point we are not using boostrap drop-downs.
Thank you very much for your help. It would be even more amazing, if at some point, you were able to work this issue with bootstrap and retain full functionality on both ends.
Thanks again!