KendoUI table + AngularJS

Question

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: http://jsfiddle.net/mihaichiritescu/ULN36/35/):

<div ng:controller="Tester">
    <gridview>
        <div data-ng-repeat="man in people">
            <gridviewcolumn datasource="name" man="man"></gridviewcolumn>
            <gridviewcolumn datasource="age" man="man"></gridviewcolumn>               
        </div>            
    </gridview>
</div> 

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:

​​<div id="grid">
<div class="k-grid-header"></div>
<div class="k-grid-content">
    <table>
        <colgroup></colgroup>
        <tbody>
            <tr>
                <td></td>
                <td></td>                
            </tr>          
        </tbody>
    </table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

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:

​<div id="grid">
<div data-ng-repeat="man in people" class="ng-scope">
    <div datamember="name" man="man" class="ng-binding">name1</div>
    <div datamember="age" man="man" class="ng-binding">21</div>
</div>
<div data-ng-repeat="man in people" class="ng-scope">
    <div datamember="name" man="man" class="ng-binding">name2</div>
    <div datamember="age" man="man" class="ng-binding">25</div>
</div>
<div class="k-grid-header"></div>
<div class="k-grid-content">
    <table>
        <colgroup></colgroup>
        <tbody>
            <tr>
                <td></td>
                <td></td>                
            </tr>          
        </tbody>
    </table>
</div>
<div class="k-pager-wrap k-grid-pager"></div>
<div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

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?
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.
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.
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.

Answer 1

I have created two fiddles which would demonstrate how what you are trying to achieve could be done. The first fiddle uses ( http://jsfiddle.net/ganarajpr/FUv9e/2/ ) kendoui's grid ... So its style and display is complete. The only caveat being it wont update if the model changes. This is because kendoui takes the data first and then produces all the UI elements based on the model provided at the beginning.

The alternate is to use Kendo's UI (css) and leave out the grid producing code.

http://jsfiddle.net/ganarajpr/6kdvC/1/

This I believe is closer to what you were looking for. It also demonstrates the use of ng-repeat in a table.

Hope this helps.