I am using DataTables for jQuery (https://datatables.net/) to create a table. I am using JavaScript to populate the table. When it is initially created, the columnn with has some adjustment (some columns are wider than others), but it is not perfect, for example there is a two line row as in the first picture below. After resizing and maximizing again, the table is readjusted to the optimal state, with plenty of room for the row with a long name. How to I get this adjustment directly after I load the table?
Try columns.adjust() here you can see how.
Related
I have a Gridview that contains detail grids that are incorported as an asp:TemplateField. This solution works very nice (see screendump)
The sql behind these grids is extremely costly, so i want to minimize the use for it.
The detail grids contain a margin (begrote marge). The average of that must be in te master row (in the column 'Begrote Marge')
I want to do this WITHOUT calculating this via the database, because it is too costly. so hence my question:
Is there any way to use some javascript to calculate the margins clientside and enter the answer in the master row, after the detail gridview has been generated?
if there is any way to do this via .net, it would be acceptable too!
Thanks!
Unfortunately, no one answered. Here is how i finally solved this problem:
I greated a table (tblCursussen). In the rowdatabound of the detail grid, i added the margins. I also kept class variable for the master course and a counter for the number of additions the 'total' margin comprised off. With this information,
In the rowdatabound for the mastergrid, the method is started that fills the detail grid. So after the detailgrid has been generated, the class variables are filled with the appropriate figures. Once that has been acchieved, the margins in the masterrow can be calculated from the class variables, later in the rowdatabound of the mastergrid.
In my current Webproject I have to implement a table containing all days of a month, resulting in ~30-31 table columns. Since such a huge table isn't very pretty, I wanted to implement something similar to the tables of Doodle Polls. Doodle folds a table, replaces the hidden columns with a pic and if you click on that picture it unfolds the columns -> displays the hidden columns.
But how do I achieve such a behaviour? I'm new to Javascript and not that familiar with fancy CSS3 techniques.
Especially, how do I replace the hidden columns with a picture?
The tutorials I've found only allow to hide specific columns and not to replace them.
PS: I also tagged RoR, since the project I'm working on is built with RoR and maybe there is also a Rails solution for that problem?
PPS:
You could hide the columns you want to hide first and have a column with the image displayed in the table. When the image (folding) is clicked you can hide the column containing the picture and make the other columns visible again. This is not really about some fancy css3 stuff but you need basic knowledge of how to interact with DOM elements through javascript (hide / show) elements. That should do the trick.
See this tutorial at w3schools. All that you need is get the elements you need (Image Column and all TDs in the hidden columns) ant then apply a css style to them (hidden / visible).
I'm writing a Javascript based table widget that I hope to be capable of handling basically a limitless amount of data. To do this, the table will make Ajax requests for data only as it is needed (when scrolled into view). I have the basic idea working, but one issue I'm struggling with is the resizing of table columns.
Since only a section of all the rows is actually rendered at any time, the table tends to reflow as the max width of the columns changes.
I thought about iterating the table cells each time the table is rendered, and remembering the "max width" of each column. There would still be some reflowing, but once you've seen the widest td, it should stop. The issue is that this seems to be a kind of clunky solution, and I find myself writing more code than I'd like to handle it.
Has anyone run into this before, or have any simpler ideas on how to handle it?
For consistency, I would lock the column width to what it is on the first view of the table. That way, there's no shifting at all.
You should also give the developer a way to specify a static column width for the columns so that they can size them appropriate to their data once they know the widths.
I have a grid with 3 columns: title, content and date created. My largest column with most content is the content column. However this column can hold much more text than one row of the grid. Ext JS automatically trims the text from a certain point on.
Can I stop it from automatically trimming the values in the rows and just show the whole content? I would post my code, but it's an entire MVC pattern, which spreads over several files and it would take a lot of time to gather it all.
You need to use Preview or RowExpander plugin
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ux.RowExpander
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ux.PreviewPlugin
Here is the sample page you might want to look at:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/paging.html
Basically idea is to have custom template which will render whole your data instead of having rows of the same height.
I need to represent huge data(37 columns,1000+ rows) in web. I would like to fix header row of this table and then manipulate data accordingly.
There are lots of possible solutions in web, some of them depends on css and some depends on javascript.
I have tried lots of them, and each time I ve stucked at the same point where table header cells and table row cells are not aligned.
First way i have tried : https://s12-chicago.accountservergroup.com/~gomathik/demos/scroll.html
Second way i have tired : http://www.imaputz.com/cssStuff/bigFourVersion.html#
They both, fixed the header of course. But i still have the alignment problem.
Do you have any suggestions?
I m begginer to html and css, any help would be appreciated.
Thank you in advance!
i have some experience in this and i can give you some thoughts/ pointers:
easiest way to do this is to set table style to fixed, then you can change column widths with css and they will stay that wide regardless of content inside.
after your column widths is pre-defined, you can clone the thead into another table above your table and it will act like a fixed header
otherwise you will need to:
set the height of the header to 0px
clone the header into a table above the table
set the width of the new header's table to the width of original table
set the outerwidth of each cell in the new table to the outer width of the same header cell in the original table
also, none of the solutions for doing this seem to be good. i found that writing a custom solution is always better then trying to arm wrestle an existing generic plugin into doing what i need.
I worked on a project where the goal was to visualize large data sets (10-20 columns, 500+ rows), among other visualizations, as a table.
I used Google Visualization API Table. It's simple to use and controlled with JavaScript (don't scare off!).
It has nice support for formatting (through DataTable class). It actually uses HTML table markup with some extra JavaScript and CSS in there. The Table class takes care of the cell alignment. Take a look at the examples.