autofocus not working

[Michel]

 Hi,

 I'm trying to set the autofocus on my edit screens. If it's an Kendo-control that I want to have autofocus, it doesn't seem to work.

 I tried setting the HtmlAttributes for de dropdownlist:

<div class="form-group">
    @Html.LabelFor(model => model.IdLocation, htmlAttributes: new { @class = "control-label col-sm-2" })
    <div class="col-md-10">
        @(Html.Kendo().DropDownListFor(model => model.IdLocation)
              .DataTextField("Value")
              .DataValueField("Key")
              .OptionLabel("Selecteer... ")
              .HtmlAttributes(new { autofocus = "" })
              .DataSource(source => source.Read(read => read.Action("GetAllItemsAsDictionary", "Location")))
        )
    </div>
</div>​

As a result I see an input element generated with the attribute autofocus set, but also with style 'display: none'.

<div class="col-md-10">
  <span aria-activedescendant="d012aecf-c5cf-41cd-b307-85b7dfad7807" aria-busy="false" aria-readonly="false" aria-disabled="false" aria-owns="IdLocation_listbox" tabindex="0" aria-expanded="false" aria-haspopup="true" role="listbox" unselectable="on" class="k-widget k-dropdown k-header" title="" style="">

    <span unselectable="on" class="k-dropdown-wrap k-state-default">

      <span unselectable="on" class="k-input">12a (Riek)</span>

      <span unselectable="on" class="k-select">

        <span unselectable="on" class="k-icon k-i-arrow-s">select</span>

      </span>

    </span>

    <input style="display: none;" data-role="dropdownlist" autofocus="" data-val="true" data-val-number="The field Locatie must be a number." data-val-required="The Locatie field is required." id="IdLocation" name="IdLocation" value="1" type="text">

  </span>

  <script>
    jQuery(function(){jQuery("#IdLocation").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/events/Location/GetAllItemsAsDictionary"},"prefix":""},"schema":{"errors":"Errors"}},"dataTextField":"Value","dataValueField":"Key","optionLabel":"Selecteer... "});});
  </script>
</div>​

So my question is how to make a Kendo dropdownlist having autofocus?

Thank you for a reply.

[Georgi Krustev]

Hello Michel,

In general, the widget copies only a specific set of HTML attributes from the original input element during initialization. That being said, the 'autofocus' attribute will not be moved to the focusable element, which in this case is the wrapper SPAN element. What I would suggest you is to focus the widget after its initialization:

@(Html.Kendo().DropDownListFor(model => model.IdLocation)
  .DataTextField("Value")
  .DataValueField("Key")
  .OptionLabel("Selecteer... ")
  .DataSource(source => source.Read(read => read.Action("GetAllItemsAsDictionary", "Location")))
)
<script>
  $(function() {
    $("#@Html.IdFor(m => m.IdLocation)").data("kendoDropDownList").wrapper.focus();
  });
</script>

Regards,
Georgi Krustev
Telerik

[Michel]

Hello Georgi,

Thanks for your feedback, it works.

It's a pity though, the server wrapper doesn't generate the necessary script itself based on the added HTML attribute. Now it generates a useless autofocus attribute on the input element. With this solution (which I consider a workaround) I have to include some script on a considerable number of pages, while just adding the HTML attribute should have been enough.

Can this be put on a wish list or something?

Thanks and regards,

Michel de Kok

[Georgi Krustev]

Hello Michel,

Currently, the widget ifself does not copy "autofocus" attribute. That being said, this limitation is observable not only in ASP.NET MVC wrapper.

I would suggest you share your thoughts in our Feedback portal. This is the best way to gather community feedback and evaluate the users interest.

Regards,
Georgi Krustev
Telerik