I have a window in my _Layout.cshtml which I have initially set to visible="false". When I load or refresh the main page, I get a flickering, such that you can momentarily see the window text and button. I'm using a tag helper if that makes any difference.
The following is the _Layout.cshml file. The rest of the solution is just the standard Telerik ASP.Net Core template using ASP.Net Core 2019.2.514 controls on .Net Core 2.2.
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>@ViewData["Title"] - WindowFlickerTest</
title
>
<
link
href
=
"https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.bootstrap-v4.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2019.2.514/js/jszip.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2019.2.514/js/kendo.aspnetmvc.min.js"
></
script
>
<
environment
names
=
"Development"
>
<
link
rel
=
"stylesheet"
href
=
"~/lib/bootstrap/css/bootstrap.css"
/>
<
link
rel
=
"stylesheet"
href
=
"~/css/site.css"
/>
</
environment
>
<
environment
names
=
"Staging,Production"
>
<
link
rel
=
"stylesheet"
href
=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
asp-fallback-href
=
"~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class
=
"sr-only"
asp-fallback-test-property
=
"position"
asp-fallback-test-value
=
"absolute"
/>
<
link
rel
=
"stylesheet"
href
=
"~/css/site.min.css"
asp-append-version
=
"true"
/>
</
environment
>
</
head
>
<
body
class
=
"k-content"
>
<
kendo-window
name
=
"windowChangeUser"
title
=
"Change User"
draggable
=
"true"
resizable
=
"false"
width
=
"250"
height
=
"200"
modal
=
"true"
visible
=
"false"
>
<
content
>
<
div
style
=
"font-size: 13px; padding-top: 20px;"
>
<
p
>
Enter a username to switch to
</
p
>
<
p
style
=
"padding-top: 20px;"
>
<
input
type
=
"text"
class
=
"k-textbox"
id
=
"userName"
/>
</
p
>
</
div
>
<
div
style
=
"padding-top: 20px; text-align: center"
>
<
kendo-button
name
=
"buttonChangeUserOk"
type
=
"submit"
on-click
=
"windowClose"
>
<
content
>OK</
content
>
</
kendo-button
>
</
div
>
</
content
>
</
kendo-window
>
<
nav
class
=
"navbar navbar-inverse navbar-fixed-top p-3"
>
<
div
class
=
"container p-0 p-sm-3"
>
<
kendo-button
id
=
"buttonOpenWindow"
on-click
=
"openWindow"
>
<
content
>Show me the window!</
content
>
</
kendo-button
>
<
div
class
=
"navbar-header"
>
<
kendo-button
name
=
"configure"
tag
=
"button"
icon
=
"menu"
class
=
"k-rpanel-toggle k-primary btn-toggle"
></
kendo-button
>
<
a
asp-controller
=
"Home"
asp-action
=
"Index"
class
=
"navbar-brand"
>Your .NET Core Application</
a
>
</
div
>
<
div
id
=
"responsive-panel"
class
=
"navbar-left"
>
<
kendo-responsivepanel
name
=
"responsive-panel"
auto-close
=
"false"
breakpoint
=
"768"
orientation
=
"top"
>
@(Html.Kendo().Menu()
.Name("Menu")
.Items(items =>
{
items.Add().Text("Home").Action("Index", "Home", new { area = "" });
items.Add().Text("About").Action("About", "Home", new { area = "" });
items.Add().Text("Contact").Action("Contact", "Home", new { area = "" });
})
)
</
kendo-responsivepanel
>
</
div
>
</
div
>
</
nav
>
<
main
>
<
div
class
=
"container"
>
@RenderBody()
</
div
>
</
main
>
<
footer
class
=
"footer text-center d-flex align-items-center"
>
<
div
class
=
"container pb-0"
>
<
hr
/>
<
p
class
=
"text-muted"
>
Copyright © @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
</
p
>
</
div
>
</
footer
>
<
environment
names
=
"Development"
>
<
script
src
=
"~/lib/bootstrap/js/bootstrap.js"
></
script
>
</
environment
>
<
environment
names
=
"Staging,Production"
>
asp-fallback-src
=
"~/lib/bootstrap/js/bootstrap.min.js"
asp-fallback-test
=
"window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
></
script
>
</
environment
>
@RenderSection("scripts", required: false)
</
body
>
</
html
>
<
script
type
=
"text/javascript"
>
function openWindow() {
var window = $("#windowChangeUser").data("kendoWindow");
window.center();
window.open();
}
function windowClose() {
var window = $("#windowChangeUser").data("kendoWindow");
window.close();
}
</
script
>