Custom Create, Edit, Delete button icons

[Chris]

1. Set up kendo grid: 

@(Html.Kendo().Grid(Model)
.Name("gridnamehere")
.Columns(columns =>
{
columns.Bound(p => p.Name);
columns.Command(commands =>
{
commands.Edit().Text("");
commands.Destroy().Text("");
}).Width(125);
})
.ToolBar(toolbar =>
{
        toolbar.Create();
})

.Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title("Add/Edit")))
.Pageable()
.Events(e =>
{
e.Edit("onGridEditing");
e.DataBound("onGridDataBound");
e.Cancel("onGridCancel");
})
.Sortable()

etc...

 

2. javascript to replace existing buttons and display new icons (passing in the gridname because we will have several grids on the page):

 

function onGridDataBound(e) {
setKendoGridButtons(e.sender.wrapper[0].id);
}

function onGridCancel(e) {
setKendoGridButtons(e.sender.wrapper[0].id);
}

function onGridEditing(e) {
setKendoGridButtons(e.sender.wrapper[0].id);

}

function setKendoGridButtons(gridName) {
setTimeout(function () {
$("#" + gridName + " .k-grid-edit").html("<span class='fa fa-pencil fa-fw'></span>").css("min-width", "10px").removeClass("k-button");
$("#" + gridName + " .k-grid-delete").html("<span class='fa fa-times fa-fw'></span>").css("min-width", "10px").removeClass("k-button");
$("#" + gridName + " .k-grid-add").html("<span class='fa fa-plus fa-fw'></span>").css("min-width", "10px").removeClass("k-button");
});
}

 

This initially display as expected with the kendo buttons being replaced by the font awesome icons, however when we click on the Add or Edit buttons (icons), we get a screen flicker in the background where the old kendo buttons appear behind the add/edit template pop-up. This seems to happen when we change any details in the edit template popup i.e. on row change within the kendo grid?

[Kiril Nikolov]

Hello Chris,

Have you tried to follow the approach suggested in the following how-to example, please try it out and let me know if it helps:

http://docs.telerik.com/kendo-ui/web/grid/how-to/Layout/font-awesome-icons-in-custom-grid-command-buttons

Regards,
Kiril Nikolov
Telerik