Question

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

    $("#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);
    });

我可以在点击事件中获取行索引和单元格索引，但我无法确定要关注特定单元格。谢谢！

Answer 1

如果您想使用复选框编辑网格，我建议您使用this code library中的方法。无论它使用MVC扩展打开Views / Home / Index.cshtml，看看如何定义模板以及初始化Grid后使用的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>

Answer 2

我为此苦苦挣扎。我必须重新聚焦细胞，如下所示。 Kendo网格客户端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);
}

Kendo Grid始终专注于Top Row的第一个单元格

2 个答案: