title: KendoUI table + AngularJS
body: <p>I am trying to implement a generic table widget (using KendoUI) having the data binding done with AngularJS.
  The table widget would look something like this in the HTML file (fiddle here: <a href="http://jsfiddle.net/mihaichiritescu/ULN36/35/" rel="nofollow noreferrer">http://jsfiddle.net/mihaichiritescu/ULN36/35/</a>):</p>
  
  <pre><code>&lt;div ng:controller="Tester"&gt;
      &lt;gridview&gt;
          &lt;div data-ng-repeat="man in people"&gt;
              &lt;gridviewcolumn datasource="name" man="man"&gt;&lt;/gridviewcolumn&gt;
              &lt;gridviewcolumn datasource="age" man="man"&gt;&lt;/gridviewcolumn&gt;               
          &lt;/div&gt;            
      &lt;/gridview&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Basically, the table would have an ng-repeat that would repeat through the list of objects, and for each object, using the 'gridviewcolumn', I would add cells under each row.
  This way, I am trying to replicate the structure of the KendoUI table, which is something like this:</p>
  
  <pre><code>​​&lt;div id="grid"&gt;
  &lt;div class="k-grid-header"&gt;&lt;/div&gt;
  &lt;div class="k-grid-content"&gt;
      &lt;table&gt;
          &lt;colgroup&gt;&lt;/colgroup&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;                
              &lt;/tr&gt;          
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="k-pager-wrap k-grid-pager"&gt;&lt;/div&gt;
  &lt;div&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
  </code></pre>
  
  <p>So, using the ng-repeat, for each object I will dynamically add a new row, and for each column I will add a new cell on the last added row. Unfortunately, I am not able to manipulate the ng-repeat directive in such a way that I will properly replicate the internal structure of the KendoUI grid view. I am ending up with an internal table structure looking like this:</p>
  
  <pre><code>​&lt;div id="grid"&gt;
  &lt;div data-ng-repeat="man in people" class="ng-scope"&gt;
      &lt;div datamember="name" man="man" class="ng-binding"&gt;name1&lt;/div&gt;
      &lt;div datamember="age" man="man" class="ng-binding"&gt;21&lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-ng-repeat="man in people" class="ng-scope"&gt;
      &lt;div datamember="name" man="man" class="ng-binding"&gt;name2&lt;/div&gt;
      &lt;div datamember="age" man="man" class="ng-binding"&gt;25&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="k-grid-header"&gt;&lt;/div&gt;
  &lt;div class="k-grid-content"&gt;
      &lt;table&gt;
          &lt;colgroup&gt;&lt;/colgroup&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;                
              &lt;/tr&gt;          
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="k-pager-wrap k-grid-pager"&gt;&lt;/div&gt;
  &lt;div&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 
  </code></pre>
  
  <p>I would like to somehow place the content of the ng-repeat directive in the body of the table, not above it. Does anyone know how to accomplish this?<br>
  I could use jquery to place the content into the cells, but I would still have to remove/hide the ng-repeat directives and their content from above the table body, which I do not know how to do without some ugly hacks. <br>
  Also, I am not necessarily bound to KendoUI gridview, but it seems better looking than others, and it probably has similar internal structure to other table widgets, so I would encounter the same issue with other widgets too.<br>
  Do you guys have some ideas/advice on how to implement a generic table using AngularJS? I did search for some tables done with AngularJS, but I did not find something that would have good functionality and looks. </p>