Не показывать результатов, используя Angular Kendo для просмотра списка кендо

Question

Я использую Angular Kendo и строю один список.

<kendo-mobile-list-view id="myList" class="item-list" k-template="templates.myListTemp" k-data-source="myService.myDataSource">
</kendo-mobile-list-view>

Я использую кендо DataSource а также ObservableArray для создания данных для моего списка в моем сервисе.

this.myDataSource = new kendo.data.DataSource({ data:this.myObservableArray });
this.myObservableArray.push({ key: "test", id:"test" });

Каждый работает как положено.

Теперь я хочу отобразить сообщение, когда их нет записей для отображения, в месте, где я отображаю список, например, "НЕТ ЗАПИСЕЙ ДЛЯ ОТОБРАЖЕНИЯ, пожалуйста, обновите".

Как я могу добиться этого с помощью углового кендо.
Я видел несколько постов для Kendo JQuery, но нет решения для Angular Kendo.

Answer 1

Определить сетку

$('#grid').kendoGrid({
    dataSource: employeeDataSource,
    dataBound: function () {
        DisplayNoResultsFound($('#grid'));
},

Функция 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>&nbsp;</td></tr>');
        }
    }
}

Answer 2

Во-первых, вы должны добавить имя к вашему экземпляру кендо (myList):

<kendo-mobile-list-view="myList" id="myList" class="item-list" k-template="templates.myListTemp" k-data-source="myService.myDataSource">
    </kendo-mobile-list-view>

Затем в вашем контроллере:

$scope.myList.bind('dataBound',DisplayNoResultsFound)

Также вы можете указать некоторые k-options в HTML и прочитайте эти варианты (включая dataBound) из углового контроллера, эта ссылка объясняет больше об этом