Question

这是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数据源来显示问题。

Answer 1

从API文档中

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

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

ajax数据源在可编辑，可导航的Kendo UI网格上的可编辑字段之间中断选项卡导航

1 个答案: