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