c# - Kendo Grid 自定义操作按钮图标

Question

好吧，这让我抓狂。

我有一个带有几个自定义工具栏项的 Kendo UI 网格控件。同样的工具栏还有一些“内置”命令(导出到 Excel、导出到 PDF)

一切都按设计工作，但是...内置命令呈现为左侧带有图标的按钮。对于我的生活，我无法弄清楚我需要做什么才能让我的自定义工具栏项目具有与内置命令相同的外观和感觉，即在按钮文本的左侧有一个指定的图标。

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

我不想用模板替换整个工具栏(这基本上是为内置功能重新发明轮子)，但我希望我的自定义命令看起来和呈现像内置命令一样。

有没有办法做到这一点？我已经在这个看起来应该很简单的事情上花了太多时间。

我尝试过的:

我已经尝试使自定义命令的 HtmlAttributes 具有 k-icon、k-plus 和k-refresh...不幸的是，由于这些呈现为 anchor 而不是按钮，库不会在包含的 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

我前一段时间遇到了同样的问题，从我在论坛上收集到的信息来看，模板似乎是可行的方法。但是您可以使用剑道菜单或剑道按钮小部件使其看起来更漂亮:

.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>);
    })