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

本文关键字：按钮 图标 操作 自定义 网格 | 更新日期: 2023-09-27 18:33:17

好吧，这让我发疯了。

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

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

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

不久

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

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

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

首先，一些观察。

1(自定义操作的"名称"方法似乎没有执行任何操作。 完全。 它不会像为几乎所有其他 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元素，下一个版本的剑道可能会完全打破这一点。 我非常希望有人向我展示我如何只需要做一些非常简单的事情，而不是这种荒谬的解决方法。

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

相关文章：