[Solved] Newbie - help setting modal content

[Chris]

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

[Aleksandar]

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

[Chris]

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

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