ASP MVC 帮助程序中缺少 Kendo UI 网格 command.imageClass

Question

许多纯 html 示例都引用和使用 Kendo UI 网格的命令 imageClass 属性：

$("#grid").kendoGrid({
dataSource: myDataSource,
columns: [
    {
        command: { 
            name: "Edit",
            text:"",
            imageClass: "k-icon k-i-pencil ob-icon-only",
            click: function(e) {
                //some code
            }
        }
    },
    ...
],

});

我正在使用 Kendo UI ASP MVC 版本，它似乎没有要设置的属性。我错过了什么？

万一这真的不见了（我希望没有），即使在 javascript 中，我仍然如何设置这个属性？ （我想保留我的 html 助手渲染，而不是在 javascript 中做 everything，这个解决方案很明显......）

Answer 1

你不会在 MVC Helper 中使用 imageClass；您将使用 HtmlAttributes 属性。你可以这样定义：

columns.Command(o => o.Edit().Text("")
.HtmlAttributes(new { @class = "k-icon k-i-pencil ob-icon-only" }));

祝你好运。

编辑：为什么不修改 css 以适应它？

.ob-icon-only span{ }

关于将 kendo 类添加到内部 span 元素，您可以在数据绑定上执行此操作并相应地修改元素。

Answer 2

指定自定义样式最方便的方法是使用自动生成的k-grid-NAME_OF_COMMAND 类。如果这在当前实现中不适合，我建议您绑定到 dataBound 事件并将类附加到那里。取消编辑后，使用OnCancel 事件再次替换图标。

示例

.Events(e => e.DataBound("onDataBound").Cancel("onCancel"))

JavaScript

function onDataBound(e) {
    $(".k-grid-NAME_OF_COMMAND").addClass("k-icon k-i-pencil ob-icon-only");
}

或者

function onDataBound(e) {
    $(".k-grid-edit").find("span").removeClass("k-icon k-edit");
    $(".k-grid-edit").find("span").addClass("k-icon k-i-pencil ob-icon-only");
}

添加取消事件以确保在取消编辑时图标保持不变。

function onCancel(e) {
    e.preventDefault();
    e.sender.refresh();
}

结果

其他测试

使用$(".k-grid-edit").find("span").addClass("k-icon k-i-cancel ob-icon-only");