Can't refresh modal window after closing.

[Andrew]

I'm using a Kendo window to create a modal form launched
from a dropdown menu. The window launches fine and submits the form, which is a
CSHTML partial view. The problem is if I close the form using the form close
icon (X) I can no longer refresh or reload the form, also my cancel button is
round tripping to the server and loading the parent form in order to close out
the model window (this is a bad work around). Can you point me to the documentation
 on the kendo window close event which would allow me to refresh the modal window
 after it has been closed by the (X) icon and how I would implement a close button on a partial form loaded
from a controller into a kendo window. That’s 2 questions. Here is the code:

@* This is the widget configure window *@

<div id="WidgetWindow">

    @(Html.Kendo().Window()
    .Name("WidgetConfigWindow")
    .Title("Configure Widget")
   .Animation(false)  
   .Draggable()
    .Resizable()
    .Width(736)
    .Visible(false)
     .Modal(true)
 )
</div> 

  //invoke kendo window with partial window form
    //to add a widget to an area

    function NewWidgetWindow(areaname, widgettype) {
        var windowWidget = $("#WidgetConfigWindow").data("kendoWindow");
        var dropdownlist = $("#dashboards").data("kendoDropDownList");
        var dataItem = dropdownlist.dataItem();
        var parms = { "DashboardID": dataItem.DashboardID, "AreaName": areaname,         "WidgetType":
widgettype };
        windowWidget.refresh({
            data: parms,
            url: "@Url.Action("GetWidgetWindow", "Dashboard")"
            });
            windowWidget.center();
            windowWidget.open();
    }

public ActionResult GetWidgetWindow(string DashboardID, string AreaName, string WidgetType)   
        {
            //Pass apartial view to a kendo window
            //which onfigures the widget for the appropriate area
            ViewBag.DashboardID = DashboardID;
            ViewBag.AreaName = AreaName;
            if (AreaName == "Marquee")
            {
                if (WidgetType == "Q")
                {
                    return PartialView("QWidget");
                }
                else if (WidgetType == "A")
                {
                    return PartialView("QWidget");
                }
            } else if (AreaName == "AOne")
                {
                if (WidgetType == "Q")
                {
                    return PartialView("QWidget");
                }
                else if (WidgetType == "A")
                {
                    return PartialView("AWidget");
                }
            }
            return PartialView("QWidget");
        }

//**************AWidget.CSHTML**********************
<script src="~/Scripts/kendo/2013.1.514/jquery.min.js"></script>
<script src="~/Scripts/kendo/2013.1.514/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2013.1.514/kendo.web.min.js"></script>
<script src="~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js"></script>

 

@using (Html.BeginForm("AWidget", "Dashboard", FormMethod.Post))
{
    //hide dashboard ID which gets passed in veiwbag
   <input id='DashboardID' name='DashboardID' value='@ViewBag.DashboardID' hidden="hidden"/>
   <input id='AreaName' name='AreaName' value='@ViewBag.AreaName' hidden="hidden"/>

   <table border="0">
      <tr style ="vertical-align:Top">
          <td style ="vertical-align:top">
           <h5>Select Agent: </h5>
             @(Html.Kendo().DropDownList()
                  .Name("AID")
                  .Value("Select a Queue...") // need to set this at runtime
                  .DataTextField("AName")
                  .DataValueField("AID")
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetA", "ASummary", new { area = "Reports" });
                      });
                  })
            )
            @*@Html.ValidationMessageFor(r=>r.AID)*@
        </td>
        <td style ="vertical-align:top">
        </td>
         <td style ="vertical-align:top">
        </td>
   </table>
    <div class="accordion" id="accordion2">
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            Include These Fields: &#8595;
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
          <div class="accordion-inner">
              <table border="0">
               <tr>
                <td style ="vertical-align:top">
                    <input type="checkbox" name="Include" value="LAST_UPDATE" checked />Last Updated<br />
                    <input type="checkbox" name="Include" value="STATUS" checked />Status<br />
                    <input type="checkbox" name="Include" value="REASON" checked />Reason<br />
                </td>
                <td>
                </td>
                <td style ="vertical-align:top">
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <p>
    <input type="submit" value="Cancel" name="AWidget" /> 
    <input type="submit" value="Create" name="AWidget" />
    </p>
}

[Petur Subev]

Hello Andrew,

You can use the open event to see if the window content needs to be refreshed (if it is already loaded).

Here is an example with the wrappers that will make the Window fetch fresh content from the server each time it is opened.

@(Html.Kendo().Window()
    .Name("window")
    .Title("Rams's Ten Principles of Good Design")
    .Content("loading user info...")
    .LoadContentFrom("AjaxContent", "Window")
    .Iframe(false)
    .Events(ev => ev.Open(@"function(e){
        if(window.loaded){
            this.refresh();
        }
        window.loaded = true;
    }"))
    .Draggable()
    .Resizable()
)

I hope this helps.

Kind Regards,
Petur Subev
Telerik

[Andrew]

Petur- That doesn't work... but it did point out to me that when you click on the close Icon for the Window widget that all the other widgets are no longer accessible. This means when try to get a data item from a pre-selected dropdown menu       var dropdownlist = $("#dashboards").data("kendoDropDownList"); var dataItem = dropdownlist.dataItem();  that my dataItem is undefined.  
What actually happens when you close a Window widget with the close Icon? 

[Petur Subev]

Hello Andrew,

When you press the X button there is nothing fancy, with animation the container becomes hidden (display:none). I am still not sure what is behind all of this. Demonstrate the case in a sample project so we can advise you further.

Kind Regards,
Petur Subev
Telerik

[Andrew]

This demo illustrates the problem... 

[Andrew]

last post had a corrupted Zip file... try this one!

[Petur Subev]

Hello Andrew,

The widget is not available because you are loading the jQuery multiple times - this is covered in the troubleshooting section:

http://docs.kendoui.com/getting-started/troubleshooting#javascript-error-that-kendo-widgets-are-unavailable-or-undefined

Why do you also load the scripts within the partial view too? It is not needed.

Remove these from the partial view and you wont experience such problems when re-opening the window.

<script src="~/Scripts/kendo/2013.2.716/jquery.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.web.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js"></script>

@using (Html.BeginForm("Window1", "Home", FormMethod.Post))
{
   ...

Kind Regards,
Petur Subev
Telerik

[Andrew]

Thanks Petur That answered part one of my post, part 2 was  how to close the window from a button on the partial view. I still have to round trip to the server and refresh the page. Are their any Demos which implement KendoWindows and use them with Partial views to pass data back to the parent page using Ajax. The KendoWindow Demos have no interaction they just show images.

[Petur Subev]

Hello again Andrew,

I am afraid we do not have such demos, basically the Window widget displays whatever you load from the server - same can be achieved with $.ajax and inserting the response into some element on the page.
What I mean is that you need to proceed the same way as you would do with regular ajax loading. 

Let us know if the Window widget creates difficulties in some way so we can advise you further.

Kind Regards,
Petur Subev
Telerik