How to send parameters to JavaScript function from inside of a ClientTemplate of a Kendo.Grid?

Question

My view has a Kendo Grid with a ClientTemplate defined for a column in the following way:

.ClientTemplate("<button type ='button' class='k-button btn-icon-sm btn-view-detail' id='btnTicketDetail'  onclick='showDetails(this)'><span class='k-icon k-i-file-txt'></span></button>#=data.TicketId#");

The above code calls JavaScript function showDetails

This function is defined in the same view as a Kendo Grid:

function showDetails(e) {
    var grid = $("#VarianceTicket").data("kendoGrid");
    var row = $(e).closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var item = grid.dataItem(row);
    var ticketDetailsUrl = "@Url.Action("Index", "VarianceTicketDetail", new System.Web.Routing.RouteValueDictionary(new { id = "data" }), Request.Url.Scheme)".replace("data", item.TicketId);
    var newURL = ticketDetailsUrl;
    window.open(newURL, '_blank');
}

Now, I need to move that function to a common Site.js file.

When I did that, the following line in the function is not right:

var ticketDetailsUrl = "@Url.Action("Index", "VarianceTicketDetail", new System.Web.Routing.RouteValueDictionary(new { id = "data" }), Request.Url.Scheme)".replace("data", item.TicketId);

That's how it looks like:

Basically, as I see, it cannot build @Url.Action string.

What should I do to make sure that it works?

Answer 1

You can alter your showDetails method to accept the url as a parameter, and update your ClientTemplate to pass that parameter using the @Url.Action. Like so:

ShowDetails method:

function showDetails(e, url) {
    var grid = $("#VarianceTicket").data("kendoGrid");
    var row = $(e).closest("tr");
    var rowIdx = $("tr", grid.tbody).index(row);
    var item = grid.dataItem(row);
    var ticketDetailsUrl = url;
    var newURL = ticketDetailsUrl;
    window.open(newURL, '_blank');
}

ClientTemplate (using string concatenation and adding blank lines for readability, formatting may need a tweak, I can't test this locally right now):

.ClientTemplate("<button type ='button' class='k-button btn-icon-sm btn-view-detail' id='btnTicketDetail'  onclick='showDetails(this, " + 

Url.Action("Index", "VarianceTicketDetail", new System.Web.Routing.RouteValueDictionary(new { id = "data" }), Request.Url.Scheme)".replace("data", #=data.TicketId#) +

")'><span class='k-icon k-i-file-txt'></span></button>#=data.TicketId#");

---

I have changed the ClientTemplate to the following logic: .ClientTemplate("<button type ='button' class='k-button btn-icon-sm btn-view-detail' id='btnTicketDetail' onclick='showDetails(this, " + Url.Action("Index", "VarianceTicketDetail", new System.Web.Routing.RouteValueDictionary(new { id = "data" }), Request.Url.Scheme) + ")'><span class='k-icon ki-file-txt'></span></button>#=data.TicketId#");

I will replace the data portion inside of the showDetails function