Placing Button in all rows of Kendo Grid in a Column

Question

Need your inputs to achieve this:

I have a Kendo Grid where I can add new rows and edit rows with Inline editing mode. This Kendo Grid is having different columns. In this, one column will be rendered with Button (placing Button in all the row for a column).

When I read the data, I can able to see the Button on the column. Kendo Grid with Button Column

But, when I try to add row or edit row, the button will be replaced with normal text box. Button not visible when Grid is in Edit Mode

How can I show Button while adding a new row or editing an existing row with the template.!?

I'll be waiting for for your inputs.

Thank You.

Naveen Naveen · Accepted Answer · 2018-05-17T12:27:58

Found this piece of code snippet here. Just thought to share this information, this could help others also:

var ds = [
{ ID : 1, RowID : 1, BillNumber : "bn1" },
{ ID : 2, RowID : 2, BillNumber : "bn2" },
{ ID : 3, RowID : 3, BillNumber : "bn3" }];

var grid = $("#grid").kendoGrid({
dataSource: ds,
columns: [
    { field: "ID", Title: "ID", filterable: false, sortable: false, hidden: false },
    { field: "BillNumber", Title: "BillNumber", filterable: false, sortable: false, hidden:true },
    {
        title: "Preview ", 
        template: '<input type="button" class="k-button info" name="info" value="Info" />',                       
        headerTemplate: '<label>  <input type="checkbox" id="checkAll"/>Print All</label>', 
        filterable: false, 
        sortable: false, 
        width: 100                     
    }
]}).data("kendoGrid");

$(".info").on("click", function() {
    var row = $(this).closest("tr");
    var item = grid.dataItem(row);
    alert("Selected item is:" + JSON.stringify(item));
});

Placing Button in all rows of Kendo Grid in a Column

1 Answers