This is a migrated thread and some comments may be shown as answers.

Custom Create, Edit, Delete button icons

1 Answer 1114 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 14 May 2015, 11:56 AM

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?

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 18 May 2015, 07:20 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or