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

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

上面的行为每个列的 Headers 添加了一个列菜单，默认情况下打开排序，过滤，列显示/隐藏 . 这个问题是 column show/hide is now present in every column's column menu and all the columns are listed in every column . 这会导致冗余，并且用户每次都必须做更多的过滤网格（非常重要!!!） .

这是一个展示行为的道场样本：sample

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

我尝试在其中构建一个带有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示例：sample

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

谢谢 .

angularjs kendo-ui telerik kendo-ui-grid