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

一段时间我遇到了同样的问题，从我在论坛上收集的内容来看，模板似乎是要走的路。但您可以使用剑道菜单或剑道按钮小部件使其看起来光滑：

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

Answer 2

好的，我想出了如何使看起来正确，但是更好的方法。

首先，一些观察。

1）＆＃34;姓名＆＃34;自定义操作的方法似乎没有做任何事情。完全没有。它不会为元素创建一个ID属性，就像几乎所有其他Kendo小部件一样，因此我必须将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元素，而下一个版本的kendo可能完全破坏了这一点。我非常希望有人向我展示我如何做一些非常简单的事情，而不是这种荒谬的解决方法。

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

Kendo Grid自定义操作按钮图标

2 个答案: