Open popup window with client template in kendo ui razor

Question

I am using kendo grid to display data and i want to open popup window when user click on one of the column having string. my code is

columns.Bound(c => c.ResumeFileUrl).EditorViewData(new { PartNo = "#: PartNo #" }).EditorTemplateName("ResumeFileUrlEditor").ClientTemplate("<a href='"  + "/#=Id#'>View Details</a>");

and my jquery is:

$("#mId").click(function () {
    $("#Proposal").data("kendoWindow").open();
});

and my Kendo window is:

@(Html.Kendo().Window()
    .Name("Proposal")
    .Title("Proposal")
    .Iframe(true)
    .Visible(false)
    .Draggable()
    .Resizable()
)

when i click on column string the popup window is not opening. what is wrong with the code ??

Answer 1

Change your client template to this:

"<a href='\\\\#' data-id='#=Id#'>View Details</a>"

This will print a link like: <a href='#' data-id='1'>View Details</a>. Then change your jQuery to this:

$("[data-id]").on("click", function () {
    var id = $(this).data('id'); // Here's the Id of the item which user have clicked
    $("#Proposal").data("kendoWindow").open();
});

What is happening?

• The link was set to have no url or a valid anchor(href="#") hence clicking on it won't perform any visible action to the user;
• Was added a data attribute the each item called id, so you can access it by .data("id") with jQuery.

Now inside the click event you have the clicked id and you can open your detail view with it.