Question

... SO

我想用这个： http://demos.telerik.com/kendo-ui/progressbar/angular
这个： http://docs.telerik.com/kendo-ui/AngularJS/the-grid-widget

我们已经实现了网格并且正在运行，但障碍是基本进度指示器对我们不起作用，我的任务是将ProgressBar放到位，因为在某些情况下，我们的加载时间非常长记录集。

有没有人让这个工作，如果有的话 - 你有一个例子吗？

我试图挂钩Grid的数据加载过程（dataBinding和dataBound），但似乎没有得到任何结果。我理解只需要ProgressBar进行更新就可以使用另一个控制器，但我希望我能将它划分为绑定事件。

最棘手的部分是使加载看起来尽可能逼真，因为时间的变化会有很大差异。

我们正在使用Breeze JS和WebAPI服务端点来加载数据。 Breeze是客户端 - 服务器关系的OData数据层提供程序。

我们在Angular周围使用非常严格的标准，所以使用Jquery不是直接挂钩到DOM的选项，除非我能够证明它不能以任何其他方式完成。

这是Progress Bar API： http://docs.telerik.com/kendo-ui/api/javascript/ui/progressbar
这是Grid API： http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
和BreezeJS Api： http://www.breezejs.com/sites/all/apidocs/index.html

提前感谢任何人提供的任何帮助或指导。如果您需要代码示例，请告诉我，但API几乎提供了所有内容。

Answer 1

我使用列模板并让进度条在网格中工作，所有的角度都是zen。

使用angular-kendo指令设置网格，如下所示：

   <div kendo-grid="grid" k-data-source="gridDataSource" k-selectable="multiple" 
                          k-columns="columns"></div>

在我说的控制器中，说：

    $scope.columns = [

    { "field": "Name", "title": "File Name", width: 50 }, 

    {"field":"progressBar","title":"progress", width: 70,
      template: "<div style='width: 100%' kendo-Progress-Bar k-value='dataItem.Progress' > </div>"}

    ];

一切正常！

dataItem.Progress 是数据源或基础js数组中的字段，以及进度条的值。

将ProgressBar与Grid一起使用

1 个答案: