angularjs - Angular Kendo UI Grid のツールバーによる列の表示/非表示

Question

私たちの Web アプリケーションは、Telerik Kendo UI と多くの Angular Kendo UI Grid を使用しています。各グリッドにはいくつかの列があります。一部のユーザーはすべての列を表示することを好まないため、チェックボックスを介して列の表示/非表示機能を実装したいと考えています。Kendo UI Grid docsに従って、以下の行を Kendo Grid オプションに追加することで実装できます。

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

上記の行は、各列のヘッダーに列メニューを追加し、デフォルトで並べ替え、フィルタリング、列の表示/非表示をオンにします。これに関する問題は、列の表示/非表示がすべての列の列メニューに表示され、すべての列がすべての列に表示されることです。これにより冗長性が発生し、ユーザーは毎回グリッドをフィルタリングするためにさらに多くのことを行う必要があります (非常に重要です!!!)。

この動作を示す Dojo サンプルを次に示します。

代わりに、Angular Kendo UI グリッドのツールバーに単一のドロップダウンまたはメニューを実装して、すべての列をチェックボックスでリストします。ユーザーは、表示したい列をチェック/チェック解除できる必要があります。次に、Kendo UI グリッドのhideColumnメソッドとshowColumnメソッドを呼び出して、Kendo UI メニューの選択イベントで列を表示/非表示にします。

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の初心者です。私は間違ったアプローチを取っていますか？グリッド ツールバーからドロップダウン/メニューを実装するのを手伝ってください。

ありがとう。