autofocus not working

4 posts, 1 answers
  1. Michel
    Michel avatar
    2 posts
    Member since:
    Jul 2014

    Posted 10 Sep 2015 Link to this post

     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.

  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 12 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Michel
    Michel avatar
    2 posts
    Member since:
    Jul 2014

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

    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

  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 15 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready