Next
Update
Prev
Show Progress Bar
Hide Progress Bar

You can show and hide the progress bar using the KoolGrid API . Click on the "Show progress Bar" button and click on the "Hide progress Bar" button to see how it works.

function showProgressBar() {
  dataGrid.setEnabled(false);
  gridRoot.addProgressBar();
  progressBar = gridRoot.getProgressBar();
  percent = 0;
  progressBar.setProgress(percent, 100);
  progressBar.setLabel("Loading "+ percent + "%");
  timer = setInterval(timerHandler, 500);
}
					
function timerHandler() {
  if (progressBar) {
    percent += 5;
    if (percent > 100) {
      hideProgressBar();
      return;
    }
    // Sets the progress ratio - default : %
    progressBar.setProgress(percent, 100);
    progressBar.setLabel("Loading "+ percent + "%");
  }
}

function hideProgressBar() {
  dataGrid.setEnabled(true);
  gridRoot.removeProgressBar();
  progressBar = null;
  if (timer)
    clearInterval(timer);
}

© 2017 KoolChart. All rights reserved.