Question

我有一个剑道网格，其中启用了“可导航”和“可滚动”选项。我有一个自定义模板列，其中包含一个复选框。并且有一些记录可以使垂直滚动可见。

当我在自定义复选框的“更改”事件中设置dataItem值时，网格会将其焦点更改为同一列的顶行。这也意味着;如果我单击滚动网格底部的复选框，则滚动将显示在记录的顶部。我发现只有在启用“可导航”选项时才会出现这种情况。如果我禁用它，它就不会失去焦点。

以下是此案例的jsFiddle example：

function chkChanged() {
    var isChecked = $(this).is(":checked");
    var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
    if (!item) {
        return;
    }
    item.fields["CheckBox"].editable = true;
    item.fields["FirstName"].editable = true;
    item.set("CheckBox", isChecked);
    item.set("FirstName", isChecked.toString().toLowerCase());
    item.fields["FirstName"].editable = false;    
    item.fields["CheckBox"].editable = false;    
    setTimeout(reBindChangeEvents, 200);
}


function reBindChangeEvents() {
    $(".chk").unbind("change", chkChanged);   
    $(".chk").change(chkChanged);
}

$(document).ready(function () {
    var grid = $("#grid").kendoGrid({
        dataSource: {
            data: createRandomData(10),
            group: {
                field: "City"
            },
            schema: {
                model: {
                    fields: {
                        CheckBox: {
                            type: "bool",
                            editable: false
                        },
                        FirstName: {
                            type: "string",
                            editable: false
                        },
                        LastName: {
                            type: "string",
                            editable: true
                        },
                        City: {
                            type: "string",
                            editable: false
                        },
                        Title: {
                            type: "string",
                            editable: false
                        },
                        BirthDate: {
                            type: "date",
                            editable: false
                        },
                        Age: {
                            type: "number",
                            editable: false
                        }
                    }
                }
            },
            pageSize: 10
        },
        height: 300,
        scrollable: true,
        sortable: true,
        selectable: false,
        editable: true,
        filterable: true,
        groupable: true,
        //navigatable: true,
        columns: [{
            field: "CheckBox",
            title: " ",
            template: "<input class='chk' type='checkbox' #= CheckBox && CheckBox.toString().toLowerCase() === 'true' ? checked='checked' : '' # >",
            width: 30,
            filterable: false,
            groupable: false
        }, {
            field: "FirstName",
            title: "First Name",
            width: 150,
        }, {
            field: "LastName",
            title: "Last Name",
            width: 150,
        }, {
            field: "City",
            width: 150,
        }, {
            field: "Title",
            width: 150,
        }, {
            field: "BirthDate",
            width: 500,
            title: "Birth Date",
            template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
        }, {
            field: "Age"
        }]
    }).data("kendoGrid");    
    setTimeout(reBindChangeEvents, 200);
});

这是一个错误，还是我做错了什么？目前，我找不到任何其他方法来禁用“可导航”选项。

编辑1： 借助此处的答案并在1年后使用Kendo Grid，此信息可以帮助其他有关html刷新和网格性能问题的人。 dataItem.set（）函数总是刷新整个网格html （至少在版本2013_Q2中） 你应该使用grid.editCell（$ td）方法来切换到单元格编辑模式。然后在设置dataItem值后使用grid.closeCell（）。这使网格只刷新td单元格html。并且对网格性能有很大帮助。

Answer 1

在单步执行代码之后，我会说这是kendoGrid的refresh方法中的一个错误。如果navigatable为真，则在刷新网格小部件时，网格会将其当前元素更改为第一个网格单元格，滚动到该网格小部件并再次聚焦该表格。

此外，在Chrome中，focusTable函数通过将顶部菜单栏移出视图来打破jsfiddle页面。它似乎是由网格的focusTable函数中的table[0].focus()引起的，该函数在刷新网格后调用。我以前见过这种行为，所以我认为这不是jsfiddle的问题。事实上，调用$(grid.table).focus();似乎可以为Chrome重现一致的行为。

编辑：

第二个错误似乎在他们的Q3版本（2013.3.1119）中得到修复。

Answer 2

当我们尝试dataItem.set('IsSelected', checked);时，会出现此问题因为我们在执行dataItem.set('IsSelected', checked);

时重新渲染了网格

设置数据项值时，可导航网格丢失焦点到顶部

2 个答案: