When attributes like Html class are added to the Html element from which the Window widget is initialized these attributes are applied to the Window's .k-window-content element instead of the outermost .k-window. This behavior is inconsistent with other web dev tools like Telerik UI for Blazor and the ThemeBuilder.
Window rendering must be consistent with other Kendo and Telerik suites.
Bug report
When a Telerik UI Window is draggable and has its Position set, the first time the widget can be dragged, or it is being dispositioned while dragging.
Reproduction of the problem
1. Create a Telerik Window widget.
2. Set the Position.Left and Position.Top
3. Open and drag the window.
Expected/desired behavior
The window should be smoothly draggable.
Environment
* **Kendo UI version:** 2021.2.511
* **jQuery version:** 1.12.4
* **Browser:** [all]
Changes to the Window's content aren't applied by the refresh method, if the content isn't set up previously upon initialization or with the setOptions method.
The refresh method should correctly update the default content of the Window.
For scenarios in which we display pages that take time to load in the Window component, it will be very useful if there is a configuration option that will automatically display/hide a loader while the content is loading.
Such functionality can be currently achieved using the approach demonstrated in this Dojo example but it will be a nice built-in feature.
Hello good afternoon all right?
I am developing a code where I create a base model of a window and use javascript to be able to define data like autura, width, content (URL) and etc ...
In the example I am doing, I have a menu that according to the ID of the item that I clicked on the menu, it performs a function and according to the ID, it defines the data of the Window, as I do not have a component like "RadWindowManager" to facilitate this part of the creation, I am doing this process:
Component Code:
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<a class="navbar-brand" href="#">
<div> <img src="~/images/selo.png" class="pull-left imagem" /> </div>
</a>
<a class="navbar-brand" href="#">
<img src="~/images/softlux.png" class="logo_posicao" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="dropdown nav-text">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="aoClicar('3,0')">
Example Window 1
</a>
</li>
<li class="dropdown nav-text">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="aoClicar('6,0')">
Example Window 2
</a>
</li>
<li class="dropdown nav-text">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="aoClicar('12,0')">
Example Window 3
</a>
</li>
</ul>
</div>
</nav>
@(Html.Kendo().Window()
.Name("FrmGrid")
.Resizable()
.Draggable()
.Content("Loading...")
.Visible(false)
.Modal(false)
)
Scripts Code:
<script type="text/javascript">
function aoClicar(idItem) {
switch (idItem) {
case "3,0":
var janela = $("#FrmGrid").kendoWindow().data("kendoWindow");
janela.setOptions({
title: "Table of Environments",
width: 980,
height: 440
});
janela.refresh({
url: 'http://' + window.location.hostname + ':' + window.location.port + '/Ambiente/Index' // Open a Controller and Action as Frame
});
janela.center().open();
break;
case "6,0":
var janela = $("#FrmGrid").kendoWindow().data("kendoWindow");
janela.setOptions({
title: "Table of Professions",
width: 980,
height: 400
});
janela.refresh({
url: 'http://' + window.location.hostname + ':' + window.location.port + '/Profissao/Index' // Open a Controller and Action as Frame
});
janela.center().open();
break;
case "12,0":
var janela = $("#FrmGrid").kendoWindow().data("kendoWindow");
janela.setOptions({
title: "Table of reasons",
width: 980,
height: 560
});
janela.refresh({
url: 'http://' + window.location.hostname + ':' + window.location.port + '/Motivo/Index' // Open a Controller and Action as Frame
});
janela.center().open();
break;
default:
alertify.error('Window not disponible.');
}
}
</script>
However, I noticed 2 problems in Defining Options such as height, width, title, and content
If I use this method to define:
janela.setOptions({
title: "Table of reasons",
width: 980,
height: 560
});
The final result of the window looks like this:
Note that the Content Frame is passing outside the window border, or in case the background shadow of it, in other browsers the size may even follow the pattern of the shadow, but in Google Chrome you get this part beyond the limit.
If I use this method to set the properties:
var janela = $("#FrmGrid").kendoWindow({
title: "Table of reasons",
width: 980,
height: 560
}).data("kendoWindow");
When you create the first window, you create it without problems:
Note that even the window is the correct size.