剣道サーバーサイドグリッド：カスタムボタン

Question

カスタムボタン（クラスグリフィン）を剣道の列/ツールバーにバインドする正しい方法は何ですか？

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

       }) 

アイコンは予想よりもかなり違って見えます（入れ子になった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は次のようなものを期待します： columns.Command（com => com.Custom（））;

Answer 1

ボタンにkボタンとkボタンアイコンのクラスを追加してみてください。それはボタンに剣道のテーマスタイリングを与えるでしょう。

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

更新： あなたはHtmlAttributes方法でMVCでのボタンにカスタムCSSを追加することができます。

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

アップデート2： また、あなたが剣道UIウェブサイト上custom command demoをチェックアウトする必要があります。ここでは以下の例の一部です。

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