用图标替换剑道网格上的编辑和删除按钮

Question

我已经为我的剑道网格实现了编辑和命令按钮，现在需要用我拥有的图标替换按钮。谁能告诉我它是如何完成的 以下是我的看法

 @(Html.Kendo().Grid<CC.GRP.MCRequest.ViewModels.TeamViewModel>()
    .Name("GridTeam")
    .Columns(columns =>
    {

        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
        columns.Bound(o => o.TeamID).Hidden();
        columns.Bound(o => o.CountryCode);
        columns.Bound(o => o.TeamName);
        columns.Bound(o => o.TeamDescription);

    })
    .ToolBar(toolbar => toolbar.Create())
     .Editable(editable => editable.Mode(GridEditMode.PopUp)
     .TemplateName("TeamEdit")
        .Window(w => w.Width(500))
     )
    .Pageable()
    .Sortable()
    .Filterable()
    .Scrollable()
    .Groupable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(t => t.TeamID))
        .Create(create => create.Action("Team_Create", "Admin"))
        .Read(read => read.Action("Team_Read", "Admin"))
        .Update(update => update.Action("Team_Update", "Admin"))
        .Destroy(update => update.Action("Team_Delete", "Admin"))
    )
    )

涂抹溶液后

Answer 1

我最近有同样的问题，并使用 Command 的 IconClass 属性解决了这个问题。

          columns.Command(command => {
            command.Edit().Text(" ").IconClass("fa fa-edit");
            command.Destroy().Text(" ").IconClass("fa fa-trash");
          }); 

确保将文本设置为空格。这会隐藏任何文本。然后在 IconClass 中应用您想要的任何类。

在我的示例中，我使用了 Font Awesome 中的“编辑”和“垃圾箱”图标。您可以在那里应用任何您想要的自定义类。

Answer 2

您可以关注此主题。 快速总结一切，您需要添加新事件

.Events(e => e.DataBound("onRowBound"))

然后实现JS功能

function onRowBound(e) {
    $(".k-grid-edit").find("span").hide()
    $(".k-grid-edit").addClass("custom-icon-class");
}

Answer 3

如果您不想使用 font Awesome 或其他库，则可以使用已包含的 kendo Web 字体图标（如果您正在使用 kendo）。对于垃圾桶，图标类别是“k-icon k-i-trash”。

.Columns(col => {
   col.Command(c => {
       c.Destroy().Text(" ").IconClass("k-icon k-i-trash");
   }
 })

文档：https://docs.telerik.com/aspnet-core/styles-and-layout/sass-themes/font-icons