Editor in a Window : a solution

[Greg]

Folks
I had the same issue as Nick in this post:
http://www.kendoui.com/forums/mvc/editor/editor-in-window.aspx

I have found a solution that works
Firstly,  you must have the latest version on Kendo UI
You will need to have 2 views. one a partial view
The first view holds the button, the Kendo Window element and some javascript
The second holds the content that will appear in the window.

Here is the html for the first view

@model DnB.Connect.Mvc.Common.Models.CompanyModel

 

@( Html.Kendo().Window()

        .Name("DescriptionEdit")

        .Title("Edit Company Description")

        .HtmlAttributes(new { style = "width: 650px; height:600px;" })

        .Draggable(false)

        .Visible(false)

        .Resizable(resizing => resizing

            .Enabled(false)

        )

        .Modal(true)
           .Actions(a=>a.Close())

 )       

 

@Html.HiddenFor(m => m.Company.CompanyID, new { id = "CompanyID" })

<a id="ShowEditDescription" class="edit right">Edit</a>

So it has the button to be clicked, a hidden field to hold a Id and the KendoUI windows control.
Notice that the KendoUI control does not have a Content nor a LoadContentFrom method. I believe that having Content that contains a Kendo  Editor was as loading the another nested editor. I just could not get LoadContentFrom to work at all.

Once we click the button(I use css to style the link to a button), we get jQuery to do some work. Here is the javascript, which I put at the bottom of the above view

<script type="text/javascript">

       $(document).ready(function () {        

           $('#ShowEditDescription').click(function () {               

               var id = $("#CompanyID")[0].value;

               var param = { id: id };

               var sendwindow = $("#DescriptionEdit").data("kendoWindow");            

               if (sendwindow && sendwindow != undefined) {

                   sendwindow.center().open();

                   sendwindow.refresh({ url: "/Company/DisplayDescriptionEdit", data: param });

               }

           });

       });

</script>

I use jQuery to handle the link's click event.
inside that I get the Id from the hidden field
I build a parm array to hold the Id
I set a variable for the Kendo Window control
if it exists, I center it and open it
          then I refresh it with a call to the controller action, passing in the param array
                   the controller action does its thing and renders the partial view into the open window

Here is the html for the partial view that holds the Editor

@model CompanyModel

@if (Model != null && Model.Company != null  )

{   

        using (Html.BeginForm("DescriptionEdit", "Company", FormMethod.Post, new { @class = "nice",@style="width: 600px; height:550px;"}))

            {

                    <div class="row">

                        <div class="columns editing-section">

                            @(Html.Kendo().Editor()

                                          .Name("DescriptionEdit.CompanyDescription")                                                     

                                            .HtmlAttributes(new { style = "float: left; width: 600px; height:450px;" })

                                            .Encode(false)

                                            .Tools(tools => tools

                                                .Clear()

                                                .Bold().Italic().Underline()

                                                .FontName()

                                                .FontSize()

                                                .InsertUnorderedList()

                                                .InsertOrderedList()

                                                )

                                         )

 

                        </div>

                    </div>

                <div class="row">

                    <div class="two columns">

                        <input type="submit" value="Save" class="nice blue radius small button  middle5" />

                    </div>

                    <div class="two columns">

                        @Html.ActionLink("Cancel", "About", "Company", new { id = Model.Company.CompanyID }, new { @class = "nice blue radius small button middle5" })

                    </div>

                    <div class="eight columns"></div>

              </div>

    }

}

This view must be partial else you will get your default layout loaded as well. Also using a non-partial view disables the action controls on the Kendo Window.

In my struggle with this, I had to constantly delete the Temporary ASP.NET Files.
To do this, Close all instances of Visual Studio
Navigate to:     %windir%\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files
Delete all items in that folder.

I hope this helps

Regards

Greg