使用 AngularJs 的 Kendo Grid 中的工具栏列菜单

Question

我正在尝试使用 Kendo Grid 工具栏中的 Kendo ui-Menu，如下所示： 我能够使用 JQuery 让它工作（这是一个工作 Fiddle，但我需要让它在 Angular 中工作。

我尝试在网格的datababound函数中使用这个：

              for (var i = 0, max = $scope.SearchGrid.columns.length; i < max; i++) {
              ds.push({
                  encoded: false,
                  text: "<label><input type='checkbox' checked='checked' " +
                      " class='check' data-field='" +
                      $scope.SearchGrid.columns[i].field +
                      "</label>"
              });

          }

然后在控制器中：

 $scope.menuDataSource = [
{
    text: "Edit Columns",
    items: ds

}]; 

我在工具栏中有这样的：

toolbar: [

          {
              name: "Edit Columns",
              template:
                  '&nbsp;&nbsp;&nbsp;<div class="k-button btn btn-default btn-xs" style="float: left" kendo-menu k-data-source="menuDataSource"></div>'
          }
      ],

但菜单在“ds”中没有任何内容之前呈现，我无法弄清楚如何在菜单上调用类似dataSource.read() 的东西。我想一定有办法做到这一点，但对于我的生活，我想不通。非常感谢任何帮助！

Answer 1

因此，您想在网格渲染后在 kendoMenu 中设置项目，但 kendoMenu 用于网格工具栏中。最好的解决方案是在网格读取数据后在菜单数据源中设置新项目。您可以使用kendoMenu 的dataSource setOptions 方法，例如：

$('div[kendo-grid="SearchGrid"] .k-menu').data('kendoMenu').setOptions({dataSource: $scope.menuDataSource});

查看此示例 - 我将 Item2 添加到 dataSource 并在 kendoMenu 中设置：http://dojo.telerik.com/OnAXI/2