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: ↓
</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>
}
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: ↓
</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>
}