This is a migrated thread and some comments may be shown as answers.

How to add command column dynamically?

1 Answer 584 Views
This is a migrated thread and some comments may be shown as answers.
Dan A
Top achievements
Rank 1
Dan A asked on 31 Dec 2015, 04:26 AM

I have a grid that resembles this: 

01.var grid = $(gridName).kendoGrid({
02.    dataSource: dataSource,
03.    selectable: true,
04.    groupable: true,
05.    sortable: true,
06.    editable: "inline",
07.    toolbar: ["create"],
08.    columns: [
09.        { field: "Product", title: "Name" },
10.        { field: "Cost", title: "Cost", format: "{0:c}" },
11.        { field: "EditedOn", title: "Edited On" },
12.        { "command": ["edit", "destroy"] , "title": "   " }
13.    ]

However, the columns are actually dynamic.  The whole thing is created as a string and is passed as a variable from ASP.  It would look this:

01.var fcolumns = '[{ "field": "Product", "title": "Name" }, { "field": "Cost", "title": "Cost", "format": "{0:c}"}, { "field": "EditedOn", "title": "Edited On" }, { "command": ["edit", "destroy"] , "title": "   " }]';
03.var grid = $(gridName).kendoGrid({
04.    dataSource: dataSource,
05.    selectable: true,
06.    groupable: true,
07.    sortable: true,
08.    editable: "inline",
09.    toolbar: ["create"],
10.    columns: JSON.parse(fcolumns),

So far all this works.

The problem I am now having is that I need the command column to use a kendo template.  

Normally I would just include a template and include a kenodo.template() command in columns area.  Something like...

<script id="command-template" type="text/x-kendo-template">
    <div class="btn-group">
        <a class="k-grid-edit btn btn-default dark">
            <i class="fa fa-edit"></i>
        <a class="k-grid-destroy btn btn-default dark">
            <i class="fa fa-trash"></i>
 ... with ...

var grid = $(gridName).kendoGrid({
    dataSource: dataSource,
    selectable: true,
    editable: "inline",
    toolbar: ["create"],
    columns: [
        { field: "Product", title: "Name" },
        { field: "Cost", title: "Cost", format: "{0:c}" },
        { field: "EditedOn", title: "Edited On" },
            template: kendo.template($("#command-template").html())
    edit: function (e) {
        var commandCell = e.container.find("td:last");  //find the command column
        commandCell.html('<a class="btn btn-default dark k-grid-update" href="#"><i class="fa fa-save"></i></a><a class="btn btn-default dark k-grid-cancel" href="#"><i class="fa fa-undo"></i></a>'); //append the buttons

... but of course I cannot hardcode the columns.  So I need to somehow use the template in lieu of  { "command": ["edit", "destroy"] , "title": " &nbsp; " } but the template is using javascript so I cannot do a JSON.parse() if I just swap that in the javascript variable.

What approach should I take to add the kendo.template() dynamically?  Is there a way to add it to the columns *after* the fact?  Or is there a better way to implement this concept?




1 Answer, 1 is accepted

Sort by
Telerik team
answered on 04 Jan 2016, 02:07 PM

Hello Dan,

In order to implement such functionality you could consider adding the command column after the columns array is constructed. Similar to the following:

var columns = JSON.parse('[{ "field": "Product", "title": "Name" }, { "field": "Cost", "title": "Cost", "format": "{0:c}"}, { "field": "EditedOn", "title": "Edited On" } ]');
    template: kendo.template($("#command-template").html())
var grid = $(gridName).kendoGrid({
    columns: columns,

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Dan A
Top achievements
Rank 1
Answers by
Telerik team
Share this question