Hi John, - - In order to implement the behavior you can use an approach that is very similar to the one described in the following example. - - - http://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/show-overlay-while-loading - - - - You need to add a div element that would be used to attach the progress indicator. Moreover, you need to handle the render event for the Chart component. In the event handler you should hide the loading image. - - - - div class=chart-loading>div> - - - - - .Events(e=>e.Render(onRender)) - - - - - function onRender(e) { - // Clear up the loading indicator for this chart - var loading = $(.chart-loading, e.sender.element.parent()); - kendo.ui.progress(loading, false); - } - - $(document).ready(function () { - // Spin all loading indicators on the page - kendo.ui.progress($(.chart-loading), true); - }); - - - - - Regards, - Viktor Tachev - Telerik by Progress - - Try our brand new, jQuery-free Angular 2 components built from ground-up which - deliver the business app essential building blocks - a grid component, - data visualization (charts) and form elements. -

Telerik Forums / UI for ASP.NET MVC Forum / Chart /

Loading Indicator

Telerik UI for ASP.NET MVC
Resources Buy Try

3 posts, 1 answers

John

37 posts

Member since:
Apr 2015

Posted 29 Mar 2017 Link to this post

Is there any way to have a loading indicator on the MVC Chart? I've seen plenty of examples on how to do that in the JS Chart but none on the MVC Chart. I have some charts with a lot of data that are taking 15-20 seconds to display so the user is sitting there wondering if the chart is even working.
Answer
Viktor Tachev
Admin

2469 posts
Posted 31 Mar 2017 Link to this post

Hi John,

In order to implement the behavior you can use an approach that is very similar to the one described in the following example.

http://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/show-overlay-while-loading

You need to add a div element that would be used to attach the progress indicator. Moreover, you need to handle the render event for the Chart component. In the event handler you should hide the loading image.

<div class="chart-loading"></div>

.Events(e=>e.Render("onRender"))

function onRender(e) {

    // Clear up the loading indicator for this chart

    var loading = $(".chart-loading", e.sender.element.parent());

    kendo.ui.progress(loading, false);

}

$(document).ready(function () {

    // Spin all loading indicators on the page

    kendo.ui.progress($(".chart-loading"), true);

});

Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
John

37 posts

Member since:
Apr 2015

Posted 31 Mar 2017 Link to this post

The onRender is not clearing the progress indicator I think because it is getting a reference to the chart div instead of the loading div. I changed the onRender function to

kendo.ui.progress($(".chart-loading"), false);

and now it is working perfectly. Thank you for the help.