This is a migrated thread and some comments may be shown as answers.

onDataBound

6 Answers 249 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Sitefinity
Top achievements
Rank 1
Sitefinity asked on 27 Aug 2012, 05:30 PM
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.

6 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 28 Aug 2012, 04:42 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sitefinity
Top achievements
Rank 1
answered on 28 Aug 2012, 05:57 PM
Great! That will work just fine.

Thanks!
0
Sam
Top achievements
Rank 1
answered on 26 Jul 2015, 01:08 AM

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();
        }​

0
Iliana Nikolova
Telerik team
answered on 30 Jul 2015, 06:38 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ashutosh
Top achievements
Rank 1
answered on 19 Apr 2021, 07:44 AM
Can you tell me how can we implement same thing, "No Data" in React js
0
Eyup
Telerik team
answered on 21 Apr 2021, 08:47 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Charts
Asked by
Sitefinity
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Sitefinity
Top achievements
Rank 1
Sam
Top achievements
Rank 1
Ashutosh
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or