I am currently working on a project that involves laying out multiple Kendo windows in rows. Specifically, I need to display 4 windows in each row and have them shift left when closed.
My framework of choice is Bootstrap 3.
Everything works as expected with 6 divs arranged in the same manner. The delete button in my code removes one div at a time and causes the others to shift accordingly.
However, I've encountered issues with the Window feature inside the divs:
1) The 5th window overlaps the 1st window instead of being placed in the second row.
2) When closing a window using the close button, the windows to the right do not shift as intended.
Upon inspection, I noticed that the actual window control is created at the bottom of the HTML with the class k-widget k-window. The div in the row class simply contains the jQuery function for displaying the Window.
When I close a window, it gets destroyed but the positions of the other windows do not change, causing them to stay in place instead of shifting left.
Here's a snippet of the code:
<div class="row" id="partialWindows1">
<div id="hello" class="col-md-3">@(Html.Kendo().Window()
.Name("win1")
.Title("Window1")
.Content(@<text>
</text>)
.Draggable()
.Width(150)
.Height(60)
.Events(e=> e.Deactivate("win_deac"))
)
</div>
<!-- Other window definitions here -->
</div>
<br/>
<br/>
<div id="divDivs" class="row" style="margin-top: 100px">
<div class="col-md-3">div1</div>
<div class="col-md-3">div2</div>
<div class="col-md-3">div3</div>
<div class="col-md-3">div4</div>
<div class="col-md-3">div5</div>
<div class="col-md-3">div6</div>
</div>
<button id="btnDelete">Delete</button>
<script>
$(document).ready(function () {
$('#btnDelete').on('click', function () {
if ($('#divDivs div').length > 0)
$('#divDivs div')[0].remove();
});
});
function win_deac() {
this.destroy();
}
</script>
If anyone has suggestions on how to resolve these issues, I would greatly appreciate it. Thank you for your assistance!