Question

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

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

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

这是一个展示行为的道场示例：Kendo UI Grid docs

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

我尝试使用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();

菜单无法显示。 :(这是使用自定义工具栏模板的道场示例：select event

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

感谢。

通过Angular Kendo UI Grid的工具栏显示/隐藏列

0 个答案: