Как поместить двух дочерних элементов иерархии сетки Kendo во вкладку?

Question

У меня есть одна родительская таблица и две дочерние таблицы в иерархии. То, что я хочу, это иметь дизайн, чтобы дочерняя таблица была в отдельной вкладке.

Это пример того, что я уже пробовал. https://dojo.telerik.com/ubiZewAh

Answer 1

Я думаю, что человек, который проголосовал, возможно, искал больше информации. Если я правильно понимаю, вы хотите, чтобы каждая таблица находилась в отдельной вкладке. Не появляется, вы используете загрузчик. Однако, поскольку вы управляете шаблоном, который используется для данных, вам потребуется предоставить эту функцию самостоятельно. При нажатии на стрелку данные будут получены. Таким образом, вам нужно будет добавить структуру вкладок и по умолчанию первую таблицу, как показано, а все остальные как скрытые. Он у вас почти есть, но вам нужно визуально показать некоторые вкладки на экране. Смотрите HTML ниже, чтобы узнать, как настроить ваш шаблон. Я оставлю это на ваше усмотрение, чтобы стилизовать все. Я просто собираюсь дать вам функциональность.

<div id="detail-template" class="template-container">
    <div class="tabs">
       <div class="tab" data-tab-for="evidence">Evidence</div>
       <div class="tab" data-tab-for="notes">Notes</div>
    </div>
    <div role="tabpanel" class='tab-pane' id="evidence">
        <div class="evidence-grid"></div>
    </div>
    <div role="tabpanel" class='tab-pane' id="notes" style="display:none'>
        <div class="notes-grid"></div>
    </div>
</div>

//Jquery
$(document).ready(function () {
    $('#case-grid').on('click', '.tab', tabClicked);
});

function tabClicked(e) {
    var elClicked = $(this);

    //Hide all panes then show correct one
    $('.tab-pane').hide();
    var paneToShow = elClicked.data('tabFor');
    $('#' + paneToShow).show();

    //I would instead use the active flag on the tabs themselves
    //Style them however you want
    //Take the style off all tabs then add to correct one.
    $('.tab').removeClass('active');
    $(this).addClass('active');
}

Если вы хотите сэкономить некоторые поездки в бэкэнд, когда вам это не нужно, я бы не загружал дочерние сетки при загрузке инициализации сетки. Я бы вместо этого нажал на вкладку. Найдите сетку на выбранной панели вкладок и получите данные в это время. например, если пользователь никогда не заглядывает на вкладку «Заметки», то нет причин его получать. Если только вы не хотите предвосхитить это с ожиданием, что они будут Кроме того, вы можете захотеть изменить относительные ссылки на классы, которые есть в функции tabClicked, чтобы они были относительными, чтобы быть уверенным, что мы обновляем только правильную. Например,

Изменение $ ( 'Закладки панель.) Скрыть (). к $ ('. tab-pane', elClicked.closest ('. template-container')). hide ();

После просмотра моего ответа вы можете использовать ссылки на классы везде, так как шаблон используется несколько раз. Я не смотрел на сгенерированный код кендо. Однако при закрытии строки DOM дочерних сеток не удаляется. Следовательно, с помощью jquery он будет модифицировать все с одинаковым идентификатором. Так, например, ваши панели имеют идентификатор доказательства и заметки. Возможно, вы захотите сделать эти атрибуты данных, а затем, как я уже сказал выше, ссылаться на них относительно элемента (вкладка), на который нажали