如何在Kendo Grid自定义命令按钮中添加图标？

我想给Kendo Grid里的自定义Test按钮添加图标或FontAwesome类。Edit和Delete是控件默认按钮，已经自带图标，但我自己加的Test按钮也需要加上图标，期望效果如图所示。相关代码如下：

@(Html.Kendo().Grid<IntegrationViewModel>()
            .Name("IntegrationItemSettingsGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.IntegrationType).Title("Integration Type").Width(50);
                columns.Bound(p => p.ClinetId).Title("Clinet ID").Width(70);
                columns.Bound(p => p.ClientSecret).Title("Client Secret").Width(150);
                columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();
                    command.Custom("Test").Click("TestConnection");  // 需要修改这里
                });
            }
).ToolBar(toolbar => toolbar.Create())
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .Sortable(sortable => sortable.AllowUnsort(false))
      .Pageable(pageable => pageable.Enabled(false))
      .HtmlAttributes(new { style = "width:100%;" })
     .DataSource(dataSource => dataSource.Ajax()
     .Model(model => model.Id(e => e.ClinetId))
     .Create(update => update.Action("CreateIntegration", "Admin"))
     .Read(read => read.Action("ReadIntegType", "Admin"))
     .Destroy(update => update.Action("DeleteIntegration", "Admin"))
     .Update(update => update.Action("UpdateIntegration", "Admin"))
     .Events(events => events.Error("onError"))
)

解决方法 #

1. 使用Kendo UI内置图标 #

直接通过.Icon()方法给自定义命令指定Kendo自带的图标类，风格和默认按钮统一：

修改自定义命令代码：

command.Custom("Test").Click("TestConnection").Icon("check");

这里的"check"对应Kendo的k-icon k-i-check样式，你可以根据需要换成其他内置图标名称（比如"refresh"、"link"等）。

2. 使用FontAwesome图标 #

如果要使用FontAwesome图标，先确保页面已引入FontAwesome的CSS文件，然后通过.HtmlAttributes()添加图标类：

带文本+图标

command.Custom("Test")
       .Click("TestConnection")
       .HtmlAttributes(new { @class = "fa fa-plug" }); // 替换为你需要的FontAwesome类名

仅显示图标（隐藏文本）

如果只想显示图标，不显示"Test"文本，可以把按钮文本设为空，同时添加标题提示：

command.Custom("")
       .Click("TestConnection")
       .HtmlAttributes(new { @class = "fa fa-plug", title = "测试连接" });

也可以加一点CSS调整图标和文本的间距（如果保留文本的话）：

.fa {
    margin-right: 4px;
}

设置完成后，Test按钮就会和Edit/Delete按钮一样带有图标，达到期望的效果。

内容的提问来源于stack exchange，提问作者Mhd