title: How to transform for loop with asynchronous operation inside
body: <p>I've a scenario where I've a variable number of grids in a page and when the user click a button I need to do the following:</p>
  
  <p>For each grid</p>
  
  <ol>
  <li>Get some data from the grids</li>
  <li>Show a dialog box to write some data</li>
  <li>Do a $.post() operation after the dialog box is closed</li>
  <li>Process the next grid</li>
  </ol>
  
  <p>Here's a code snippet of what I'm doing</p>
  
  <pre><code>for (var i = 0; i &lt; grids.length; i++) {
    var grid = grids[i];
  
    // Process some grid's data
      ...
  
    // Show a dialog box to write some extra data
      dialog.open(); // dialog is a Telerik Window widget
  
    // When the dialog box is closed do a $.post()
      $.post(...)
        .fail(function(error) {
  
        })
        .done(function(data) {
  
        });
  }
  </code></pre>
  
  <p>The problem I'm facing is that the dialog box open in asynchronous way (I'm using Telerik Window widget for the dialog) so I need to transform the <em>for</em> loop to make the process synchronous.</p>
  
  <p>Can anyone please tell me how to accomplish this?</p>
  
  <p>Thank you.</p>