Loading Indicator

3 posts, 1 answers
  1. John
    John avatar
    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.
  2. Answer
    Viktor Tachev
    Viktor Tachev avatar
    2497 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.

    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>


    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);

    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.
  3. John
    John avatar
    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.

Back to Top