Kendo.UI.Progress

[George]

Hello,

We were advised by Kendo support to use a kendo.ui.progress control to display on-screen during a save process (which may take 5-10 seconds), but it seems like the Progress control isn't able to display before the save process begins. In fact, it is only drawn after the save process completes, which renders it pointless.

I've mocked up an example here:

http://dojo.telerik.com/OLiGUz

It's clear from the display of the button that the delay has occurred (as it's unresponsive during this period). Additionally, if you comment out the line which hides the Progress control, and re-run it, you can see that the Progress control is only displayed after the long process has completed.

So how do we get the progress control to display before the long process begins?

We urgently require a solution to this problem, so would appreciate a recommendation ASAP.

Thanks.

[Stefan]

Hello George,

Thank you for the runnable example.

After inspecting it, I noticed that this is a timing issue.

The loading indicator does not have enough time to be initialized. as the long process starts too fast and the browser is not responsive. I can assume that this is similar to what is happening in the real application.

Please ensure that the save progress is executed a little bit after the loading indicator is shown, to give it enough time to properly render:

http://dojo.telerik.com/OLiGUz/2

Regards,
Stefan
Telerik by Progress

[Raj]

Hello

I am switching the grid view by different column grouping on click of check box. Mean while it takes time to load data and i want to show kendo progress. i tried the following code but didnt work. 

If i debug in chrome developer tool, i can see progress but on page it doesnt.

    function switchView() {
        var grid = $("#DMRFailGrid").data("kendoGrid");
      
        var checkbox = document.getElementById('chkViewByFacility');

        if (checkbox.checked) {
            kendo.ui.progress($('#DMRFailGrid'), true);
            grid.dataSource.group({
                field: "FacilityName", aggregates: [
                    { field: "FacilityName", aggregate: "count" },
                ]
            });
            grid.hideColumn("FacilityName");
            grid.showColumn("Reason");
            kendo.ui.progress($('#DMRFailGrid'), false);
        }
        else {
            kendo.ui.progress($('#DMRFailGrid'), true);
            grid.dataSource.group({
                field: "Reason", aggregates: [
                    { field: "Reason", aggregate: "count" },
                ]
            });
            grid.hideColumn("Reason");
            grid.showColumn("FacilityName");
            kendo.ui.progress($('#DMRFailGrid'), false);
        }
    }

Raj

[Stefan]

Hello Raj,

Thank you for the provided code.

After inspecting it I noticed that the loading indicator is removed in the same function which is setting it, which will create a scenario where it will be shown for just a moment.

I can suggest removing the indicator on the dataBound event of the Grid which will be fired just a moment before the Grid is re-rendered after the grouping:

https://admin.telerik.com/docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

dataBound:function(e){
           kendo.ui.progress($('#DMRFailGrid'), false);
}

Regards,
Stefan
Progress Telerik

[Raj]

That didnt work,

I can see spinner on page while debugging in chrome developer tools when i check the checkbox but i dont see spinner on page if i dont debug.

I think you have the enough code to make a runnable sample. can you please provide runnable sample?

Raj

[Stefan]

Hello Raj,

Currently, we can make an example, but it will differ from the real application as it will be missing the serverGrouping implementation which is a key point in the scenario.


Please have in mind that the Grid is requesting its height property to be set in order to show the loading indicator. If the height is not set, the described behaviour of rendering, but not showing the indicator can be observed:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-height

If the issue still occurs, please provide a live URL to the application, when we can observe what may be causing the issue in the live application.

Regards,
Stefan
Progress Telerik