KendoUI table + AngularJS

Viewed 11038

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.

2 Answers
Related