This is a migrated thread and some comments may be shown as answers.

PregressBar and Ajax posts

1 Answer 171 Views
ProgressBar
This is a migrated thread and some comments may be shown as answers.
Development Team
Top achievements
Rank 1
Development Team asked on 11 Dec 2013, 09:41 PM
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!

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 12 Dec 2013, 03:04 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ProgressBar
Asked by
Development Team
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or