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

好的,这让我疯了.

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

必须有一个简单的解决方案……不存在吗？

解决方法:

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

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

标签：c,asp-net-mvc,kendo-ui,kendo-grid,kendo-asp-net-mvc
来源： https://codeday.me/bug/20190703/1362254.html