Knockout Progress Bar

This blog is continuation from my previous blog, Ajax Batch Requests, on how to do multiple ajax requests parallel. In that blog I covered on how to invoke several thousands of ajax requests using batch technique. If you are doing that many ajax requests wouldn’t it be great to show the progress of those ajax requests to the user. This blog covers the user interactivity for those ajax requests by showing a progress bar.

For showing progress bar, I am using the open source Kendo UI Progress Bar. If you haven’t heard about Kendo UI, I strongly urge you to check out this open source initiative from Telerik. These controls are awesome and I feel that in many ways there are better than JQueryUI, Zurb and Bootstrap.

http://www.telerik.com/kendo-ui/open-source-core

Coming back to our problem, showing progress bar which progress for every ajax request. As you know putting a progress bar is easy.

First let’s start with defining a progress bar. Here is the html to hold the progress bar.

    <div id="progressBarWrapper">

        <div id="progressBar"></div>

    </div>

Next, let’s have a javascript function which registers the Kendo JQuery plugin and returns the progress bar object

function getProgressBar() {

    //setting the progress bar

    var progressBar = $("#progressBar").data("kendoProgressBar");

    if (progressBar) {

        //destroying the existing progress bar

        progressBar.destroy();

        $("#progressBarWrapper").empty().append("<div id='progressBar'></div>");

    }

    $("#progressBar").kendoProgressBar({

        max: <max value for progressbar>,

        value: 0,

        animation: {

            duration: 0

        }

    });

    return $("#progressBar").data("kendoProgressBar");

}

As you see in the above function I am initializing the JQuery plugin if it is not initialized and returning it. I am also destroying the plugin if it is already installed. As Kendo does not provide a way to reinitialize the progress bar, hence I have to destroy and recreate the plugin.

Finally let’s integrate this progress bar with our batch processing logic. Whenever we get a response from the ajax call, let’s just increment the progress bar value. Here is the code

 utility.httpPost('api/compatupdatehistory', patientID).then(function (data) {

    var currentValue = historyProgressBar.value();

    historyProgressBar.value(currentValue + 1);

    //call to process the next batch as needed

    updateHistoryBatch(patients, currentIndex, historyProgressBar)

  });

With the inclusion of progress bar, my batch ajax processing provides better user experience and user can know the exact status. This is much better user experience than showing a busy image.