У меня есть требование компоновки нескольких окон Kendo (4 в строке, затем следующей строке и т.д.). Окно, когда оно закрыто, должно привести к смещению окна справа от него.
Я использую Bootstrap 3.
Это отлично работает с 6 divs, размещенными таким же образом. Кнопка удаления в коде ниже удаляет один div за раз и сдвиг div.
Проблема с окном внутри divs:
1) пятое окно перекрывает 1-е окно, тогда как оно должно быть размещено во 2-й строке.
2) Окна справа не сдвигаются при закрытии с помощью кнопки закрытия.
Я вижу, что фактическое управление окном создается внизу в html с помощью k-widget k-window
класса k-widget k-window
. В div в классе строк просто находится функция jQuery для отображения окна.
Когда я закрываю окна, окно разрушается, но остальные окна слева или верхнее свойство не меняются, поэтому они остаются на месте, а не сдвигаются влево.
Фрагмент кода:
<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>
<div class="col-md-3">@(Html.Kendo().Window()
.Name("win2")
.Title("Window1")
.Content(@<text>
</text>)
.Draggable()
.Width(150)
.Height(60)
.Events(e=> e.Deactivate("win_deac"))
)</div>
<div class="col-md-3">@(Html.Kendo().Window()
.Name("win3")
.Title("Window1")
.Content(@<text>
</text>)
.Draggable()
.Width(150)
.Height(60)
.Events(e=> e.Deactivate("win_deac"))
)</div>
<div class="col-md-3">@(Html.Kendo().Window()
.Name("win4")
.Title("Window1")
.Content(@<text>
</text>)
.Draggable()
.Width(150)
.Height(60)
.Events(e=> e.Deactivate("win_deac"))
)</div>
<div class="col-md-3">@(Html.Kendo().Window()
.Name("win5")
.Title("Window1")
.Content(@<text>
</text>)
.Draggable()
.Width(150)
.Height(60)
.Events(e=> e.Deactivate("win_deac"))
)</div>
</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>
Как мне это исправить? Спасибо, что посмотрели...
Вот как я решил эту проблему, зная, что в виджере Window есть метод appendTo. Я также добавил приятную анимацию при удалении окна.
<div class="row">
<div id="div1" class="col-md-3 atl-win"> @(Html.Kendo().Window()
.Name("win1")
.Title("Window1")
.Content(@<text>win1
</text>)
.Draggable()
.Width(150)
.Height(60)
.AppendTo("#div1")
.Events(e=> e.Deactivate("win_deac").Close("win_close"))
)
</div>
<div id="div2" class="col-md-3 atl-win">@(Html.Kendo().Window()
.Name("win2")
.Title("Window2")
.Content(@<text>win2
</text>)
.Draggable()
.Width(150)
.Height(60)
.AppendTo("#div2")
.Events(e=> e.Deactivate("win_deac").Close("win_close"))
)</div>
<div id="div3" class="col-md-3 atl-win">@(Html.Kendo().Window()
.Name("win3")
.Title("Window3")
.Content(@<text>win3
</text>)
.Draggable()
.Width(150)
.Height(60)
.AppendTo("#div3")
.Events(e=> e.Deactivate("win_deac").Close("win_close"))
)</div>
<div id="div4" class="col-md-3 atl-win">@(Html.Kendo().Window()
.Name("win4")
.Title("Window4")
.Content(@<text>win4
</text>)
.Draggable()
.Width(150)
.Height(60)
.AppendTo("#div4")
.Events(e=> e.Deactivate("win_deac").Close("win_close"))
)</div>
<div id="div5" class="col-md-3 atl-win">@(Html.Kendo().Window()
.Name("win5")
.Title("Window5")
.Content(@<text>win5
</text>)
.Draggable()
.Width(150)
.Height(60)
.AppendTo("#div5")
.Events(e=> e.Deactivate("win_deac").Close("win_close"))
)</div>
</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();
}
function win_close(e) {
var $divRem = $(e.sender.options.appendTo);
$divRem.hide(1000, function () { $divRem.remove(); });
}
</script>
Надеюсь, что кто-то может помочь с ответом.