Kendo UI Angular Grid - 折叠所有标题

Question

我有一个基于以下结构的剑道网格：

    Master Group A
        Sub Group A
            -Data A-
            -Data B-
        Sub Group B
            -Data C-
            -Data D-
        Sub Group C
            -Data E-
            -Data F-
    Master Group B
        Sub Group A
            -Data G-
            -Data H-
        Sub Group B
            -Data I-
            -Data J-
        Sub Group C
            -Data K-
            -Data L-
    Master Group C
        Sub Group A
            -Data M-
            -Data N-
        Sub Group B
            -Data O-
            -Data P-
        Sub Group C
            -Data Q-
            -Data R-

我希望它在页面首次加载时如下所示：

    Master Group A
        Sub Group A
        Sub Group B
        Sub Group C
    Master Group B
        Sub Group A
        Sub Group B
        Sub Group C
    Master Group C
        Sub Group A
        Sub Group B
        Sub Group C

我的数据目前是每行一个数据部分。每行数据都是它自己的数据。 有谁知道怎么做？

• 我有一个 Kendo Angular2 Slack：https://kendouiangular2.slack.com

Answer 1

在剑道网格中没有简单的解决方案可以让 angular2 做到这一点。

我可以想到两种方法：

1) 过滤后的数据数组

您可以有 2 个数据数组：一个包含所有组、子组和数据的参考/只读数组，以及一个专用于显示的过滤数组，当您单击子组中的按钮时，您可以在其中添加/删除每个子组中的数据行。

然后将网格数据绑定到过滤后的数组，并根据子组按钮上的事件修改过滤后的数组。

2) 纯 CSS

单个数据数组，然后将类应用于剑道网格的<tr> 标签，以根据子组按钮上的事件显示/隐藏数据行。 如果您的项目中有 jQuery，您可以使用类似的方法相对轻松地访问这些 tr 标签：

$('.some-class-i-add-to-all-my-data-lines').parents('.k-master-row')

如果你没有 jQuery，那就有点不那么简单了。