This is a migrated thread and some comments may be shown as answers.

Focus

2 Answers 658 Views

Form

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

Accepted

David Ocasio

commented on 27 Aug 2021, 01:54 PM

Similiar issue,

I am using the mvc helper for a form in a window.

If i use the supplied jquery code for focus it does not work for me.

$(".k-form").find(".k-textbox").first().focus();

I also trying accessing the textbox directly that also did not work.

$("#UserName").focus();

Here is my code.

@using InoAutoBusiness.Import
@using InoAutoDashboardRebuild.Models
@model LoginViewModel
@{
    ViewData["Title"] = "Login";
}

@Html.ValidationMessage("PasswordMisMatch")

<style>
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 30%;
    }
    .smoker {
    }
</style>

<div class="center" style="height: 450px">
    @(Html.Kendo().Window()
        .Name("LoginWindow")
        .Content(Html.Kendo().Form<LoginViewModel>()
            .Name("LoginForm")
            .HtmlAttributes(new {action = @Url.Action("ValidationLogin", "Login"), method = "POST"})
            .FormData(Model)
            .Validatable(v =>
            {
                v.ValidateOnBlur(true);
                v.ValidationSummary(vs =>
                {
                    vs.Enable(false);
                });
            })
            .Items(items =>
            {
                items.AddGroup()
                    .Label("Enter Login Information")
                    .Items(i =>
                    {
                        i.Add()
                            .Field(f => f.UserName)
                            .Id("UserName")
                            .InputHtmlAttributes(new { AutoComplete = "off" })
                            .Label(l => l.Text("User Name:"));

                        i.Add()
                            .Field(f => f.Password)
                            .EditorTemplateHandler("setPasswordEditor")
                            .Label(l => l.Text("Password:"));

                    });
            }).ToHtmlString())
            .Width(300)
            .HtmlAttributes(new { style = "padding: 0px 20px 20px 20px" })
            .Modal(true)
            .Draggable(false)
            .Visible(true)
            .Resizable(resize => resize.Enabled(false))
           .Title("")
        )
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $(".k-form").find(".k-textbox").first().focus();
//        $("#UserName").focus();
    });

    function setPasswordEditor(container, options) {
        container.append($("<input type='password' class='k-textbox k-valid' id='Password' name='Password' title='Password' required='required' autocomplete='off' aria-labelledby='Password-form-label' data-bind='value:Password' aria-describedby='Password-form-hint'>"));
    }


</script>

Any Help would be appreciated.

Ivan Danchev

commented on 31 Aug 2021, 09:42 AM

David,

In the context of a Form nested in a Window, you have to focus it when the Window opens. To do so you can attach an Activate event handler to the Window:

.Events(ev => ev.Activate("onActivate"))

and in the handler focus the first textbox after a small delay:

function onActivate(e) {
    setTimeout(function () {
    	$(".k-form").find(".k-textbox").first().focus();
    }, 500)
}

David Ocasio

commented on 01 Sep 2021, 12:02 PM

Worked perfectly Ivan, thanks