onDataBound

[Sitefinity]

How can I tell in event onDataBound if the chart has bound to any data? I would like to display a "No data available" message.

[Iliana Nikolova]

Hi Juan,

The described functionality is not supported out of the box, however you could achieve it using custom implementation. For example you could create a function which place a <div> or <p> with the following styling over the Kendo UI Chart if there are no records:    

function onDataBinding(e) {
    $('<div class="custom-overlay"><p id="message">SomeMessageHere</p></div>').appendTo("#ComfortChart");
}

//....

.custom-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .2;
    filter: alpha(opacity=60);
   background-color: #6495ed;
    font-size: 34px;
}
#message{
    position: absolute; left: 30%; top: 50%;

}
​

For convenience I prepared a small jsFiddle example which illustrates the aforementioned approach in action.

Regards,

Iliana Nikolova
the Telerik team

[Sitefinity]

Great! That will work just fine.

Thanks!

[Sam]

Illiana-

Your example doesn't make any sense (jsfiddle).  All you are doing is calling a function on document load to overlay the chart.  Can you please work up an example that works with the chart's events. For example this does NOT work:

 http://jsfiddle.net/petf7tbb/

 dataBound: function(e) {

            var showMessage = this.dataSource.data().length == 0;
            if (showMessage) onDataBinding();
        }​

[Iliana Nikolova]

Hi Sam,

This example uses a very old version of Kendo UI - please check this one which uses the latest official release and everything works as expected.

Regards,
Iliana Nikolova
Telerik

 

 

[Ashutosh]

Can you tell me how can we implement same thing, "No Data" in React js

[Eyup]

Hi Ashutosh,

 

You can direct this question to our Kendo React team and they will answer it adequately:
https://www.telerik.com/forums/kendo-ui-react

You can also mention this Kendo jQuery forum thread as a reference.

 

Regards,
Eyup
Progress Telerik