Question

我需要在kendo网格的标题栏中有一个按钮。此按钮需要能够在网格对象中调用函数（GetFoo）。

更新：很抱歉有任何混淆，但我只想在表格标题行上有一个按钮，文字“名字”，“姓氏”等...所以我们有

[th] |名字|姓氏|标题|按钮（调用getFoo（））

[td] | Joe | Schmo |无|

[td] |乔|鲍勃|无|

[结束更新]

以下是来自kendo ui的一些修改代码

$(document).ready(function () {
    var grid = $("#grid").kendoGrid({
    dataSource: {
      pageSize: 20,
      data: createRandomData(50)
    },
    getFoo:function(){ 
      alert('bar');
    },
    pageable: true,
    height: 550,
    columns: [
      { field: "FirstName", title: "First Name", width: "140px" },
      { field: "LastName", title: "Last Name", width: "140px" },
      { field: "Title" },
      { field: '',title: "<button onClick='getFoo()' value='foo'>sdf</button>" }]
    }).data("kendoGrid");
});

感谢任何帮助！

Answer 1

有几种方法可以在Kendo网格中添加自定义按钮。一种方法是将其添加为工具栏项。您可以在此处了解有关此实施的更多信息Kendo custom command button in toolbars

.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='customCommand()' href='#'></span>Cutom Command</a>"))

接下来将是每行一个内联。您可以在此处阅读如何实施该Kendo grid custom commands

但是你要注意的代码是：

 $(document).ready(function () {
                var grid = $("#grid").kendoGrid({
                    dataSource: {
                       pageSize: 20,
                       data: createRandomData(50)
                    },
                    pageable: true,
                    height: 550,
                    columns: [
                        { field: "FirstName", title: "First Name", width: "140px" },
                        { field: "LastName", title: "Last Name", width: "140px" },
                        { field: "Title" },
                        { command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
                }).data("kendoGrid");

                wnd = $("#details")
                    .kendoWindow({
                        title: "Customer Details",
                        modal: true,
                        visible: false,
                        resizable: false,
                        width: 300
                    }).data("kendoWindow");

                detailsTemplate = kendo.template($("#template").html());
            });

更多这一行：

{ command: { text: "View Details", click: showDetails }

您还可以使用模板自定义Kendo网格。请查看此链接以了解详情：Toolbar using templates

希望这有帮助，并且编码愉快！

Answer 2

我通常使用Kendo模板来实现这一目标。

在您的JavaScript中将该行更改为：

{ field: " " title: " ", template: kendo.template($("#button-template").html()) }

在HTML标记中添加：

<script id="button-template" type="text/x-kendo-template">
    <button type="button" onClick='getFoo()' value='foo'>
        Button Action
    </button>
</script>

或者，以下是如何在网格标题中添加单个按钮：

创建你的剑道模板：

<script type="text/x-kendo-template" id="GridToolbar">
    <div class="toolbar">
        <button type="button"  onClick='getFoo()' value='foo'>Button Action</button>
    </div>
</script>

在JS中的kendo网格上设置此属性：

toolbar: kendo.template($("#GridToolbar").html()),

Answer 3

我认为你可以使用headerTemplate 检查这个工作示例

dojo example

$("#grid").kendoGrid({
 columns: [{
     field: "name",
 }, {
     field: "FirstName",
     title: "First Name",
     width: "140px"
 }, {
     field: "LastName",
     title: "Last Name",
     width: "140px"
 }, {
     field: "Title",
     headerTemplate: 'Title <button id="foo" onclick="foo()">foo</button>'
 }],
 dataSource: [{
     name: "Jane Doe"
 }, {
     name: "John Doe"
 }]});

Answer 4

您可以使用dataBound事件并插入如下按钮：

$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
  pageSize: 20,
  data: createRandomData(50)
},
getFoo:function(){ 
  alert('bar');
},
pageable: true,
height: 550,
dataBound: grid_dataBound,
columns: [
  { field: "FirstName", title: "First Name", width: "140px" },
  { field: "LastName", title: "Last Name", width: "140px" },
  { field: "Title" },
  { field: '',title: "<button onClick='getFoo()' value='foo'>sdf</button>" }]
}).data("kendoGrid");
});

function grid_dataBound(e) {
var grid = this;

var lastHeaderCell = grid.thead.find("th").last();
var button = $("<button value='foo'>sdf</button>");
lastHeaderCell.html(button);
$(button).click(function(){
    grid.options.getFoo();
});
}

带有标题按钮的Kendo网格，用于访问数据

4 个答案: