PregressBar and Ajax posts

2 posts, 0 answers
  1. Javier
    Javier avatar
    10 posts
    Member since:
    Jun 2013

    Posted 11 Dec 2013 Link to this post

    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!
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 12 Dec 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top