This is a migrated thread and some comments may be shown as answers.

How to make a command button appear in a rowtemplate?

3 Answers 341 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 10 Oct 2013, 12:27 PM
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 #">
        <td>
            <span>#: Name #</span>
        </td>
        <td>
            <span>#: CreatedBy #</span>
        </td>
        <td>
            <span>#: kendo.format("{0: dd-MMM-yyyy}", CreatedDate) #</span>
        </td>
        <td>
            <span>#: InUse #</span>
        </td>
        <td>
     HOW DO I GET THE COMMAND BUTTONS HERE?
        </td>
    </tr>
</script>
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!

3 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Popov
Telerik team
answered on 11 Oct 2013, 08:42 AM
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:  
<td>
    <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>
</td>

 

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Garry
Top achievements
Rank 2
Veteran
answered on 29 Mar 2017, 01:22 PM

Alexander

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.

0
Viktor Tachev
Telerik team
answered on 31 Mar 2017, 12:52 PM
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.



Regards,
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.
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Garry
Top achievements
Rank 2
Veteran
Viktor Tachev
Telerik team
Share this question
or