剑道网格自定义操作按钮图标答案

【问题标题】：Kendo Grid custom action button icon剑道网格自定义操作按钮图标
【发布时间】：2014-12-06 14:35:24
【问题描述】：

好吧，这让我发疯了。

我有一个带有几个自定义工具栏项的 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();
            })

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

【问题讨论】：

标签： c# asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

不久前我遇到了同样的问题，从我在论坛上收集到的信息来看，模板似乎是要走的路。但是您可以使用剑道菜单或剑道按钮小部件来使其看起来更流畅：

.ToolBar(toolbar =>
    {
        toolbar.Template(
            @<text>
            @*Menu*@
            <div>
                @(Html.Kendo().Menu().Name("Toolbar").Items(items =>
                {
                    items.Add().Text("Add").ImageUrl(Url.Content("image.png"));
                }))
            </div>

            @*or Button*@
            <div>
                @(Html.Kendo().Button()
                    .Name("iconButton")
                    .HtmlAttributes( new {type = "button"} )
                    .SpriteCssClass("k-icon k-i-ungroup")
                    .Content("Sprite icon"))
            </div>
            </text>);
    })

【讨论】：

您有任何论坛参考资料吗？将内置命令（例如 Pdf、Excel）与自定义命令混合使用怎么样？

【解决方案2】：

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

首先，一些观察。

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

2) k-plus 和 k-refresh 指向精灵表上的错误位置。好吧，k-plus 指向错误的位置； k-refresh，虽然记录在案，但似乎不存在于 Kendo 样式中。我可以通过为图标添加自己的位置来解决此问题：

.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 元素，下一个版本的剑道可能会完全打破这一点。我非常希望有人向我展示我如何只需要做一些非常简单的事情而不是这种荒谬的解决方法。

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

【讨论】：