Kendo 网格上的 Select 列在扩展小部件上不起作用

Select column on Kendo grid not working on extended widget

我创建了 Kendo 网格的扩展版本。

var base = kendo.ui.Grid;

var CustomGrid = base.extend({
    init: function (element, options) {
        var that = this;            
        base.fn.init.call(that, element, options);
    },
    options: {
        name: "CustomGrid"
    }

Grid 正在扩展而不是封装到组件中。该控件是在开发过程中很晚才制作的,除其他外,这对我们的代码进行了最少的返工。

在此网格上,我想要一个 Select 列,Kendo 本身支持 as of the Kendo UI R2 2017 SP1 release。我的问题是,虽然复选框在网格上正确呈现,但(取消)选中它们不会(取消)select 行。我的猜测是底层功能搜索具有某些属性值的对象,这些属性值在我的自定义小部件上不同。例如,Kendo 网格将具有 data-role='grid',而我的网格具有 data-role='customgrid'.

我尝试创建自己的 select 专栏,使用 Telerik documentation 作为指南。虽然这有效,但它只处理基础知识。加上排序、过滤等就变得更复杂了

我需要做什么才能使内置 select 列适用于扩展 Kendo 网格?

如果您拥有 Kendo 许可证,请下载源代码并查看私有网格方法 _persistSelectedRows。他们跟踪 ID。这就是它变得棘手的地方:新添加的项目(尚未保存在数据库中)可能没有 ID。如果您为它们分配 ID,则数据源不会将它们视为要保存的新项目。如果你不这样做,你就不能坚持他们的选择。您可以保留 uid,但如果您刷新网格,将重新生成 uid,并且您的选择将会丢失。

我们最终编写了一个基于 uid 的自定义选择管理器,但这是专有代码,我无权分享。

由于网格暗示您有许可证,我建议您利用 Kendo 的支持。

我的作品确实有许可证,我也问了Telerik支持的问题。他们昨天回复了,他们的回答似乎运作良好!转述如下:

Internally we have a condition which checks whether the currently selected row belongs to the current grid to avoid selecting rows of parent grids in the context of hierarchical grids. However, the getKendoGrid will not return the instance of the widget when the grid is custom. As a workaround I can suggest you to override the _checkboxClick and _headerCheckboxClick functions of the grid.

kendo.ui.Grid.fn._checkboxClick = function (e) {
    var that = this,
        row = $(e.target).closest("tr"),
        isSelecting = !row.hasClass('k-state-selected');

    if (!that.dataSource.getByUid(row.attr('data-uid'))) {
        return;
    }

    if (isSelecting) {
        that.select(row);
    } else {
        that._deselectCheckRows(row);
    }
}

kendo.ui.Grid.fn._headerCheckboxClick = function (e) {
    var that = this,
        checkBox = $(e.target),
        checked = checkBox.prop("checked");

    if (!that.thead.find(checkBox).length) {
        return;
    }

    if (checked) {
        that.select(that.items());
    } else {
        that.clearSelection();
    }
}