Kendo Server Side Grid: Custom Buttons - kendo-ui

Question

What is the correct way to bind custom buttons (class glyphicons) to Kendo columns / toolbars?
.ToolBar(tb =>
{
tb.Template("<button type=button id=gridTrainerAdd><span class='glyphicon glyphicon-plus-sign'></span></button>");
})
works but icon looks quite differen than expected (probalby nested css problem).
How do I use buttons in columns? During researches I only found quite different solutions for client side grids...
What would this (compare columns button "View details") be in server side (fluent) notation?:
$(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
sortable: true,
columnMenu: true,
pageable: true,
height: 430,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ command: {
text: " View Details",
click: showDetails,
className: "fa fa-map-marker"
},
title: " ",
width: "140px"
}],
dataBound: function (e) {
e.sender.tbody.find(".k-button.fa").each(function(idx, element){
$(element).removeClass("fa fa-map-marker").find("span").addClass("fa fa-map-marker");
});
}
}).data("kendoGrid");
I'd expect somthing like:
columns.Command(com => com.Custom());

Answer 1

Try adding k-button and k-button-icontext classes to your button. It will give the button the kendo theme styling.
tb.Template("<div class='toolbar'><a class='k-button k-button-icontext k-grid-add' href=''><span class='glyphicon glyphicon-plus-sign'></span>add</a></div>");
Update:
You can add custom css to the button in MVC with the HtmlAttributes method.
columns.Command(command =>
{
command.Edit();
command.Destroy();
command.Custom("Copy").Click("CopyPOLine").HtmlAttributes(new { #class = "k-copy-icon"});
}).Width(175);
Update2:
Also you should check out the custom command demo on the kendo ui website. Here is part of the example copied below.
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(e => e.FirstName).Width(140);
columns.Bound(e => e.LastName).Width(140);
columns.Bound(e => e.Title);
columns.Command(command => command.Custom("ViewDetails").Click("showDetails")).Width(180);
})
.HtmlAttributes(new { style = "height: 400px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("CustomCommand_Read", "Grid"))
)
)
<script type="text/javascript">
var detailsTemplate = kendo.template($("#template").html());
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>