Grid row template, how do I make a command button appear?

[Richard]

My grid was working fine when I did not use rowTemplate:  The columns and command buttons were right where I wanted them. 

When I switched using a rowTemplate the command buttons no longer appear. 
- What markup needs to be in the template?
- If there is command markup, do I still need the command: property: in my fields: setting ?

        $("#grid").kendoGrid({
            dataSource: dataSource1,
               rowTemplate: kendo.template($("#row-template").html().replace('k-alt', '')),
            altRowTemplate: kendo.template($("#row-template").html()),
            pageable: true,
            height: 512,
            toolbar: [
                {    name:"create", text:"New Folder", id:"add"}],
            columns: [
                {    field: "name", title: "Name" },
                {    field: "created", title: "Created", width: "12em" },
                {    command: [ {name:"edit",text:"Rename"}, "destroy"], title:" ", width:"17em"} ],
            editable: { mode:"popup" }
        });

...html...
    <script id="row-template" type="text/x-kendo-template">
    <tr class='k-alt'>
    <td>
        <a class='viewlink' href='<?sas= &openURL?>'><img alt='Open ${name}' src='<?sas= &iconURL?>' >${name}</a>
    </td>
    <td>${created}</td>
<td>WHAT GOES HERE TO GET COMMAND BUTTONS ?</td>
     </tr>
    </script>


Thanks

[Jerry T.]

This is how we setup a particular grid (of course, the image is one we created in the sprite we use in the CSS):

Datasource schema configuration (JavaScript):

schema: {
    data: "d",
    model: {
        id: "ItemId",
        fields: {
            ItemId: { editable: false, nullable: false },
            ItemName: { editable: true, type: "string" },
            CostPerUnit: { editable: true, type: "number" },
            Units: { editable: true, type: "int" },
            Cost: { editable: true, type: "number" },
            UnitRevenue: { editable: true, type: "number" },
            Revenue: { editable: true, type: "number" }
        }
    }
},

Column definition (JavaScript):

var columns = [
    { command: ["edit" ], title: " ", width: 35 },
    { field: "ItemName", title: "Item Name", width: 47 },
    { field: "CostPerUnit", title: "Unit Cost", width: 70 },
    { field: "Units", title: "Units", width: 35 },
    { field: "Cost", title: "Cost", width: 90 },
    { field: "UnitRevenue", title: "Unit Rev", width: 70 },
    { field: "Revenue", title: "Revenue", width: 90 },
];

 

HTML template:

 <tr data-uid="#= uid #">
    <td align="center">
        <div class="metro-ui metro-ui-edit " title="Edit" data-id="#= ItemId #" />
    </td>
    <td title="#= ItemName #">
        #= ItemName #
    </td>
    <td title="#= CostPerUnit #" align="right">
        #= kendo.toString(CostPerUnit, "c2") #
    </td>
    <td title="#= Units #" align="right">
        #= Units #
    </td>
    <td title="#= Cost #" align="right">
        #= kendo.toString(Cost, "c2") #
    </td>
    <td title="#= UnitRevenue #" align="right">
        #= kendo.toString(UnitRevenue, "c2") #
    </td>
    <td title="#= Revenue #" align="right">
        #= kendo.toString(Revenue, "c2") #
    </td>
</tr>

CSS:

.metro-ui {
    width: 16px;
    height: 16px;
    background: url("../content/themes/metro/images/metro-ui.png") no-repeat;
}

    .metro-ui.metro-ui-open,
    .metro-ui.metro-ui-document,
    .metro-ui.metro-ui-preview-document,
    .metro-ui.metro-ui-add,
    .metro-ui.metro-ui-edit,
    .metro-ui.metro-ui-import-document,
    .metro-ui.metro-ui-delete {
        cursor: pointer;
    }
   
    .metro-ui.metro-ui-open {
        background-position: 0 -16px !important;
    }

    .metro-ui.metro-ui-document {
        background-position: 0 0 !important
    }
   
    .metro-ui.metro-ui-preview-document {
        background-position: 0 -32px !important
    }
   
    .metro-ui.metro-ui-add {
        background-position: 0 -48px !important
    }
   
    .metro-ui.metro-ui-edit {
        background-position: 0 -64px !important
    }

    .metro-ui.metro-ui-import-document {
        background-position: 0 -80px !important
    }
   
    .metro-ui.metro-ui-delete {
        background-position: 0 -96px !important
    }

[D]

<a class="k-button k-button-icontext">Button</a>

[Vladimir Iliev]

Hi Richard,

Please check the example below of adding the default Grid commands to existing row template (please note that adding the CSS classes "k-edit" and "k-delete" makes the commands functional):

• Grid: default commands in row template

Regards,
Vladimir Iliev
Telerik