如何将 children 个 Kendo 网格层次结构放入选项卡中？

Question

我在层次结构中有一个 parent table 和两个 child table。我想要的是 child table 位于单独的选项卡中的设计。

这是我已经尝试过的示例。 https://dojo.telerik.com/ubiZewAh

Answer 1

我认为投反对票的人可能正在寻找更多信息。如果我理解正确的话，你希望每个 table 都在它自己的选项卡中。不会显示您正在使用 bootstrap。但是，由于您可以控制用于数据的模板，因此您需要自己提供此功能。单击箭头后，将获取数据。因此，您将需要添加一个选项卡结构并默认第一个 table 如图所示，所有其他为隐藏。您几乎已经完成了，但是您需要在屏幕上直观地显示一些选项卡。请参阅下面的 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 函数中的 class 引用更改为相对引用，以确保我们只更新正确的引用。例如，

改变 $('.tab-pane').隐藏(); 到 $('.tab-pane', elClicked.closest('.template-container')).hide();

看完我的回答后，您可能希望在任何地方都使用 class 引用，因为该模板被多次使用。我没有看kendo的生成代码。但是，关闭该行后，子网格的 DOM 不会被删除。因此，使用 jquery 它将修改所有具有相同 ID 的内容。因此，例如，您的窗格具有证据和注释的 ID。您可能想要制作这些数据属性，然后就像我上面说的那样，相对于单击的元素（选项卡）引用它们

如何将 children 个 Kendo 网格层次结构放入选项卡中？

How to put two children of Kendo grid hierarchy into tab?

html

css

jquery

kendo-grid