title: Kendo : Insert a FormGroup at a top into a FormArray
body: <p><strong>Problem Statement :</strong></p>
  
  <p>In below stackblitz demo, I am able to insert the <code>FormGroup</code> dynamically at the starting of the grid on clicking the <code>Add</code> button and triggering the <code>(blur)</code> event from one control to update the value of another control sharing same <code>rowIndex</code>. Now the issue is if i inserted multiple <code>formGroups</code> and trigger on <code>(blur)</code> event on any of the newly added <code>FormGroups</code> it updates the value of other controls as well having different <code>rowIndex</code>.</p>
  
  <p><strong>Steps to reproduce the issue :</strong></p>
  
  <ul>
  <li>Open the below demo link.</li>
  <li>Add multiple rows (2 rows) by clicking on the Add button.</li>
  <li>Enter the value in name field of the 2nd newly added row and focus out.</li>
  <li>It updates the age field in both the newly added row instead of only in second one.</li>
  </ul>
  
  <p><strong>Stackblitz Demo :</strong> <a href="https://stackblitz.com/edit/angular-oitz5j-4uezqr" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-oitz5j-4uezqr</a></p>
  
  <p><strong>Requirement :</strong> </p>
  
  <p>Tab out on any name field of particular row, Age field on same row should display a random number without impacting other rows.</p>
  
  <p><strong>What i tried so far ?</strong></p>
  
  <ul>
  <li><p>Tried to use Array <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift" rel="nofollow noreferrer">unshift()</a> method but getting error</p>
  
  <blockquote>
    <p>Property 'unshift' does not exist on type 'FormArray'</p>
  </blockquote></li>
  <li><p>Tried to use <a href="https://angular.io/api/forms/FormArray" rel="nofollow noreferrer">FormArray.insert()</a> method.It will work if we want to add a <code>FormGroup</code> at specific index. But it fails to insert multiple <code>FormGroups</code> on the top of <code>FormArray</code> dynamically.</p></li>
  </ul>
  
  <p><strong>Update :</strong> Above issue is working fine without Kendo Grid. Please check the below demo.</p>
  
  <p><strong>Demo :</strong> <a href="https://stackblitz.com/edit/angular-oitz5j-2a31gs" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-oitz5j-2a31gs</a> </p>
  
  <p><strong>Related issues in github/stackoverflow :</strong></p>
  
  <p><a href="https://github.com/angular/angular/issues/16322" rel="nofollow noreferrer">https://github.com/angular/angular/issues/16322</a></p>
  
  <p><a href="https://stackoverflow.com/questions/44489034/angular-form-array-push-specific-index">Angular - Form Array push specific index</a></p>
  
  <p><strong>Note :</strong> If we are going to add the controls at the end of the Grid, it is working like a champ. Please check the below demo which works fine with adding the controls at the last.</p>
  
  <p><strong>Demo :</strong> <a href="https://stackblitz.com/edit/angular-oitz5j-aszrjq" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-oitz5j-aszrjq</a></p>