After update to Q1 2015 we face a problem where loading partial with kendo components into kendo window kills is as well as access to components like grid on parent page. Workaround: enable iframe, which is not an option since window should return a result
How to reproduce:
1. Grid with button to call the window(only calling column provided):
col.Bound(b => b.FieldMapId).ClientTemplate("# if (DataType.toLowerCase() ==\"csv\"){ # <button id='FiledMapBtn_#=FieldMapId#' class='k-button' data-fieldMapId='#=FieldMapId#' data-feedId='#=Id#' data-feedtype='#=FeedType#' onClick='ShowFieldMapWindow(this)'>Edit Maps</button> # } #")
.Template(t => t.DataType.ToLower() == "csv" ? "<button style='display:none' id='FiledMapBtn_'" + t.FieldMapId + "' class='k-button' data-fieldMapId='" + t.FieldMapId + "' data-feedId='" + t.Id + "' data-feedtype='" + t.FeedType + "' >Edit Maps</button>" : "").Title("Csv Mapping").Filterable(false);
2. Window set as invisible:
@(Html.Kendo().Window().Name("FieldMapWindow")
.Title("Create/Edit new csv map")
.Actions(a => a.Close())
.Draggable()
.Modal(true)
.Visible(false)
.Resizable()
.Events(e => e.Close("FieldMapWindow_OnClose")))
3. JS To Open window and request content:
function ShowFieldMapWindow(sender) {
var csvImportWindow = $("#FieldMapWindow").data("kendoWindow");
csvImportWindow.refresh({
url: url goes here,
type: "GET"
});
csvImportWindow.open().maximize();
}
4. it loads partial content with layout set to partial view with kendo elements. Below is a layout for window partial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
@*@Styles.Render("~/Content/Themes/main/jquery.tagit.css")*@
@Styles.Render("~/Content/Themes/main/AdminStyles")
<link href="@Styles.Url("~/Content/Kendo/KendoDefault")" rel="stylesheet" async />
@*<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" />*@
@Scripts.Render("~/bundles/Scripts/")
</head>
<body>
@RenderBody()
</body>
</html>
5. We use bundles: heres whats in scripts bundle:
bundles.Add(new ScriptBundle("~/bundles/Scripts/").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-{version}.min.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery-ui-{version}.min.js",
//"~/Scripts/jquery-migrate-{version}.min.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js",
"~/Scripts/jquery.validate.unobtrusive.min.js",
"~/Scripts/jquery-scroller.js",
"~/Scripts/kendo/kendo.all.min.js", // or kendo.all.* if you want to use Kendo UI Web and Kendo UI DataViz
"~/Scripts/kendo.modernizr.custom.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js",
"~/Scripts/bootstrap.js",
"~/Scripts/TagIt/tag-it.js",
"~/Scripts/MainTheme/mpqLog.js",
"~/Scripts/MainTheme/views.js",
"~/Scripts/MainTheme/imgSlider.js",
"~/Scripts/MainTheme/services.js",
"~/Scripts/MainTheme/userResults.js",
"~/Scripts/MainTheme/leftMenu.js",
"~/Scripts/MainTheme/blur.js"
));
Please note that everything was working before update. !!! Please advice !
How to reproduce:
1. Grid with button to call the window(only calling column provided):
col.Bound(b => b.FieldMapId).ClientTemplate("# if (DataType.toLowerCase() ==\"csv\"){ # <button id='FiledMapBtn_#=FieldMapId#' class='k-button' data-fieldMapId='#=FieldMapId#' data-feedId='#=Id#' data-feedtype='#=FeedType#' onClick='ShowFieldMapWindow(this)'>Edit Maps</button> # } #")
.Template(t => t.DataType.ToLower() == "csv" ? "<button style='display:none' id='FiledMapBtn_'" + t.FieldMapId + "' class='k-button' data-fieldMapId='" + t.FieldMapId + "' data-feedId='" + t.Id + "' data-feedtype='" + t.FeedType + "' >Edit Maps</button>" : "").Title("Csv Mapping").Filterable(false);
2. Window set as invisible:
@(Html.Kendo().Window().Name("FieldMapWindow")
.Title("Create/Edit new csv map")
.Actions(a => a.Close())
.Draggable()
.Modal(true)
.Visible(false)
.Resizable()
.Events(e => e.Close("FieldMapWindow_OnClose")))
3. JS To Open window and request content:
function ShowFieldMapWindow(sender) {
var csvImportWindow = $("#FieldMapWindow").data("kendoWindow");
csvImportWindow.refresh({
url: url goes here,
type: "GET"
});
csvImportWindow.open().maximize();
}
4. it loads partial content with layout set to partial view with kendo elements. Below is a layout for window partial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
@*@Styles.Render("~/Content/Themes/main/jquery.tagit.css")*@
@Styles.Render("~/Content/Themes/main/AdminStyles")
<link href="@Styles.Url("~/Content/Kendo/KendoDefault")" rel="stylesheet" async />
@*<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" />*@
@Scripts.Render("~/bundles/Scripts/")
</head>
<body>
@RenderBody()
</body>
</html>
5. We use bundles: heres whats in scripts bundle:
bundles.Add(new ScriptBundle("~/bundles/Scripts/").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-{version}.min.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery-ui-{version}.min.js",
//"~/Scripts/jquery-migrate-{version}.min.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js",
"~/Scripts/jquery.validate.unobtrusive.min.js",
"~/Scripts/jquery-scroller.js",
"~/Scripts/kendo/kendo.all.min.js", // or kendo.all.* if you want to use Kendo UI Web and Kendo UI DataViz
"~/Scripts/kendo.modernizr.custom.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js",
"~/Scripts/bootstrap.js",
"~/Scripts/TagIt/tag-it.js",
"~/Scripts/MainTheme/mpqLog.js",
"~/Scripts/MainTheme/views.js",
"~/Scripts/MainTheme/imgSlider.js",
"~/Scripts/MainTheme/services.js",
"~/Scripts/MainTheme/userResults.js",
"~/Scripts/MainTheme/leftMenu.js",
"~/Scripts/MainTheme/blur.js"
));
Please note that everything was working before update. !!! Please advice !
1 Answer, 1 is accepted
0
Hi Ilya,
The provided implementation is invalid and will not work with any Kendo UI version. Obviously, the view, which is loaded inside the Window, is not a partial view, but a full web page, which breaks the main page's HTML validation, and registers duplicate jQuery script, which deletes all existing Kendo UI widget instances.
http://docs.telerik.com/kendo-ui/web/window/overview#loading-window-content-via-ajax
http://docs.telerik.com/kendo-ui/troubleshooting#javascript-error-that-kendo-widgets-are-unavailable-or-undefined
Regards,
Dimo
Telerik
The provided implementation is invalid and will not work with any Kendo UI version. Obviously, the view, which is loaded inside the Window, is not a partial view, but a full web page, which breaks the main page's HTML validation, and registers duplicate jQuery script, which deletes all existing Kendo UI widget instances.
http://docs.telerik.com/kendo-ui/web/window/overview#loading-window-content-via-ajax
http://docs.telerik.com/kendo-ui/troubleshooting#javascript-error-that-kendo-widgets-are-unavailable-or-undefined
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!