Kendo Grid Edit Bootstrap 类和 Textbox 自动对焦与 EditorTemplate 不起作用

Posted 2023-03-27

【中文标题】Kendo Grid Edit Bootstrap 类和 Textbox 自动对焦与 EditorTemplate 不起作用

【英文标题】：Kendo Grid Edit Bootstrap class and Textbox autofocus with EditorTemplate not working

【发布时间】：2017-05-20 19:23:31

【问题描述】：

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

我面临的两个问题

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

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

以下是代码

索引视图中的剑道网格

@(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，自动对焦可以正常工作。

我添加了代码和更多细节。请看一下。基本上我面临两个问题，如果我使用剑道，我无法在 Create.cshtml 中为 USERNAME 文本框获得自动对焦。第二在 Kendo Grid Edit 中，除非我在文件夹中应用 EditorTemplate，否则我无法在编辑模式下看到引导类应用于文本框。如果我应用编辑器模板，我无法在 create.cshtml 上获得自动对焦。

【参考方案1】：

对于您的第一个问题，autofocus 属性标识页面加载时应该具有焦点的输入。但是当用户单击一行上的编辑按钮时，剑道网格编辑器弹出窗口会动态添加到页面中。因此，您应该在网格编辑事件上使用 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();
    );

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

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