javascriptasp.net-mvckendo-uikendo-gridkendo-window

Open popup window with client template in kendo ui razor


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 ??


Solution

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

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