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

4 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
        }

  3. D
    D avatar
    1 posts
    Member since:
    Oct 2014

    Posted 18 Dec 2014 in reply to RichardAD Link to this post

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

  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    1511 posts
    Member since:
    Mar 2015

    Posted 23 Dec 2014 Link to this post

    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):


    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     

Back to Top