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

Question

我已经为我的kendo网格实现了编辑和命令按钮，现在需要用我拥有的图标替换按钮。任何人都可以告诉我它是如何完成的 以下是我的观点

 @(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");
          }); 

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

在我的示例中，我使用了Font Awesome中的Edit和Trash图标。你可以在那里应用你想要的任何自定义类。

Answer 2

您可以按照thread进行操作。 快速总结一切，你需要添加新的事件

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

然后实现JS函数

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