C# 剑道网格自定义动作按钮图标

好吧，这让我快发疯了

我有一个剑道UI网格控件，带有两个自定义工具栏项。同一工具栏也有一些“内置”命令（导出到Excel，导出到PDF）

一切按设计进行，但。。。内置命令渲染为左侧带有图标的按钮。就我的一生而言，我不知道我需要做什么才能使我的自定义工具栏项具有与内置命令相同的外观和感觉，即在按钮文本的左侧有一个指定的图标

此外，自定义按钮渲染为锚定链接，而内置命令渲染为按钮

我不想用模板替换整个工具栏（它基本上是为内置函数重新发明轮子），但我希望自定义命令的外观和渲染与内置命令类似

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

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

我所尝试的：

我已经尝试过使自定义命令的

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

---

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

好的，我知道如何使它看起来正确，但是有一种更好的方法

首先是一些观察

1） 自定义操作的“Name”方法似乎没有任何作用。完全它没有为元素创建ID属性，就像它为几乎所有其他剑道小部件所做的那样，因此我必须将ID添加到

HtmlAttributes

方法中

2）

k-plus

和

k-refresh

指向精灵工作表上的错误位置。嗯，

k-plus

指向错误的位置<代码>k-刷新，虽然有文档记录，但剑道样式中似乎不存在。我可以通过添加我自己的图标定位来解决这个问题：

.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

元素，剑道的下一个版本可能会完全打破这一点。我非常希望有人能告诉我，我必须做一些非常简单的事情，而不是这种荒谬的解决方法

---

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

不久前我遇到了同样的问题，从我在论坛上收集的信息来看，这似乎是一种方法。但您可以使用剑道菜单或剑道按钮小部件使其看起来光滑：

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

.ToolBar（ToolBar=>
{
工具栏.模板(
@
@*菜单*@
@（Html.Kendo（）.Menu（）.Name（“工具栏”）.Items（Items=>
{
items.Add（）.Text（“Add”）.ImageUrl（Url.Content（“image.png”））；
}))
@*或按钮*@
@（Html.Kendo（）.Button（））
.名称（“图标按钮”）
.HtmlAttributes（新的{type=“button”}）
.SpriteCssClass（“k-icon k-i-ungroup”）
.Content（“精灵图标”））
);
})

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