データにアクセスするタイトルの剣道グリッド

Question

剣道グリッドのヘッダーバーにボタンが必要です。このボタンは、グリッドオブジェクト内の関数（GetFoo）を呼び出すことができる必要があります。

UPDATE：混乱のため申し訳ありませんが、私はテキストのみ「姓」、「姓」などと、テーブルのヘッダー行に1つのボタンをしたい...だから私たちは

---

を持っていると思います[th] |名|姓タイトル|ボタン（getFoo（）を呼び出します）

---

[td] | Joe | Schmo | None |

[td] | Joe |ボブ|なし|ここで

[終了更新]

は、すべてのヘルプは高く評価され剣道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

あなたはデータバインドされたイベントを使用することができ、この チェックのために、この実施例をheaderTemplateを使用することができると思います次のようにボタンを挿入します。

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

剣道グリッドにカスタムボタンを追加する方法はいくつかあります。 1つはツールバー項目として追加することです。あなたは、次の行につき1つのインラインを持っているだろう

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

Kendo custom command button in toolbarsここでの実装についての詳細を読むことができます。

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

ます。また、カスタマイズしたテンプレートを使用することができます。詳しいので、このライン

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

：あなたは、あなたに注意を払うようにしたいことをここ1 Kendo grid custom commands

しかし、コードを実装する方法を読むことができます剣道グリッド。もっと読むためにこのリンクをチェックしてください：Toolbar using templates

これは役立ちます、そして幸せなコーディングです！

Answer 3

私は通常、これを達成するために剣道のテンプレートを使用します。

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

そして、あなたのHTMLマークアップを追加で：あなたのJavaScriptで

はにその行を変更

<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

は、私はあなたが

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