Question

Каков правильный способ привязки пользовательских кнопок (класс глификонов) к столбцам/панелям Kendo?

.ToolBar(tb => 
       { 
        tb.Template("<button type=button id=gridTrainerAdd><span class='glyphicon glyphicon-plus-sign'></span></button>"); 

       }) 

Работает, но значок выглядит довольно разным, чем ожидалось (probalby вложенная проблема css).

Как использовать кнопки в столбцах? В ходе исследований я нашел только совершенно разные решения для клиентских сетей ...

Что бы это (сравните кнопки столбцов «Подробнее») быть в стороне сервера (свободные) нотации ?:

$(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"); 

Я d ожидать somthing like: columnss.Command (com => com.Custom());

Answer 1

Попробуйте добавить к вашей кнопке кнопки k-button и k-button-icontext. Это придаст кнопке стиль темы кендо.

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: Вы можете добавлять пользовательские CSS к кнопке в MVC с помощью метода HtmlAttributes.

columns.Command(command => 
{ 
    command.Edit(); 
    command.Destroy(); 
    command.Custom("Copy").Click("CopyPOLine").HtmlAttributes(new { @class = "k-copy-icon"}); 
}).Width(175); 

Update2: Также вы должны проверить custom command demo на кендо Ui сайте. Вот часть примера, скопированного ниже.

@(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>