Question

将自定义按钮（类字形符号）绑定到Kendo列/工具栏的正确方法是什么？

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

              })

有效，但图标看起来比预期的差异很大（probalby嵌套的CSS问题）。

如何在列中使用按钮？在研究期间，我只发现了客户端网格的完全不同的解决方案......

这会（比较列按钮＆＃34;查看详细信息＆＃34;）是服务器端（流畅）表示法吗？：

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

我期待的是： columns.Command（com =＆gt; com.Custom（））;

Answer 1

尝试将k-button和k-button-icontext类添加到按钮中。它将为按钮提供kendo主题样式。

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方法将自定义css添加到MVC中的按钮。

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

<强> UPDATE2：您还应该查看kendo 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>

剑道服务器侧网格：自定义按钮

1 个答案: