javascript - 将进度条与网格结合使用

Question

所以...

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

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

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

我尝试连接到网格的数据加载过程(dataBinding 和 dataBound)，但似乎没有任何进展。我知道，进度条可能需要另一个 Controller 来进行更新，但我希望我可以将其划分为绑定(bind)事件。

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

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

我们在 Angular 周围使用非常严格的标准，因此使用 Jquery 并不是直接 Hook 到 DOM 的选项，除非我确实可以证明它不能以任何其他方式完成。

• 这是进度条 API: http://docs.telerik.com/kendo-ui/api/javascript/ui/progressbar
• 这是网格 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

我使用了列模板，并让进度条在网格中工作，全部都是 Angular-zen。

使用像这样的 Angular-kendo 指令设置网格:

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

在我放置的 Controller 中，说:

    $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 数组中的一个字段，以及进度条的值。