好，这真让我发疯。
我有一个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();
})
必须有一个简单的解决方案……不是吗？
好的，我想出了使它看起来正确的方法，但是必须有一种更好的方法来做到这一点。
首先，一些观察。
1）自定义操作的“名称”方法似乎没有任何作用。完全没有 它没有为该元素创建ID属性，就像为几乎所有其他Kendo小部件一样，因此我必须将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元素，而下一版的kendo可能会完全打破这一点。我非常希望有人向我展示如何只做一些非常简单的事情，而不是这种可笑的解决方法。
请请请有人告诉我这是不是这样做的正确方法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句