RSS 2.0
Sign In
# Tuesday, May 28, 2013

While developing with KendoUI we have found kendo.ui.progress(container, toggle) function to be very useful. It's used to show or hide a progress indicator in the container element.

At the same time we have found that we usually used it in a context of async operation. This way, we want to show progress, perform some asynchronous operations, hide progress. So, we clearly want to benifit from RAII pattern: we would like to open a progress scope, and to perform some activity withing this scope.

Arguing like this, we have defined a utility function, which is the fusion of kendo.ui.progress() and $.when(). Its signature is like this:

nesterovskyBros.progress = function(instance /*, task ... */)

where instance is either Model, Widget, JQuery or DOM Element, and task is one or more deferred objects. This function shows a progress and returns a Promise that will hide a progress when all tasks will be complete. Implementation is trivial, so we quote it here:

// Fusion of kendo.ui.progress() and $.when().
scope.progress = function(instance /*, task ... */)
  if (instance instanceof Model)
    instance = instance.owner && instance.owner();

  if (instance instanceof Widget)
    instance = instance.element;

  if (instance && instance.nodeType)
    instance = $(instance);

  var id = ns + "-progress"; // "nesterovskyBros-progress";
  var progress = (instance && || 0;

  if (arguments.length < 2)
    return progress;

  var result = $.when.apply(null, [], 1));

  if (instance)
  {, ++progress);
    kendo.ui.progress(instance, progress > 0);

        progress = || 0;, --progress);
        kendo.ui.progress(instance, progress > 0);

  return result;

The use is like this:

nesterovskyBros.progress(element, $.ajax("/service1"), $.ajax("/service2")).then(myFunc);

The code can be found at controls.js.

Tuesday, May 28, 2013 5:54:52 AM UTC  #    Comments [0] -
javascript | kendoui | Tips and tricks
All comments require the approval of the site owner before being displayed.
Home page

Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, strike, strong, sub, super, u) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

[Captcha]Enter the code shown (prevents robots):

Live Comment Preview
<May 2013>
Total Posts: 387
This Year: 3
This Month: 0
This Week: 0
Comments: 1361
Locations of visitors to this page
The opinions expressed herein are our own personal opinions and do not represent our employer's view in anyway.

© 2024, Nesterovsky bros
All Content © 2024, Nesterovsky bros
DasBlog theme 'Business' created by Christoph De Baene (delarou)