Databases
StackOverflow2013
Postsdbo
POKendoUI table + AngularJS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKendoUI table + AngularJS
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload