一个 ajax 数据源中断了可编辑、可导航 Kendo UI 网格上可编辑字段之间的选项卡导航答案

【问题标题】：An ajax datasource breaks tab navigation between editable fields on an editable, navigatable Kendo UI grid一个 ajax 数据源中断了可编辑、可导航 Kendo UI 网格上可编辑字段之间的选项卡导航
【发布时间】：2013-09-20 22:51:37
【问题描述】：

这是 Razor 模板：

@(Html.Kendo().Grid<SubmitGridViewModel>()
    .Name(gridId)
    .Columns(columns => {
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.FirstName);
        columns.Command(command => command.Destroy()).Width(110);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable =>
    {
        editable.Mode(GridEditMode.InCell);
        editable.DisplayDeleteConfirmation(false);
    })
    .Navigatable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .AutoSync(true)
        .Batch(true)
        .Model(model => model.Id(p => p.Id))
        .Read(o => o.Action(AppRoute.SubmitGridRead.ToMethod(), AppRoute.SubmitGridRead.ToController()))
        .Create(o => o.Action(AppRoute.SubmitGridCreate.ToMethod(), AppRoute.SubmitGridCreate.ToController()))
        .Update(o => o.Action(AppRoute.SubmitGridUpdate.ToMethod(), AppRoute.SubmitGridUpdate.ToController()))
        .Destroy(o => o.Action(AppRoute.SubmitGridDestroy.ToMethod(), AppRoute.SubmitGridDestroy.ToController()))
    )
)

当我将 LastName 字段聚焦并打开以进行编辑时，我点击 Tab 打开 FirstName 字段进行编辑，它就是这样做的。但它会立即关闭 FirstName 字段进行编辑并再次关注 LastName 字段。当我注释掉.AutoSync(true) 时，问题就消失了。

我认为它正在发生，因为异步 httprequest 正在返回并以某种方式与字段焦点搞砸了。

我该如何解决这个问题？

我会创建一个 JSFiddle，但它需要依赖 AJAX 数据源来显示问题。

【问题讨论】：

标签： ajax asp.net-mvc kendo-ui kendo-grid

【解决方案1】：

来自 API 文档，

[ 如果autoSync ] 设置为true，数据源将通过调用同步方法自动保存任何更改的数据项。默认情况下，更改不会自动保存。

因此，当您跳出文本框时，数据源会将其注册为更改并触发异步更新。更新成功后，模型被反弹，视图被刷新。您确定在文本框或 JavaScript 上没有任何 HTML 属性会导致光标默认聚焦在此处（即 autofocus 或 {HTMLElement}.focus()？

【讨论】：