3

我们的 Web 应用程序使用 Telerik Kendo UI 和许多 Angular Kendo UI 网格。每个 Grid 都有几列。我们的一些用户不喜欢查看所有列，因此我们希望通过复选框为他们实现列显示/隐藏功能。根据Kendo UI Grid docs，可以通过将以下行添加到 Kendo Grid 选项来实现。

$scope.gridOptions = {
    ...
    columnMenu: true,
    ...
}

上面的行在每列的标题中添加了一个列菜单，并默认打开排序、过滤、列显示/隐藏。这样做的问题是，列显示/隐藏现在出现在每列的列菜单中，并且所有列都列在每列中。这会导致冗余，而且用户每次都必须做更多的事情来过滤网格（非常重要！！！）。

这是一个展示该行为的道场示例：示例

我想要做的是在我的 Angular Kendo UI Grid 的工具栏中实现一个下拉菜单或一个菜单，其中列出了所有带有复选框的列。用户应该能够选中/取消选中他们想要查看的列。然后我可以调用 Kendo UI Grid 的hideColumn和showColumn方法来显示/隐藏Kendo UI Menu的select 事件上的列。

我尝试构建一个带有 Kendo UI 菜单的自定义工具栏模板并绑定到静态文本数据。

工具栏模板：

<script id="toolbarTemplate" type="text/x-kendo-template">
    <a class="k-button k-button-icontext k-grid-excel" href="\\#">
        <span class="k-icon k-i-excel"></span>Export to Excel</a>

    <a class="k-button" href="\\#">New Button</a>

    <ul kendo-menu 
        k-orientation="vertical"
        k-data-source="columnNames"
        k-on-select="onSelect(kendoEvent)">
    </ul>
  </script>

角代码：

$scope.toolbarTemplate = $("#toolbarTemplate").html();

$scope.columnsData = new kendo.data.DataSource({
                data: [
              { text: "Column1" },
              { text: "Column2" },
              { text: "Column3" }
            ]
        });
$scope.columnsData.fetch();

$scope.columnNames = $scope.columnsData.data();

菜单不显示。:( 这是带有自定义工具栏模板的 dojo 示例：示例

我是 AngularJS 初学者。我采取了错误的方法吗？请帮助我从网格工具栏实现下拉/菜单。

谢谢。

4

0 回答 0