Setting focus to an AutoComplete doesn't work

2 posts, 0 answers
  1. Joe
    Joe avatar
    184 posts
    Member since:
    May 2012

    Posted 18 Sep Link to this post

    I have a popup dialog (Using Kendo Window), and the first form field in this window form is an autocomplete.  When the dialog opens, the control does not have focus until the user clicks in it, which I want to eliminate.  I'd like to set the focus there, but it doesn;t seem to work.

    @(Html.Kendo().Window()
        .Name("polciyEdit")
        .Title("Add New Master Policy")
        .Visible(false)
        .Draggable()
        .Position(p => p.Top(150))
        .Width(700)
        .Modal(true)
        .Content(@<text>
                    <div id="PolicyEdit">
                        <table style="width: 100%;">
                            <tr>
                                <td style="text-align: right">
                                    @Html.Label("Client:")
                                </td>
                                <td>
                                    @(Html.Kendo().AutoComplete()
                                        .Name("addClientId")
                                        .DataTextField("ClientName")
                                        .Filter("contains")
                                        .HtmlAttributes(new { style = "width: 100%", placeholder = "Client ID or Client DBA Name", tabindex = 1 })
                                        .DataSource(s => s.Read("GetClientList", "Policy").ServerFiltering(false))
                                        .Events(e => e.Select("clientSelected"))
                                    )
                                </td>
                            </tr>
                           <tr>
                                <td style="text-align: right">
                                    @Html.Label("Doing Business As: ")
                                </td>
                                <td>
                                    <span id="clientDBA"></span>
                                </td>
                            </tr>
     
                            <tr>
                                <td style="text-align: right">
                                    @Html.Label("Location Code: ")
                                </td>
                                <td>
                                    @Html.Kendo().TextBox().Name("addLocCode").HtmlAttributes(new { style = "width: 100%;", tabindex = 2 })
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right">
                                    @Html.Label("WC State: ")
                                </td>
                                <td>
                                    @(Html.Kendo().DropDownList()
                                        .Name("addWCState")
                                        .DataValueField("Abbreviation")
                                        .DataTextField("Abbreviation")
                                        .BindTo(new USA().States)
                                        .OptionLabel(" -- Select State -- ")
                                        .HtmlAttributes(new { style = "width: 100%;", tabindex = 3 })
                                    )
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right">
                                    @Html.Label("Provider: ")
                                </td>
                                <td>
                                    @(Html.Kendo().DropDownList()
                                        .Name("providerCode")
                                        .DataValueField("RecordId")
                                        .DataTextField("ProviderName")
                                        .BindTo((IEnumerable)ViewData["providers"])
                                        .OptionLabel("-- Select Provider --")
                                        .HtmlAttributes(new { style = "width: 100%;", tabindex = 4 })
                                    )
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right">
                                    @Html.Label("Policy Id: ")
                                </td>
                                <td>
                                    @Html.Kendo().TextBox().Name("addPolicyId").HtmlAttributes(new { style = "width: 100%;", tabindex = 5 })
                                </td>
                            </tr>
     
                            <tr>
                                <td style="text-align: right">
                                    @Html.Label("Effective Date: ")
                                </td>
                                <td>
                                    @(Html.Kendo().DatePicker().Name("addEffDate").HtmlAttributes(new { style = "width: 100%", tabindex = 6 }))
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right">
                                    @Html.Label("Expiration Date: ")
                                </td>
                                <td>
                                    @(Html.Kendo().DatePicker().Name("addExpDate").HtmlAttributes(new { style = "width: 100%", tabindex = 7 }))
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right">
                                    @Html.Label("PEO: ")
                                </td>
                                <td>
                                    @(Html.Kendo().DropDownList()
                                        .Name("addPeo")
                                        .DataValueField("Value")
                                        .DataTextField("Text")
                                        .OptionLabel("-- Select PEO --")
                                        .BindTo(new List<SelectListItem>()
                                        {
                                            new SelectListItem() { Text = "10", Value = "10" },
                                            new SelectListItem() { Text = "40", Value = "40" },
                                            new SelectListItem() { Text = "60", Value = "60" }
                                        })
                                        .HtmlAttributes(new { style = "width: 100%;", tabindex = 8 })
                                    )
                                </td>
                            </tr>
                            <tr><td colspan="2"><hr class="info"/></td></tr>
                            <tr>
                                <td colspan="2" style="text-align: right">
                                    <a id="btnAddPolicy" role="button" class="k-button k-button-icontext k-primary k-grid-update" href="#" tabindex="9"><span class="k-icon k-i-check"></span>Update</a>
                                    <a id="btnCancelAdd" role="button" class="k-button k-button-icontext k-grid-cancel" href="#" tabindex="10"><span class="k-icon k-i-cancel"></span>Cancel</a>                               
                                </td>
                            </tr>                      
                        </table>
                    </div>
                    </text>))

     

    The code that opens the window is:

    $("#addNewPolicy").click(function(e) {
              e.preventDefault();
              $("#polciyEdit").data("kendoWindow").open();
              $("#addClientId").data("kendoAutoComplete").focus();
          });

     

    But the control still isn;t given focus unless the user clicks in the form field.  So how do I programmatically set the focus to the first control (the autocomplete control) when the dialog opens?

     

  2. Neli
    Admin
    Neli avatar
    29 posts

    Posted 19 Sep Link to this post

    Hello Joe,

    To have the focus on an input element after opening a Kendo Window, a subscription to the activate event is needed. 


    @(Html.Kendo().Window()
        .Name("polciyEdit")
        .Title("Add New Master Policy")
        .Visible(false)
        .Draggable()
        .Position(p => p.Top(150))
        .Width(700)
        .Modal(true)
        .Events(ev => ev.Activate("onActivate"))
        .Content(@<text>


    And in the activate event handler the AutoComplete widget is referenced and focus method is invoked.
    function onActivate() {       
           var autocomplete = $("#addClientId").data("kendoAutoComplete");
           autocomplete.focus();
       }

    Similar issues had been discussed in Kendo Forum, here is a link to such thread.
    Example of an implementation could be found in the linked Dojo.


    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top