How to make a command button appear in a rowtemplate?

4 posts, 2 answers
  1. Answer
    Jason avatar
    5 posts
    Member since:
    Oct 2013

    Posted 10 Oct 2013 Link to this post

    I'm trying to use some of Kendo's Grid options together.
    I have created a row template with some fields, but I can't find how to include edit and delete buttons in the custom row template.

    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr data-uid="#: uid #">
                <span>#: Name #</span>
                <span>#: CreatedBy #</span>
                <span>#: kendo.format("{0: dd-MMM-yyyy}", CreatedDate) #</span>
                <span>#: InUse #</span>
    My datagrid configuration has the following columns:
    columns: [
            { field: "Name", title: "Skill", width: "130px" },
            { field: "CreatedBy", title: "Created by", width: "130px" },
            { field: "CreatedDate", title: "Created at", width: "130px" },
            { field: "InUse", title: "In use?", width: "130px" },
            { command: ["edit", "destroy"], title: " " }
    If I don't include the rowtemplate in de datagrid configuration, the edit and delete button do show up.
    But I need the template:
    rowTemplate: kendo.template($("#rowTemplate").html())
    Because I want to add custom classes to my fields and rows or put multiple values in one row.

    Any help would be appreciated!
  2. Answer
    Alexander Popov
    Alexander Popov avatar
    1444 posts

    Posted 11 Oct 2013 Link to this post

    Hello Jason,

    Since the row template overrides the content of all cells you should add the buttons manually, as if they were generated from the Grid:  
        <a class="k-button k-button-icontext k-grid-edit" href="#"><span class="k-icon k-edit"></span>Edit</a>
        <a class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-delete"></span>Delete</a>


    Alexander Popov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Garry
    Garry avatar
    44 posts
    Member since:
    Sep 2012

    Posted 29 Mar 2017 in reply to Alexander Popov Link to this post


    Surely we would need to ne able to access the selected row from the button click callback?

    Can you post sample code of how one of the fields of the selected row can be accessed in the button callback function?


    Kind Regards, Garry.

  4. Viktor Tachev
    Viktor Tachev avatar
    2478 posts

    Posted 31 Mar 2017 Link to this post

    Hi Garry,

    If you would like to access the selected rows in Grid you can use the select() method. Please check out the article below that describes the method in more details.

    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top