Kendo Grid Edit Bootstrap class and Textbox autofocus with EditorTemplate not working - kendo-ui

Question

I have been using kendo grid for asp.net MVC.
Two problems I am facing
1 - While displaying create view for users, I have set an autofocus attribute to first text box. When using without kendo, autofocus works fine and gets injected in Dom. But when using kendo and editortemplate, I can't see autofocus attribute being inserted.
2 - Also in kendo grid Ajax editing, I am unable see bootstrap style to text box when clicking on Edit link button.
Following are the codes
KENDO GRID IN INDEX VIEW
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(u => u.USERNAME);
columns.Bound(u => u.PASSWORD);
columns.Bound(u => u.ROLE);
columns.Bound(u => u.STATUS);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
}
)
.Pageable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(u => u.ID))
.Update(update => update.Action("Edit", "Users"))
.Destroy(destroy => destroy.Action("Delete", "Users"))
)
)
CREATE VIEW USERNAME SNIPPET FOR USER WHERE 1st PROBLEM I AM FACING
<div class="form-group">
#Html.LabelFor(model => model.USERNAME, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.USERNAME, new { #autofocus = "autofocus", #class = "form-control" } )
#Html.ValidationMessageFor(model => model.USERNAME, "", new { #class = "text-danger" })
</div>
</div>
You can see I have put autofocus in Create view but I am unable to see focus on page load when using Kendo. If I remove Kendo and EditorTemplate, autofocus works fine.
I have added code and some more details. Please have a look.Basically two problems I am facing, If I use kendo, I cant get autofocus for USERNAME textbox in Create.cshtml. Second in Kendo Grid Edit, I am unable to see bootstrap class applied to textboxes in edit mode unless I apply EditorTemplate in the folder. If I apply editortemplate, I cant get autofocus working on create.cshtml.

Answer 1

For your first problem, the autofocus attribute identifies the input that should have focus when the page loads. But the kendo grid editor popup is dynamically added to the page when the user clicks the edit button on a row. So you should manually set the focus using javascript code on grid edit event. So, in your grid settings:
.Events(events => events.Edit("gridEdit"))
And this is the code that I usually put in my gridEdit event handler:
function gridEdit(e) {
// get the handle of the edit window
var wnd = e.container.data("kendoWindow");
// set focus to the first input
wnd.bind('activate', function () {
e.container.find(':input:visible:enabled:first').focus();
});
}
We need to set the focus on edit-window activation, when the inner elements are ready. My code sets the focus to the first, enabled, visible input element, but your logic might be different.
Your second question is not clear to me, but maybe you should ask a new question for that, and please include more details, like a snapshot image of the problem.