CODEWITHSUNDEEP
kendo-uikendo-grid
user1076698
user1076698

Reputation: 691

Data and button in same column kendo grid

I am working on HTML5 and javascript.

Is it possible to add data and button in the same column in kendo grid.

Need help.

Upvotes: 0

Views: 493

Answers (2)

Satya Ranjan Sahoo
Satya Ranjan Sahoo

Reputation: 1086

Also in view page, you can use ClientTemplate to achieve this:

@(Html.Kendo().Grid<ViewModel>().Name("grid")
                  .DataSource(src => src.Ajax().PageSize(10).Read(read => read.Action("Action", "Controller"))
                  .Columns(col =>
                  {
                      col.Bound(e => e.Name).ClientTemplate("<input type='button' value='CLICK' onclick='XYZ();'><label>#= (Name== null) ? ' ' : Name #</label>");
                  })
                  .Selectable()
                  .Scrollable()
            )

Upvotes: 1

OnaBai
OnaBai

Reputation: 40897

Yes, it is! Simply use a template for it. Example:

Define the following template:

<script id="template" type="kendoui/template">
    <button class="ob-click-me k-button">Click me</button>
    <span>#= LastName #</span>
</script>

and the grid as: 

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    ...
    columns   :
    [
        { field: "FirstName", width: 90, title: "First Name" },
        { 
            field: "LastName", 
            width: 200, 
            title: "Last Name",
            template: $("#template").html() 
        }
    ]
}).data("kendoGrid");

You can see a running example even defining a handler for the button here: http://jsfiddle.net/OnaBai/qe3tf4tx/

Upvotes: 0

Related Questions