How to implement a kendo.ui.progress component on lengthy sheet renderings /page loads

[George]

Hi. I have a spreadsheet control that can have ~7000 rows per sheet with formatting used. I need to know where to start the  kendo.ui.progress component and where to end it. I tried to put the start in the selectSheet sheet Event handler:

document.getElementById('generateText').innerHTML = "Loading large page...";
$("#popUpProgressWindow").data("kendoWindow").open();
kendo.ui.progress($("#popUpProgressWindow"), true);

...but I couldn't figure out where to put the matching "hide" or:

$("#popUpProgressWindow").data("kendoWindow").close();
kendo.ui.progress($("#popUpProgressWindow"), false);

In addition, it seems like the progress component won't actually start until render event. (which is after everything has rendered).. and by then the sheet seems to be populated already.

I also tried creating an onClick event handler to start the progress component. No luck.

Thanks again for your help and patience ^__^

George

[George]

P.S.  I did try this idea with no success. :( 

Open Progress Indicator on Pasting Data - Kendo UI Spreadsheet for jQuery - Kendo UI for jQuery (telerik.com)

[Nikolay]

Hi George,

The Kendo UI Spreadsheet by design renders a progress indicator when the component is remotely bound while the data source fetches the data. You can examine this in the next official demo:

https://demos.telerik.com/kendo-ui/spreadsheet/datasource

What is your current use-case? I see you have a Window. Is the Spreadsheet rendered inside it?

Regards,

Nikolay

[George]

What I am having issues with is when I move from one sheet to another, loading the data to the sheet - the data is in the browser.

• I have a sheet with potentially 7000 rows...moving to this.
• All of the data is loaded at once...my client does not like pagination either.
• So the entire set of the data is loaded to the page all at once.
• I just need some sort of progress indicator when I switch from one sheet to another -- if it takes longer than 3 seconds.
• Loading the sheet within this workbook takes about 5 seconds, and it has mostly format and formula information on it.
• I am generating the JSON object that produces these "format sheet" objects with C# and letting the ASP .NET Core ActionResult <> return type taking care of the object to JSON generation.
• The data is there on the page... for the whole workbook: all the sheets
• Also I have a raw data sheet.... with the 7000 rows of ACTUAL data... just data no formatting on the cells...that loads in fairly quickly when I traverse to that sheet.
• In fact... I have a pretty sheet with formatting information paired with a data sheet for every one of these reports.

I am looking for a way to BLOCK the rendering of the new sheet and  launch a window with a kendo.ui.progress animation and then start the rendering, then hiding the window and kendo.ui.progress widget or animation.  That is what I am trying to do now. It just seems like the rendering takes over and then the window comes up. I want  window/ progress  appears --> rendering  sheet ---> window/progress is hidden.

I just need some sort of user feedback indicator that its "working on rendering" the selected sheet. I know this is insane. Sorry. :(

Thanks!

George

[Nikolay]

Hi George,

If the progress indicator is loaded inside a Window you don't need to hide the loader. Closing the Window will hide the loader as well.

You can open the Window inside the selectSheet event that will when a sheet will be activated.

$("#spreadsheet").kendoSpreadsheet({
            selectSheet: function() {
              $("#window").data("kendoWindow").open().center();
              kendo.ui.progress($("#window"), true);
            },
    .....

Doj odemo: https://dojo.telerik.com/ewereHOL

You can test the above example by clicking on the Add new sheet button (`+`).

Regards,

Nikolay

[George]

Nikolay,

Hi. That is essentially what I am doing currently.

The problem is when you click on the Sheet to select it the render event happens at the same time.  And the pop-up window does not appear until after the sheet has rendered. I need a way to block the render event or the start of the render event and let the page run.

Again 7000 rows are trying to render, and it takes like 5 seconds to render...so after it's completed rendering the cells ==> then the pop-up appears. you'd think that anything started in the selectSheet event would happen prior to when render event starts running, or prior to whatever thread is started that puts the cells in. I'd like to know how to syncronize the pop-up page so it BLOCKS the event that renders the contents of the sheet,

Thanks!

George

[Nikolay]

Hi George,

Is it possible to share a runnable Dojo demo where I can see what you are trying to achieve? This will help me fully understand the case and allow me to advise further.

Regards,

Nikolay