Display a message within the Kendo grid when it's empty

Question

I\'m trying to display a friendly message (like \"No records found, try again later\") within the grid content, when there are no records in the database.

F

Answer 1

Supported out-of-the-box in the 2015.2.805 release. http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-noRecords.template

Answer 2

You may use CSS: DEMO

tbody:empty:before {
    content:'NO DATA';
}

---

with litlle style :

tbody:empty:before {
    content:'NO DATA';
    display:table-cell;
    padding:0.5em;
}

Answer 3

Good news- this option is available now:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/norecords#noRecords

you can set message via kendo template:

noRecords: {
    template: "No data available on current page. Current page is: #=this.dataSource.page()#"
}

or via message option:

noRecords: true,
messages: {
    noRecords: "There is no data on current page"
}

default text is "No records available." when set noRecords: true only

Answer 4

Firstly, you cannot fake an empty datasource just by giving an incorrect read url. This will just cause a read error and will never trigger any update on your grid's datasource, (ie. dataBound event will never happen). On the other hand, an empty datasource is still a valid datasource and will trigger the dataBound event.

---

Anyways, here is my solution. Firstly, to emulate an empty datasource, I have set the datasource like so:

    dataSource: []

Now, the proper way to check whether your grid is truly empty is to read the datasource itself. The others do it... in a more hacky way by reading html DOM. Please do NOT do this as you may have multiple pages, filters, etc... where the item is in the dataSource but not the DOM. Here is how you should do it:

if($("#grid").data("kendoGrid").dataSource.data().length===0){
    //do your stuff!
}

Now, when you read your datasource, the dataBound event is triggered every time. Thus, you should put the above code in the dataBound event. Check if grid dataSource is empty, and then fire a message to the user. Here is my full code for dataBound.

dataBound: function (e) {
    var grid = $("#grid").data("kendoGrid");
    var mBox = $("#msgBox");
    if (grid.dataSource.data().length === 0) {
        if (!mBox.data("kendoWindow")) {
            mBox.kendoWindow({
                actions: ["Close"],
                animation: {
                    open: {
                        effects: "fade:in",
                        duration: 500
                    },
                    close: {
                        effects: "fade:out",
                        duration: 500
                    }
                },
                modal: true,
                resizable: false,
                title: "No items",
                width: 400
            }).data("kendoWindow").content("<p>No contacts available. Please try again later.</p>").center().open();
        } else {
            mBox.data("kendoWindow").content("<p>No contacts available. Please try again later.</p>").open();
        }

    }
}

What is this crazy mess above? You'll notice that I am doing a lot of stuff with the variable mBox. This is simply an empty <div> I added on the html page with id msgBox, and I am using it to instantiate a kendoWindow to create the popup saying that there is no data.

You can find out more about kendoWindow here. So instead of using ugly alert boxes, I am just taking advantage of another part of kendo UI's widget library, which is customizable and controllable.

The if and else logic with the mBox simply handles subsequent calls to show the message. The first time, the kendoWindow has not been instantiated so it goes through the if clause. Subsequent calls with just reopen the window.

Give it a try :). You can click the next page buttons to verify that it will show the popup again. Here is a jsFiddle Demo.

Answer 5

Kendo grid No Data found message

function gridDataBound(e) {
var grid = e.sender;
if (grid.dataSource.total() == 0) {
    var colCount = grid.columns.length;
    $(e.sender.wrapper)
        .find('tbody')
        .append('<tr class="kendo-data-row"><td colspan="' + colCount + '" class="no-data">Sorry, no data :(</td></tr>');
}

};

Answer 6

I use the following when defining the grid:

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

The javascript function 'DisplayNoResultsFound' is defines 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>');
        }
    }
}

A running demo can be found here