[英]Display no results using Angular Kendo for kendo list view
I am using Angular Kendo and building one list. 我正在使用Angular Kendo并建立一个列表。
<kendo-mobile-list-view id="myList" class="item-list" k-template="templates.myListTemp" k-data-source="myService.myDataSource">
</kendo-mobile-list-view>
I am using Kendo DataSource
and ObservableArray
for generating data for my list in my service. 我正在使用Kendo
DataSource
和ObservableArray
为服务中的列表生成数据。
this.myDataSource = new kendo.data.DataSource({ data:this.myObservableArray });
this.myObservableArray.push({ key: "test", id:"test" });
Every is working as expected. 每个人都按预期工作。
Now I want to display a message when their are no records to display, in the place I am displaying the list, like "NO RECORDS TO DISPLAY, Please Refresh". 现在,我想在它们没有记录可显示时显示一条消息,在我显示列表的地方,例如“没有要显示的记录,请刷新”。
How can I achieve this using angular Kendo. 如何使用角度剑道实现此目的。
I saw few posts for Kendo JQuery but no solution for Angular Kendo. 我看到Kendo JQuery的帖子很少,但是Angular Kendo却没有解决方案。
Define the grid 定义网格
$('#grid').kendoGrid({ dataSource: employeeDataSource, dataBound: function () { DisplayNoResultsFound($('#grid')); },
The javascript function 'DisplayNoResultsFound' is as follows javascript函数“ DisplayNoResultsFound”如下
function DisplayNoResultsFound(grid) { // Get the number of Columns in the grid var dataSource = grid.data("kendoGrid").dataSource; var colCount = grid.find('.k-grid-header colgroup > col').length; // If there are no results place an indicator row if (dataSource._view.length == 0) { grid.find('.k-grid-content tbody') .append('<tr class="kendo-data-row"><td colspan="' + colCount + '" style="text-align:center"><b>No Results Found!</b></td></tr>'); } // Get visible row count var rowCount = grid.find('.k-grid-content tbody tr').length; // If the row count is less that the page size add in the number of missing rows if (rowCount < dataSource._take) { var addRows = dataSource._take - rowCount; for (var i = 0; i < addRows; i++) { grid.find('.k-grid-content tbody').append('<tr class="kendo-data-row"><td> </td></tr>'); } } }
First, you should add a name to your kendo instance( myList
): 首先,您应该为
myList
实例添加一个名称( myList
):
<kendo-mobile-list-view="myList" id="myList" class="item-list" k-template="templates.myListTemp" k-data-source="myService.myDataSource">
</kendo-mobile-list-view>
Then, in your controller: 然后,在您的控制器中:
$scope.myList.bind('dataBound',DisplayNoResultsFound)
Also you could specify some k-options
in the html and read those options(including the dataBound
) from the angular controller, this link explains more about it 您也可以在html中指定一些
k-options
,并从角度控制器读取这些选项(包括dataBound
), 此链接对此有更多说明
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.