0

I am using Angular Kendo and building one list. 

<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. 

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.

User7723337
  • 11,857
  • 27
  • 101
  • 182

2 Answers2

1

Define the grid

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

The javascript function 'DisplayNoResultsFound' is as follows

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>');
        }
    }
}
Kumar Utsav
  • 2,761
  • 4
  • 24
  • 38
  • 1
    Thanks for sample code, but I am looking for Angular Kendo. So the trick is in the dataBound. and then in the function we need to check for the data source length. – User7723337 Mar 17 '16 at 04:16
  • Also it looks like you have posted this answer to this question, http://stackoverflow.com/questions/23476978/display-a-message-within-the-kendo-grid-when-its-empty which i have already seen. – User7723337 Mar 17 '16 at 04:39
0

First, you should add a name to your kendo instance(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

JoaqiinRA
  • 103
  • 7