Newbie - help setting modal content

3 posts, 1 answers
  1. Chris
    Chris avatar
    2 posts
    Member since:
    Jun 2019

    Posted 06 Aug 2019 Link to this post

    I am trying to bring up a modal window and define the content of the modal from a partial view.

    None of the content is appearing in the modal.  Once I get this working I will expand on it.

    Thanks for the help!

     

    Here is the contents of the partial view file (.cshtml file in views folder)

    <div id="mytemplate">
        <center>
            <span>
                <img src="/Home/DownloadResource/16FDD8CA-03CF-492B-8DA9-F7FEFC2EE2D5" style="height: 72px;" class="fa-spin" /><br />
                <h3 class="app-title" style="display:inline; vertical-align:middle;"> The scheduler is processing. This might take a moment...</h3>
            </span>
        </center>
    </div>

    Here is the portion of JavaScript I am using to create the modal (.js file in scripts folder):
    $("#requestLoadDiv").kendoWindow({
                 modal: true,
                width: "1000px",
                title: "Event Details",
                deactivate: function deactivate() {
                    this.destroy();
                },
                actions: [
                    "Pin",
                    "Minimize",
                    "Maximize",
                    "Close"
                ],
                open() {
                    $.ajax({
                        url: "/Files/CalEventPartial.cshtml",
                        method: 'GET',
                        success: function (result) {
                            $('#requestLoadDiv').html(result);
                        }
                    });
                }
            }).data("kendoWindow").center().open();
  2.
  3. Answer
    Aleksandar
    Admin
    Aleksandar avatar
    204 posts

    Posted 07 Aug 2019 Link to this post

    Hello Chris,

    Thank you for the details and the provided code snippets.

    The Kendo Window provides a built-in functionality for asynchronously loading its content from a URL. You can find the guideline on loading data with AJAX in the documentation section and you can also review the demo here. In the API reference section you'll find further details on setting up the content configuration of the Kendo Window widget.

    Based on the provided details I can suggest that you update your JavaScript function by removing the ajax call in the open() function and configure the content with the path to the controller and action returning the desired partial view:

    $(document).ready(function () {
        $("#requestLoadDiv").kendoWindow({
            modal: true,
            width: "1000px",
            title: "Event Details",
            visible: false,
            deactivate: function deactivate() {
                this.destroy();
            },
            actions: [
                "Pin",
                "Minimize",
                "Maximize",
                "Close"
            ],
                 content: "/Controller/ActionReturningPartialView"
        }).data("kendoWindow").center().open();
    });

    I hope you'll find this helpful. Should you have any further questions please get back to me.

    Regards,
    Aleksandar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Chris
    Chris avatar
    2 posts
    Member since:
    Jun 2019

    Posted 07 Aug 2019 in reply to Aleksandar Link to this post

    That fixed my issue.  What I was missing was this:

    [RestrictPartialView]
    public ActionResult CalEventPartial()
    {
            return PartialView();
    }

Back to Top