Editor in a Window : a solution

1 posts, 0 answers
  1. Greg
    Greg avatar
    19 posts
    Member since:
    Jun 2012

    Posted 22 Nov 2012 Link to this post

    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

Back to Top