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.
