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

Posted 2023-05-07

【中文标题】Kendo Grid 始终专注于 Top Row 的第一个单元格

【英文标题】：Kendo Grid always focus on first cell of Top Row

【发布时间】：2013-11-20 16:03:23

【问题描述】：

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

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

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

【参考方案1】：

当您想使用复选框编辑 Grid 时，我建议您使用 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>

【讨论】：

感谢您的回复，我有与您提到的相同的列模板。它非常适合批量编辑和保存记录。唯一的问题是我必须关注被点击的复选框。剑道网格具有滚动条，因此每次用户选中该框时，它都会关注网格的第一个单元格。

【参考方案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);

【讨论】：

感谢 Zephryl 的回复。我尝试了您的解决方案它正在接近工作，但无论最后一个复选框单击什么，它都会继续关注。我为此尝试的另一种解决方案为每个复选框提供了唯一的 ID，然后在我的 jquery 函数中找到单击的复选框并将其聚焦。以下是适合我的解决方案。 columns.Bound(p => p.Active).Title("Active").ClientTemplate("").Width(40); $(currentCheckBox).focus();

我猜你的事件在网格更新当前单元格之前触发。而不是 var $current = getCurrentCell($row);您可能需要类似的东西：$(this).closest("td")。如果它工作正常，你可以尝试只做 $(this).closest("td").find("input").focus() 并且能够避免给他们所有唯一的ID。我假设 $(this) 对你有用。如果没有，请尝试使用 jQuery 中的事件详细信息。