Kendo ui 剑道网格始终集中在第一行的第一个单元格上

我在剑道格网中有复选框。一旦我点击复选框，它总是聚焦剑道网格中的顶部单元格。下面是剑道网格的代码，我绑定到剑道网格中复选框单击事件的复选框值

    $("#contactgrid").on('click', '.chkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#contactgrid').data().kendoGrid;
            var rowIdx = $("tr", grid.tbody).index(row);
            var colIdx = $("td", row).index(this);
            // grid.tbody.find("tr").eq(rowIndex).foucs(); This doesn't work
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('IsSelected', checked);
    });

我可以在click事件中获取行索引和单元格索引，但我无法确定如何聚焦特定的单元格。

---

谢谢

当您想使用复选框编辑网格时，我建议您使用来自的方法。不管它使用MVC扩展，打开Views/Home/Index.cshtml并查看初始化网格后如何定义模板和使用javascript

给你 列模板：

columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsAdmin ? checked='checked':'' # class='chkbx' />")
            .HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(200);


<script type="text/javascript">
    $(function () {
        $('#persons').on('click', '.chkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#persons').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('IsAdmin', checked);
        })
    })

    function checkAll(ele) {
        var state = $(ele).is(':checked');
        var grid = $('#persons').data().kendoGrid;
        $.each(grid.dataSource.view(), function () {
            if (this['IsAdmin'] != state) 
                this.dirty=true;
            this['IsAdmin'] = state;
        });
        grid.refresh();
    }

</script>

columns.Template（@）.ClientTemplate（“”）
.头部模板（“”）。宽度（200）；
$（函数（）{
$（'persons'）。在（'click'，'chkbx'，函数（）{
var checked=$（this）.is（':checked'）；
var grid=$（'#persons'）.data（）.kendoGrid；
var-dataItem=grid.dataItem（$（this.closest（'tr'））；
dataItem.set（'IsAdmin'，选中）；
})
})
功能检查全部（ele）{
变量状态=$（ele）.is（':checked'）；
var grid=$（'#persons'）.data（）.kendoGrid；
$.each（grid.dataSource.view（），函数（）{
如果（此['IsAdmin']！=状态）
这个。脏=真；
这个['IsAdmin']=状态；
});
grid.refresh（）；
}

我一直在努力解决这个问题。我重新聚焦了细胞，如下所示。剑道网格客户端API有很大的改进空间。希望我下面的助手方法能帮助人们解决问题

var $row = getRowForDataItem(this);
var $current = getCurrentCell($row);
var currentCellIndex = $row.find(">td").index($current);

this.set('PriceFromDateTime', resultFromDate);

$row = getRowForDataItem(this);
var grid = getContainingGrid($row);

//select the previously selected cell by it's index(offset) within the td tags
if (currentCellIndex >= 0) {
    grid.current($row.find(">td").eq(currentCellIndex));
}


//Kendo grid helpers
function getColumn(grid, columnName) {
    return $.grep(grid.columns, function (item) {
        return item.field === columnName;
    })[0];
}

function getRowForDataItem(dataItem) {
    return $("tr[data-uid='" + dataItem.uid + "']");
}

function getCurrentCell($elem) {
    return getContainingGrid($elem).current();
}

function getContainingDataItem($elem) {
    return getDataItemForRow(getContainingRow($elem));
}

function getContainingCell($elem) {
    return $elem.closest("td[role='gridcell']");
}

function getContainingRow($elem) {
    return $elem.closest("tr[role='row']");
}

function getContainingGrid($elem) {
    return $elem.closest("div[data-role='grid']").data("kendoGrid");
}

function getGridForDataItem(dataItem) {
    return getContainingGrid(getRowForDataItem(dataItem));
}

function getDataItemForRow($row, $grid) {
    if (!$grid) $grid = getContainingGrid($row);
    return $grid.dataItem($row);
}

function getMasterRow($element) {
    return $element.closest("tr.k-detail-row").prev();
}

function getChildGridForDataItem(dataItem) {
    return getRowForDataItem(dataItem).next().find("div.k-grid").data("kendoGrid");
}

function getMasterRowDataItem($element) {
    var $row = getMasterRow($element);
    return getDataItemForRow($row);
}

---

谢谢回复，我有和你提到的一样的专栏模板。它非常适合批量编辑和保存记录。唯一的问题是，我必须集中选中的复选框。剑道网格有滚动条，所以每次用户选中该框时，它都会关注网格的第一个单元格。谢谢Zephryl的回复。我尝试了你的解决方案，虽然效果很好，但无论最后一个复选框点击了什么，它都会继续聚焦。我为此尝试的另一个解决方案为每个复选框提供了唯一的id，只需在我的jquery函数中找到单击的复选框并将其聚焦。下面是适合我的解决方案。columns.Bound（p=>p.Active）.Title（“Active”）.ClientTemplate（“”）。宽度（40）$（currentCheckBox.focus（）；我猜你的事件是在网格更新当前单元格之前触发的。而不是var$current=getCurrentCell（$row）；您可能需要一些类似的东西：$（this.nearest（“td”）。如果它的工作方式正确，您可以尝试只执行$（this）.closest（“td”）.find（“input”）.focus（），并避免为它们提供所有唯一的ID。我想美元（这个）对你有用。如果没有，请尝试使用jQuery中的事件详细信息。