How to render a PartialView as the Content of the dialog

4 posts, 0 answers
  1. Marion
    Marion avatar
    22 posts
    Member since:
    Nov 2016

    Posted 19 May Link to this post

    I have a PartialView that contains two linked Kendo ListBoxes and some other Textboxes and some hidden fields. I want to render the form inside of the Kendo Dialog. I can find examples of inserting these types of controls here: http://demos.telerik.com/aspnet-mvc/dialog/treeview-integration 

    But I am trying to using this partial form a bound MVC form to update the object model.

    How do I render a PartialView in a dialog?

  2. Georgi
    Admin
    Georgi avatar
    184 posts

    Posted 22 May Link to this post

    Hello Marion,
      
    In the method .LoadContentFrom you can specify where the dialog to request for it's content. The demo bellow reveals how use LoadContentFrom.

     
    Also the open event is fired once the dialog is opened. It is possible to request and load the partial view when the dialog is opened and push the result inside the dialog. The code snipped bellow illustrates the aforementioned approach.

    <script>
        $("#dialog").kendoWindow({
            open() {
                $.ajax({
                    url: "/Home/LoadDialog",
                    method: 'GET',
                    success: function (result) {
                        $('#dialog').html(result);
                    }
                });
            }
        });
    </script>


    Regards,
    Georgi
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Marion
    Marion avatar
    22 posts
    Member since:
    Nov 2016

    Posted 22 May in reply to Georgi Link to this post

    None of this works with the Kendo DIALOG.

    Kendo Dialog doesn't have a method LoadContentFrom.

    Are you implying that I must use a Kendo Window (not a Kendo Dialog) in order to make a PartialView the contents of a popup?

     

  4. Georgi
    Admin
    Georgi avatar
    184 posts

    Posted 24 May Link to this post

    Hello Marion,

    The second approach works for Kendo Dialog on my end. Here is the configuration I have done:

    Dialog Configuration:
    <div id="dialog"></div>
     
    <script>
        var data;
        $("#dialog").kendoDialog({
            open() {
                $.ajax({
                    url: "/home/loaddialog",
                    method: 'GET',
                    success: function (result) {
                        $('#dialog').html(result);
                    }
                });
            }
        });
    </script>

    LoadDialog Action:

    public ActionResult LoadDialog()
           {
               return PartialView("DialogPartial");
           }


    Partial view:
    <input id="color" value="1" style="width: 100%;" />
    <script>
        $(document).ready(function () {
            var data = [
                { text: "Black", value: "1" },
                { text: "Orange", value: "2" },
                { text: "Grey", value: "3" }
            ];
     
            $("#color").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data,
                index: 0,
            });
     
        });
    </script>

    If this doesn't work for you please send me the project or isolated runnable sample where the issue occurs so I can debug it locally and help you more efficiently.


    Regards,
    Georgi
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top