This is a migrated thread and some comments may be shown as answers.

How to render a PartialView as the Content of the dialog

8 Answers 865 Views
Dialog
This is a migrated thread and some comments may be shown as answers.
Marion
Top achievements
Rank 1
Marion asked on 19 May 2017, 02:00 PM

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?

8 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 22 May 2017, 02:51 PM
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.
0
Marion
Top achievements
Rank 1
answered on 22 May 2017, 03:21 PM

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?

 

0
Georgi
Telerik team
answered on 24 May 2017, 09:07 AM
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.
0
Catherine
Top achievements
Rank 1
answered on 17 Jul 2018, 12:36 PM
Would this be the best (only) way to go about putting something simple in the content of the dialog box, like a combobox? Or is there someway of putting html helpers in the .Content() section of the dialog?
0
Georgi
Telerik team
answered on 19 Jul 2018, 10:33 AM
Hello Catherine,

It is possible to use html helpers within the content of the Dialog widget. Please take a look at the following demo which demonstrates how to initialize a Kendo TreeView within a Dailog:



Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Catherine
Top achievements
Rank 1
answered on 24 Jul 2018, 11:56 AM
Thank you Georgi, I didn't realize that html helpers could be used in the string of html without the @ symbol. That will save me a lot of trouble in the future.
0
Matthew
Top achievements
Rank 1
Veteran
answered on 01 Aug 2020, 03:58 AM
Shouldn't this be 

<script>
    $("#dialog").kendoWindow({
        open: function() {
            $.ajax({
                url: "/Home/LoadDialog",
                method: 'GET',
                success: function (result) {
                    $('#dialog').html(result);
                }
            });
        }
    });
</script>
0
Georgi
Telerik team
answered on 04 Aug 2020, 01:27 PM

Hi Matthew,

I apologize for the inconvenience. Indeed it should be kendoWindow as in your snippet.

Regards,
Georgi
Progress Telerik

Tags
Dialog
Asked by
Marion
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Marion
Top achievements
Rank 1
Catherine
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Veteran
Share this question
or