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

我已经为我的kendo网格实现了编辑和命令按钮，现在需要用我拥有的图标替换按钮。任何人可以证明我是如何做的以下是我的观点用图标替换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")) 
    ) 
    )

应用解决方案

来源

2017-03-20 Tom

您可以按照thread后。迅速总结了一切，你需要添加新的事件

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

，然后实现JS功能

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

来源

2017-03-20 14:42:24

我申请你的逻辑，也加入自定义CSS .custom图标类{ background-image：url（'../../ Images/Modify.png'）; } 但得到一个奇怪的输出。更新了帖子。我相信只有图标应该出现，而不是按钮 – Tom

它可能是“stange”，因为默认情况下'background-repeat'值是'repeat'。我刚才展示了如何实现这一点。你会决定如果你想按钮的图标，或只是图标或wharever –

我想只显示图像，而不是按钮 – Tom

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

回答

相关问题