KendoUI table + AngularJS - html

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.

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.

Using contenteditable in html5 will easily help you.

Related

What is faster to render (and rerender) for browser in HTML: tables or flex-box

I need to make a table/table-like component on vue. It displays tabular data. Usually it has 5-30 rows and up to 30 columns. But elements in each cell are pretty heavy to render. Each has a couple of event listener, like #click and #hover, and those call methods that render even more components. They also have a lot of dynamic. It worked very well so far, but now there is a requirement to use this exact component for much larger number of rows, around 200. Obviously, the best way to go about it, is to implement pagination, since rendering so much of those cells would slow down browser immensly. But requirements explicitly says, that UI must not have any arrows to navigate between pages of table. Only acceptable way to go through table is to use scrolling (or infinite-scrolling), like it is all one page. So now i try to implement creating and destroying elements on scroll, when certain parts of table (like every 30th row) coming to view.
My question is, what would be faster to render as a table component?
Should i use a table component, like this?
<table>
<thead>
<tr>
<th v-for="date in dates">
<span>Some dynamic components</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="name in names">
<th v-for="date in dates">
<span>Some dynamic components</span>
</th>
</tr>
</tbody>
</table>
or this?
<div class="TableLikeComponent">
<div class="TableHeaderLikeComp">
<div v-for="name in names" class="RowLikeComponent">
<span>Some dynamic components</span>
</div>
</div>
<div class="TableBodyLikeComp">
<div v-for="name in names" class="RowLikeComponent">
<div v-for="date in dates" class="ColumnLikeComponent">
<span>Some dynamic components</span>
</div>
</div>
</div>
</div>
or maybe there is even better solution?
Will be grateful for any tips.
As much as I've previously looked into table library solutions, it seems that they all use div instead of native table for performance and customization.
From personal experience, native tables are often not easy to work with, requiring hackier solutions for complex problems that would be easy to achieve with div.

Bootstrap table border visible before table loaded

I am loading a bootstrap table filled with data on my Web Page. However before I even press the execute button for the API call to be made and fetch my data, the table borders are already visible on the page like this.
The data is being filled into the tbody in js and this is the code present in my HTML. I think i need to remove the table-bordered here and put it somewhere else so it's only loaded once needed.
<div class="fullcycle-table" id="event-table">
<table class="table table-bordered">
<tbody>
</tbody>
</table>
</div>
Thanks so much for any advice on this.
Did you try setting the display to none or block based on whether the required data is fetched?
like :
document.getElementById("someId").style.display = "none";

Use a clone of `thead` as `tfoot` so that they are equal

I'm currently developing an website that provides an overview of components and their version in different locations.
Therefore, the page contains a single <select> and a single <table>. Now I've come to wonder - is there anything that allows me to use my <thead> as the <tfoot as well?
I.e. something like this:
<table>
<thead>
<!-- content -->
</thead>
<tfoot equal-to-head="true"></tfoot>
</table>
or
<table>
<theadfoot>
<!-- this would be equal to using thead and tfoot with the same content -->
</theadfoot>
</table>
Now I'm developing my "website" with Vue.js, so I could potentially write a component that does what I want. However, since I want to reduce code redundancy and not write even more code, that's not really the way to go.
Hence my question - does anybody know of an existing plugin (or even better, a built-in HTML functionality, although I doubt there is one) that one allows to combine <thead> and <tfoot>?

Can't Center Text For Newsletter In Mobile

Working on an email blast and for the life of me I cannot get the text to center in mobile view. The URL is: http://strictpixel.com/clients/relevant/fbc/email/
I am referencing the top navigation, under the logo. In mobile, it slides to the left and I am not sure why.
I know this is something simple but I have been pulling my hair out for an hour.
Thanks!
Yeah that really is a mess and you should consider refactoring. There's no way you need all those nested tables.
However, if you plan to keep it this way, the problem is likely stemming from your HTML being invalid. First, the <center> tag is dead and should not be used. Second, you break the flow of your table structure beginning after the comment I inserted below:
<p class="template-label">469-952-6404</p></td>
<td class="expander"></td>
</tr>
</table>
</td>
<!-- You can't start the new table below here without first either
opening a new <td> or closing the <tr> and <table> that is open!! -->
<table class="container">
<tr>
<td class="wrapper">
<table class="twelve columns" style="background-color:#f1f5f8;vertical-align:center;">
...
My best guess is that you missed opening up the next <td> tag just before that table begins.
Use an online HTML validator to help you find where your table structure is broken. Something like http://www.freeformatter.com/html-validator.html may prove useful.

Extract text from many structured web pages

The web site donedeal.ie does not provide the capability to search or filter by certain fields which I want to filter by. I am trying to get the link to each result page from the search results pages. Then I would like to extract some text from these result web pages which have the same structure.
I have downloaded some search result list pages and have examined the HTML. I looked into using sed to extract the links to each individual result. Then I thought I should use the DOM somehow. I have been using PhantomJS and the Javascript console in Chrome developer tools.
This is an example of a results list page.
http://cars.donedeal.ie/find/cars/for-sale/Ireland/?filters%5BbodyType%5D=Saloon&ranges%5Bprice_from%5D=1000&ranges%5Bprice_to%5D=10000&sort=price&source=ALL
This is an example of an individual result page.
http://cars.donedeal.ie/cars-for-sale/01-passat/8313920
Each link is in a div with class="listing-info". The first element of that div is another div and the first element of this div is an a element.
<div class="listing-info">
<div class="title"><a href="http://cars.donedeal.ie/cars-for-sale/renault-megane/7911289" title="renault megane" > ... </a></div>
...
</div>
It is this href link that I am trying to get for all results on all pages at the moment.
The following is markup from an individual result page.
<div class="mainAdArea">
...
<table class="extraAdDetails">
<tbody>
...
<tr>
<td class="value">Manual</td>
<td class="value">Petrol</td>
<td class="value">1.6 litre</td>
</tr>
...
<tr>
...
<td class="value">
Mar 2015 </td>
</tr>
</tbody>
</table>
</div>
I would like the extracted information to look something like this:
Manual,Petrol,1.6 litre, ... ,Mar 2015
I think the easiest way to use the information would be to extract the information for each page onto 1 line in CSV format. I am completely open to suggestions however.
What is the easiest way to do any of this?