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]
Bug report
Reproduction of the problem
- Run this Dojo
- Resize the Window
- Click the refresh button
Current behavior
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.
Expected/desired behavior
The refresh method should correctly update the default content of the Window.
Environment
- Kendo UI version: 2021.1.330
- Browser: [ all ]
Bug report
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.
Reproduction of the problem
- Run this Dojo
- Inspect the .k-window-content Html element of Window.
Expected/desired behavior
Window rendering must be consistent with other Kendo and Telerik suites.
Environment
- Kendo UI version: 2024.1.130
- Browser: [all]
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:
However, if I close and try to open another menu item, properties such as Height, Width, and Title are not updated, see:
As much as I have defined the patterns before opening the window, the only thing that was changed in the window was the URL / Content
I hope you have understood what you want to report, do not forget the texts in the grid or the buttons are not in English, this project I am developing in my native language (In the case of Brazilian Portuguese)
Anyway thank you for your attention and I await your response.
Have a nice day
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.