Несколько окон Kendo перекрываются, но текстовые div не перекрываются

0

У меня есть требование компоновки нескольких окон 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>

Как мне это исправить? Спасибо, что посмотрели...

Теги:
twitter-bootstrap-3
kendo-ui

1 ответ

0

Вот как я решил эту проблему, зная, что в виджере 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>

Надеюсь, что кто-то может помочь с ответом.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню