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

2 posts, 0 answers
  1. RichardAD
    RichardAD avatar
    105 posts
    Member since:
    Feb 2012

    Posted 23 May 2012 Link to this post

    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



  2. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 24 May 2012 Link to this post

    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
        }

Back to Top