How to add command column dynamically?

[Dan A]

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.    ]

14.});

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": "   " }]';
02.
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),
11.});

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>
        <a class="k-grid-destroy btn btn-default dark">
            <i class="fa fa-trash"></i>
        </a>
    </div>
</script>

 ... 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": "   " } 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?

 

 

 

[Rosen]

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

columns.push({
    template: kendo.template($("#command-template").html())
});

var grid = $(gridName).kendoGrid({
    /*..*/
    columns: columns,
});

Regards,
Rosen
Telerik