Kendo grid with button in title to access data

Question

I need to have a button in the header bar of a kendo grid. This button needs to be able to call a function (GetFoo) in the grid object.

UPDATE: Sorry for any confusion, but I only want one button on the table header row with the text "First Name", "Last Name" etc... So we'd have

---

[th]|First Name | Last Name | Title | button (calls getFoo())

---

[td]|Joe |Schmo |None |

[td]|Joe | Bob |None |

[End update]

Here is some modified code from 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");
});

Any help is appreciated!

Answer 1

You could use the dataBound event and insert the button like this:

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

There are several ways to add custom buttons in a Kendo grid. One would be to add it as a toolbar item. You can read more about the implementation here Kendo custom command button in toolbars

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

Next would be to have one inline per row. You can read how to implement that one here Kendo grid custom commands

But the code you want to pay attention to:

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

More so this line:

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

You can also use templates to customize Kendo grids. Check out this link to read more: Toolbar using templates

Hope this helps, and happy coding!

Answer 3

I usually use a Kendo template to achieve this.

in your JavaScript change that line to:

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

And in your HTML markup add:

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

Or, here is how you can add a single button to the header of your grid:

Create your kendo template:

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

Set this property on your kendo grid in JS:

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

Answer 4

i think you can use headerTemplate for this check this working example

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