Kendo Grid自定义操作按钮图标

Question

好，这真让我发疯。

我有一个Kendo UI网格控件，其中包含几个自定义工具栏项。同一工具栏还具有一些“内置”命令（导出到Excel，导出到PDF）

所有功能均按设计工作，但是...内置命令呈现为左侧带有图标的按钮。为了我的一生，我无法弄清楚我需要做些什么来使自定义工具栏项目具有与内置命令相同的外观，即在按钮文本的左侧具有指定的图标。

此外，自定义按钮呈现为锚链接，而内置命令呈现为按钮。

我不想用模板替换整个工具栏（它基本上是在重新发明内置函数的方向盘），但我希望我的自定义命令能够像内置命令一样看起来和呈现。

有办法吗？我已经花了太多时间在这件事上，这看起来应该非常简单。

我尝试过的

我试图使HtmlAttributes自定义命令拥有的各种排列的班k-icon，k-plus和k-refresh...不幸的是，因为这些渲染为锚，而不是按钮，图书馆不呈现在含有图标span元素。

似乎我们也无法将模板应用于单个命令，这非常令人沮丧，因此我无法手动构建这些命令以使其看起来类似于内置命令。

        .ToolBar(tb =>
            {
                tb.Custom().Action("Create", "Cycle").Text("Create New Cycle").HtmlAttributes(new {@class = "k-plus"});
                tb.Custom().Name("update-inventory").Text("Update Inventory").HtmlAttributes(
                    new {onclick = "onUpdateInventory()", title = "Update the system inventory from the OMS", @class="k-refresh"});
                tb.Excel();
                tb.Pdf();
            })

必须对此有一个简单的解决方案……不是吗？

Answer 1

好吧，我想出了如何让它看起来正确，但必须有更好的方法来做到这一点。

首先，一些观察。

1）自定义操作的“Name”方法似乎没有执行任何操作。完全没有。它不会像为几乎所有其他 Kendo 小部件那样为元素创建 ID 属性，因此我必须将 id 添加到方法中HtmlAttributes。

2)k-plus和k-refresh指向精灵表上的错误位置。嗯，k-plus指向错误的位置；k-refresh虽然有记录，但在剑道造型中似乎并不存在。我可以通过添加我自己的图标定位来解决这个问题：

.k-icon-plus {
    background-position: -48px -64px;
}

.k-icon-refresh{
    background-position:-48px -112px;
}

现在，有趣的是，自定义命令按钮在呈现为anchor元素而不是像button内置元素那样的元素时，仍然呈现一个空的span像内置元素一样在其中呈现一个空元素，作为（大概）图标的占位符。当然，它无法在 MVC 的配置包装器中访问，因此需要使用一些 jQuery 魔法。

首先，我创建了一个事件，当网格绑定到 MVC 包装器中的数据时触发，如下所示：

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

接下来，我修改了自定义命令的 HtmlAttributes，如下所示：

tb.Custom().Action("Create", "Cycle")
    .Text("Create New Cycle").HtmlAttributes(new{id="create-cycle"});
tb.Custom().Text("Update Inventory").HtmlAttributes(
    new { onclick = "onUpdateInventory()", title = "Update the system inventory from the OMS", id="update-inventory" });

然后，我将其连接到我引用的 JavaScript 函数中：

function onDataBound() {
    $('#create-cycle span').addClass('k-icon k-icon-plus');
    $('#update-inventory span').addClass('k-icon k-icon-refresh');
}

现在...这有效。但这很糟糕。它仍然是一个anchor元素又不是一个button元素，剑道的下一个版本可能会完全打破这一点。我非常希望有人能向我展示如何只需要做一些非常简单的事情，而不是这种荒谬的解决方法。

请有人告诉我这不是正确的方法。