How can I send a value from a column in a Kendo Grid containing a button to a ClientTemplate?

Question

I am trying to send an ID from the row in the Grid to a ClientTemplate. I have a column with a delete button and I want to send the ID of the row clicked on to the ClientTemplate so I can hit the controller with an AJAX call. I know I can do this via a "Url.Action("Action","Controller")" but I am attempting to do this without the page refreshing since the Grid I am dealing with is a child View located within a Kendo Popup Window. I have tried several variations of syntax to no avail. Any help in helping to solve this matter would be greatly and truly appreciated. Below is some of the syntax I have tried.....

column
.Template(@<text></text>).Width(90)

.ClientTemplate("#= MyDeleteTemplate(CsvSubmittalID) #"); 

.ClientTemplate("<div style='text-align:center'><a class=ActionbuttonDelete href=\"" + Url.Action("DeleteCsvRow", "Project") + "/#=CsvSubmittalID#\"> [Delete] </a></div>");

.ClientTemplate("#= MyDeleteTemplate(CsvSubmittalID)#", <div style='text-align:center'><a class=ActionbuttonDelete [Delete] </a></div>"); 

I need the button to be in the column yet pass the ID of the row to the Javascript without the use of Url.Action

Answer 1

After struggling with this for a day and a half I found the syntax to achieve what I was originally going for.

 column
     .Template(@<text></text>).Width(90)

     .ClientTemplate("<div style='text-align:center; cursor:pointer '><a class=ActionbuttonDelete onclick=\"MyDeleteTemplate('#=CsvSubmittalID#')\">[Delete]</a></div>");  

And the following is my template that sent the Ajax call....

 function MyDeleteTemplate(CsvSubmittalID)
{
    $.ajax({
        url: '@Url.Action("DeleteCsvRow", "Project")',
        type: "POST",
        data: ({ id : CsvSubmittalID }),
        dataType: "json"
    })

    $('#CsvGrid').data('kendoGrid').dataSource.read();

}

The read() at the end of the Javascript updated the Grid and all is working as expected.

Answer 2

The below works for me using similar functionality. I just issue the call via $.ajax{}

....

.ClientTemplate("<a style='' id='lnkDelete#=CsvSubmittalID#' onclick='lnkDeleteOnClick(#=CsvSubmittalID#)' href='javascript:void(0)'><strong>${FirstName}, ${LastName}</strong</a>")

...

function lnkDeleteOnClick(CsvSubmittalID){
    $.ajax({
        type: "GET",
        url: '@Url.Action("DeleteCsvRow","Project")',
        datatype: "json",
        traditional: true,
        data: {CsvSubmittalID:CsvSubmittalID},
        success: function (data, status, xhr ) {
            var grid = $("#myGrid").data("kendoGrid");
            grid.dataSource.read();    
        },
        error: function (xhr, status, error) {
            console.log(error);    
        }

     });
}