1

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:

enter image description here

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

What should I do to make sure that it works?

gene
  • 2,098
  • 7
  • 40
  • 98

1 Answers1

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 k-i-file-txt'></span></button>#=data.TicketId#");

I will replace the data portion inside of the showDetails function

gene
  • 2,098
  • 7
  • 40
  • 98
G_P
  • 2,100
  • 3
  • 16
  • 18
  • Got JavaScript error `Uncaught SyntaxError: missing ) after argument list` – gene Jul 28 '20 at 15:22
  • Like I said the formatting will likely need a tweak. :) I see your edit where you mention you're going to replace the data portion inside of the showDetails funtion. Why not just set the id directly to the correct ID in the template? like so: new { id = #=data.TicketId# } – G_P Jul 28 '20 at 15:25
  • Makes sense to do it that way. Thx – gene Jul 28 '20 at 15:34
  • What if I just pass `TicketID` as a parameter to a function and inside of the function will append the ticket id to a url: `showDetails("#=data.TicketId#")` – gene Jul 28 '20 at 19:53
  • You can do that, but when you append the id to the url in the javascript function you won't be able to use the Url.Action to help to build that URL (assuming you're using a stand alone js file) – G_P Jul 28 '20 at 20:07