Kendo网格带标题访问数据的按钮

Question

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

UPDATE：对不起任何混乱，但我只想对表头行与文本“名”，“姓”一个键等等......所以我们不得不

---

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

---

[td] | Joe | Schmo | None |

[td] | Joe | Bob | None |

[结束更新]

这里是剑道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

您可以使用数据绑定事件并像这样插入按钮：

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

Answer 2

有几种方法可以在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 } 

您也可以使用模板定制剑道网格。看看这个链接阅读更多：Toolbar using templates

希望这会有所帮助，快乐的编码！

Answer 3

我通常使用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设置该属性上的剑道格：

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

Answer 4

我认为你可以使用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" 
}]});