PregressBar and Ajax posts

[Development Team]

I need to run some batch ajax posts and would like to use the new porgressbar to show the progress.
I'm trying to use the Kendo Window to display the progressbar. The post happens when user clicks on my kendo grid checkbox.
The issue I'm having is that the window only shows after the post is completed.

Here is my window code:

 <% Html.Kendo().Window()
    .Name("windowevent")
    .Scrollable(false)
    .Modal(true)
    .AutoFocus(true)
    .Width(500)
    .Title("Processing ...")
    .Content(() => {
        %>
            <div class="loading">
                <%= Html.Kendo().ProgressBar()
                .Name("totalProgressBar")
                .Type(ProgressBarType.Chunk)
                .ChunkCount(4)
                .Min(0)
                .Max(4)
                .Orientation(ProgressBarOrientation.Horizontal)
                .Events(e => e.Complete("onTotalComplete"))
                %>
            </div>
            <div class="loadingInfo">
                <h2>Loading styles</h2>
                <div class="statusContainer">
                    <p>
                        Loaded: <span class="loadingStatus">0%</span>
                        <br />
                        Item <span class="chunkStatus">1</span> of 4
                    </p>
                </div>
            </div>    
        <%
    })
    .Draggable()
    .Visible(false)
    .Render();
    %>


Here is my checkbox click event:

function onClick() {
            $.ajaxSetup({ async: false });

            $("#windowevent").data("kendoWindow").center().open();
            
         $.post("<%= Url.Action("AddToCatalog", "Settings")%>?CatalogID=" + <%= Model.CatalogID %> + "&ManufacturerID=" + id + "&time=" + new Date().getTime(), function (data, status) {
                    if (data != "True" || status != "success") { alert("Error trying to update. Please try again."); gridMan.dataSource.read(); };
                });
           var total = $("#totalProgressBar").data("kendoProgressBar");
           total.value(total.value() + 1);

            $.ajaxSetup({ async: true });
            
        }

Any clue how to make this an efficient sync process?


Thanks!

[Dimiter Madjarov]

Hello Javier,


When the async option of the jQuery ajax method is set to false, the UI thread is blocked. I assume that this is the reason why the window widget is not opened.

For additional information I would suggest you to take a look at the the following topic.

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik