Open multiple popup windows from ActionLink in Grid

[Ken De Vries]

Hi.

 

I would like to open multiple popup windows from ActionLinks within a grid.

The column template for the single-column grid is such...

        string Template =
            "<tr>" +
                "<td>" +
                    "<div class='ResultListing'>" +
                        "<div class='Technical'>" +
                            Ajax.ActionLink("#:CompanyName#, #:MfgModelNumber#", "GetDetails", "Services", new { ComponentID = "#:ComponentID#" },

                                       new AjaxOptions() { HttpMethod = "POST" }, new { @class = "ResultsTitle" }) + "<br />" +

                            "<span>MPN: #:MfgPartNumber#</span><br/>" +
                            "<span>Key: #:ConfigurationKey#</span><br/>" +
                        "</div>" +
                        "<div class='Space'>" +
                        "</div>" +
                        "<div class='Technical'>" +
                            "<span>Description: #:DesignDescription#, #:CategoryDescription# </span><br/>" +
                            "<span>Elastomers: #:(Elastomers == '0') ? 'N/A' : Elastomers#; Materials: #:(Materials == '0') ? 'N/A' : Materials#</span><br/>" +
                            "<span>Sizes: #:(Sizes == '0') ? 'N/A' : Sizes#; </span><br/>" +
                            "<span>Configuration: #:Configurations# </span><br/>" +
                            "<span>Leyla ID: #:ComponentID# (#:ComponentStatus#)</span>" +
                        "</div>" +
                        "<div id='PictureDiv' class='ControlAndLabel AlignCenter'>" +
                            "# if (URL.length > 0) { #" +
                                "<img src='#:URL#' class='ComponentImg'/><br/>" +
                                "<span>#:ImageDescription#</span>" +
                            "# } else { #" +
                                "&nbsp;" +
                            "# } #" +
                        "</div>" +
                    "</div>" +
                "</td>" +
            "</tr>"
            ;

​The Ajax.ActionLink should be able to open a new popupwindow based on the ID contained in the grid for that row.  The controller will return a partial view to the popup window...

 

        [HttpPost]
        public PartialViewResult ​GetDetails(int ComponentID)
        {

            PartialViewResult Result = PartialView("_ComponentDetailView", ComponentID);

            return (Result);
        }

The popup windows are not modal, so that multiple ​popups can be opened at the same time.  The user can click multiple links from the grid, popping up multiple detail windows at the same time.

 

The detail popups should fetch data from a database only when activated.

I am rather new to MVC and to the Kendo tools.  At this point, I am not even sure this is the best way to do it.  I am hoping a new Kendo Window can be instantiated ​by clicking the Action link in the grid and populated by somehow passing in the id of the object whose details the user wants to see.

Any help would be appreciated.

[Ken De Vries]

Finally got this figured out.  Hopefully these steps help the next guy.

Here is the Grid template.  The important parts are Bold.

        string Template =
            "<tr>" +
                "<td>" +
                    "<div class='ResultListing'>" +
                        "<div id='Replace#:ComponentID#'></div>" +
                        "<a id='Click_#:ComponentID#' href='' onclick='DoClick(#:ComponentID#); return(false);'>Click Me</a>" +
                        "<div class='Technical'>" +
                            "<span class='ResultsTitle'>#:CompanyName#, #:MfgModelNumber#</span><br/>" +
                            "<span>MPN: #:MfgPartNumber#</span><br/>" +
                            "<span>Key: #:ConfigurationKey#</span><br/>" +
                        "</div>" +
                        "<div class='Space'>" +
                        "</div>" +
                        "<div class='Technical'>" +
                            "<span>Description: #:DesignDescription#, #:CategoryDescription# </span><br/>" +
                            "<span>Elastomers: #:(Elastomers == '0') ? 'N/A' : Elastomers#;<br/>" +
                            "Materials: #:(Materials == '0') ? 'N/A' : Materials#</span><br/>" +
                            "<span>Sizes: #:(Sizes == '0') ? 'N/A' : Sizes#; </span><br/>" +
                            "<span>Configuration: #:Configurations# </span><br/>" +
                            "<span>Leyla ID: #:ComponentID# (#:ComponentStatus#)</span>" +
                        "</div>" +
                        "<div id='PictureDiv' class='ControlAndLabel AlignCenter'>" +
                            "# if (URL.length > 0) { #" +
                                "<img src='#:URL#' class='ComponentImg'/><br/>" +
                                "<span>#:ImageDescription#</span>" +
                            "# } else { #" +
                                "&nbsp;" +
                            "# } #" +
                        "</div>" +
                    "</div>" +
                "</td>" +
            "</tr>"
            ;

Here is the Ajax...

<script type="text/javascript">

    function DoClick(ClickedID)
    {

        var UpdateTargetID = "#Replace" + ClickedID;

        $.ajax({
            type: "POST",
            url: '@Url.Action("GetDetails","Services")',
            data: { ComponentID: ClickedID },
            async: "true",
            success: function (Result) {
                $(UpdateTargetID).html(Result)
            },
            Error: function (x, e) {
                alert("FAIL");
            }
        });

        return (false);
    }

</script>

Here is the partial view.  This is not completed and is just a copy of the Window basic demo. It's returned as a partial view from the controller...

 

@model int


    @(Html.Kendo().Window()
    .Name("window")
    .Title("About Alvar Aalto")
    .Content(
        @<text>

            <p>
                ComponentID: @Model
            </p>
            <p>
                Alvar Aalto is one of the greatest names in modern architecture and design.
                Glassblowers at the iittala factory still meticulously handcraft the legendary
                vases that are variations on one theme, fluid organic shapes that let the end user
                ecide the use. Interpretations of the shape in new colors and materials add to the
                growing Alvar Aalto Collection that remains true to his original design.
            </p>


        </text>
    )
    .Draggable()
    .Resizable()
    .Width(600)
    //.Actions(actions => actions.Pin().Minimize().Maximize().Close())
    //.Events(ev => ev.Close("onClose"))
    )

Here is the controller...

        [HttpPost]
        public PartialViewResult (int ComponentID)
        {

            PartialViewResult Result = PartialView("_ComponentDetailView", ComponentID);


            return (Result);
        }

​​

[Daniel]

Hello,

The Ajax.ActionLink can also be used to achieve the functionality from the last post e.g.

Ajax.ActionLink("#:CompanyName#, #:MfgModelNumber#", "GetDetails", "Services", new { ComponentID = "#:ComponentID#" },
   new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = updateTargetID }, new { @class = "ResultsTitle" }).ToHtmlString().Replace("#" + updateTargetID, "\\#" + updateTargetID)

However note that the you should generate unique Name for the window in the partial view each time it is called. You should also destroying the window in its deactivate event. Otherwise, the closed windows will remain in the DOM.
Another option would be to create the window via JavaScript in the click handler:

function DoClick(ClickedID) {
    $("<div/>").kendoWindow({
        ...
        content: {
            type: "POST",
            url: '@Url.Action("GetDetails","Services")',
            data: { ComponentID: ClickedID },
        },
        deactivate: function () {
            this.destroy();
        }
    });
}

Regards,
Daniel
Telerik

[Ken De Vries]

Thanks for the reply.  I am generating a unique name for each window instance.

However, I am not quite following the logic above for the Destroy function.  If I place the following line on the window declaration in my partial view...

    .Title("<span style='font-family:arial;'>Component Details</span>")
    .Events(a => a.Deactivate("DestroyComponentDetailWindow"))
    .etc...

JavaScript runtime error: 'DestroyComponentDetailWindow' is undefined"​

    function DestroyComponentDetailWindow()
    {
        alert("Window Destroyed");

        this.destroy();
    }

​

[Ken De Vries]

Actually, I just got this to work.  I had to move the javascript function to destroy the window outside the partial view to the calling view.  Now the window is getting destroyed properly.

Thanks for the tip.

I really like the Kendo stuff so far.   I have ​used Telerik the regular ASP.NET tools for years.

[Daniel]

Hello again,

Indeed, the event handler should be defined before the widget initialization and because the content is added dynamically to the page, the function will not be defined yet if the script tag is included after the window. You could either include the script in the main view or in the partial view before the widget definition.


Regards,
Daniel
Telerik