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