javascriptasp.net-mvc-4kendo-gridclient-templates

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


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


Solution

  • 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.