Open multiple popup windows from ActionLink in Grid

6 posts, 0 answers
  1. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 09 Nov 2015 Link to this post

    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.

  2. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 10 Nov 2015 in reply to Ken De Vries Link to this post

    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);
            }

    ​​

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 12 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 12 Nov 2015 in reply to Daniel Link to this post

    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();
        }

  6. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 12 Nov 2015 in reply to Ken De Vries Link to this post

    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.

  7. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 16 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready