Custom Create, Edit, Delete button icons

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?