Kendo Progress bar not initiating while making ajax call
<p>I want to implement the Kendo progress bar for my server side ajax call.
  I tried but it's not initiating before the ajax call, and if I use the setTimeOut function below for closing the ajax call, the progress bar only displays for a short duration.
  For example: </p>

<pre><code> setTimeout ( function() 
       {
        kendo.ui.progress($("#progressBar"), false); //close the progress bar       
       },5000);
</code></pre>

<p>In the above code, the progress bar only shows for 5000 milliseconds, after which it closes. Here is my actual requirement.</p>

<p>I need to have two ajax calls, one inside another.  I want to implement the progress bar before the first ajax call initiates and want to close after the 2nd ajax call completes.
      Another option would be to implement the progress bar before the first ajax call initiates and close it once the 1st call is complete, then initiate the progress bar for the 2nd ajax call and close when the 2nd ajax call is complete.</p>

<p>I hope my requirement is clear. If you need more details please let me know.  Here is my code:</p>

<pre><code> &lt;div id="progressBar"&gt;&lt;/div&gt;

   &lt;script&gt; 
        var getResponseFromSOA = function(filterObject, file,verb, callback) {      
    createFilterString(filterObject, function(filterString) {// get the filter string
        if(jQuery) {// check the jQuery file is integrated or not
            var headers = {Authorization: COOKIES.readCookie("Authorization"),requestmode:"ACK_URL"};
            headers.isRender = file.isRender;
            if(file.inputDataHeaders)
                headers.inputData = file.inputDataHeaders;
            /*
             * Since it is async call that's why call will be 2 times.
             * 1st time we have to call to the request handler of the SOA.
             * In the response we will get one link address of response handler.
             * 2nd time we have to call that link what we got from the 1st request.
             * Response handler will give actual data in the data property of the response
             */

                    kendo.ui.progress($("#progressBar"), true); //Here progress bar will initiate

                jQuery.ajax({
                    url: file.fileUrl + "/" + $securityComponent.cryptograghicFunctions.encryptor(filterString),
                    type: verb,
                    headers: headers,
                    async: false,
                    error : function()
                    {
                        console.log("some error occured at getResponseFromSOA submitting the request");
                    },
                    success: function(responseDataFromRequestHandler) {                         
                        // again call because it is async mode form SOA team
                        jQuery.ajax({
                            url: responseDataFromRequestHandler.links[1].href,
                            async: false,
                            headers: {Authorization: COOKIES.readCookie("Authorization"),requestmode:"ACK_URL"},
                            success: function(responseDataFromResponseHandler) {
                                try {
                                    console.log(responseDataFromResponseHandler);
                                    if(callback) callback(responseDataFromResponseHandler.data);
                                }catch(e) {
                                    console.log(responseDataFromResponseHandler);
                                    // printing the error message in the console window
                                    console.log("Error in the callback in data-transactor-js &gt; getResponseFromSOA"
                                            + "\n"
                                            + e.message);
                                }
                            },                          
                            complete: function() {

                                    kendo.ui.progress($("#progressBar"), false); //close the progress bar       

                            }
                        });
                    },
                    complete: function() {                          
                            kendo.ui.progress($("#progressBar"), false); //close the progress bar       

                    }
                });


        } else throw {message: "jQuery is not defined or jQuery file is not linked"};
    });
};

&lt;/script&gt;
</code></pre>

<p>Thanks in advance...</p>