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

Adding custom button to row template

3 Answers 659 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Huw Lloyd
Top achievements
Rank 1
Huw Lloyd asked on 05 Feb 2014, 10:40 AM
Hi

I can add buttons to a command column in a grid and trigger click events fine. What I want to do now is add a command button to my row template

In the row template I have

#if (IsMe) {# <a class="k-button k-grid-delete">Delete</a> #} #

And then in my document ready function I have

$("#grid").on("click", ".k-grid-delete", function () {
              alert("click delete command");
          });

This works and the message appears whenever I click on one of the delete buttons, however what I want to do when the user clicks is make an ajax call that deletes the item from its ID property....

When using a command column I would do something like

function delete(e) {
          e.preventDefault();
 
          var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

i could then use dataItem.ID to reference the ID of the relevant row.

How can I do this for the button I have created above in the row template?

Many thanks


3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 07 Feb 2014, 08:20 AM
Hi Huw,

In case the click event is delegated manually the context ('this' keyword) will be different. In order to obtain the data item you should use the following approach.

$("#grid").on("click", ".k-grid-delete", function (e) {
    var row = $(e.target).closest("tr");
    var grid = $("#grid").data("kendoGrid");
    var dataItem = grid.dataItem(row);
});

I hope this will help.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Huw Lloyd
Top achievements
Rank 1
answered on 24 Feb 2014, 08:20 AM
Hi,

I though what you provided worked, however row is not picking up the relevant row...

If I add 4 rows to my grid, so each row has its own delete button, then when I click delete for ANY row, it always returns the last row that was added irrespective of the row I actually selected. How do I get it to return the row I selected.

Many thanks in advance 
0
Huw Lloyd
Top achievements
Rank 1
answered on 24 Feb 2014, 08:38 AM
No problem.... I was being lazy using a table within my row template for formatting so naturally the row was picking up the row within my template table...

Removed the table and replaced with Css layout and it works perfectly again!!
Tags
Grid
Asked by
Huw Lloyd
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Huw Lloyd
Top achievements
Rank 1
Share this question
or