Question

我一直在为asp.net MVC使用kendo网格。

我面临的两个问题

1 - 在为用户显示创建视图时，我已将自动对焦属性设置为第一个文本框。在没有kendo的情况下使用时，自动对焦工作正常，并在Dom中注入。但是当使用kendo和editortemplate时，我看不到插入的自动聚焦属性。

2 - 同样在kendo网格Ajax编辑中，单击编辑链接按钮时，我无法看到文本框的引导样式。

以下是代码

索引视图中的KENDO网格

@(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"))
)

）

为我第一个面临问题的用户创建用户名字段

<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>

您可以看到我已将autofocus置于“创建”视图中，但在使用Kendo时无法看到对页面加载的关注。如果我删除Kendo和EditorTemplate，自动对焦工作正常。

我添加了代码和更多细节。请看看。我面临两个问题，如果我使用kendo，我无法在Create.cshtml中获得USERNAME文本框的自动对焦功能。在Kendo Grid Edit中，我无法看到在编辑模式下应用于文本框的引导类，除非我在文件夹中应用EditorTemplate。如果我应用editortemplate，我无法使用create.cshtml进行自动对焦。

Answer 1

对于您的第一个问题，自动对焦属性标识了在页面加载时应该具有焦点的输入。但是当用户单击行上的编辑按钮时，会将kendo网格编辑器弹出窗口动态添加到页面中。因此，您应该使用网格编辑事件上的javascript代码手动设置焦点。那么，在您的网格设置中：

.Events(events => events.Edit("gridEdit"))

这是我通常放在gridEdit事件处理程序中的代码：

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();
    });
}

当内部元素准备就绪时，我们需要将注意力集中在编辑窗口激活上。我的代码将焦点设置为第一个启用的可见输入元素，但您的逻辑可能不同。

您的第二个问题对我来说并不清楚，但也许您应该提出一个新问题，请提供更多详细信息，例如问题的快照图片。

使用EditorTemplate的Kendo Grid Edit Bootstrap类和Textbox自动对焦无法正常工作

1 个答案: