I'm creating a pivot table using jqgrid with group headers. I do some calculation on input data to figure out if combined column width would exceed the fixed width of grid. If it does not exceed then i would change shrinkToFit : truefor grid to occupy full width. If I do it, then dragging column width creates alignment issues between header and body.
Problem gets worse if frozen column are enabled. The fixed header div wont expand like the column underneath it if shrinkToFit is enabled.
Here is a demo to understand the problem : http://codepen.io/anon/pen/NbxWrQ
Any leads will be helpful.
Thanks in advance.
Related
You can use a GeneXus HTML table to layout text blocks and attributes. If I add a second table to contain some other information that I want to conditionally display, quite often, the first cell is a different width to the first cells of the table stacked above it.
How do you make all the columns/cells the same width so that stacked tables display with their contents correctly aligned?
This is for GeneXus Web in Evo 2 & 3.
Thanks
Put a value in the width property of the client table first cell.
So, put the same value in the width property of the password table first cell.
Remember that the width value must be enough for both tables. In your case, the biggest textblock is the "Client Name". So, choose a width enough for that.
Best regards.
If you don't set a width, HTML will assume the minimum width required to accommodate the content. If you don't want it to be set automatically when when the page is displayed, you have to decide on a width.
In your case, you have to put the same width value for a cell (any cell) in the first column of both tables.
I have a Kendo grid with too many columns. Initially I chose to hide some columns, but later I decided to display all the columns with a horizontal scrollbar.
I did this by assigning a width to each column. When I did so, the lines between each column are not in sync with the header lines.
I mean, the lines in the data part of the grid, are moved slightly to the left with respect to the header lines.
To clarify, when I give the width for each column in pixels the above problem persists. But, when I give the width in %, the scrollbar is not displayed.
I want to display the scrollbar to show all the columns.
Any ideas about how to do this?
Here is quite straight forward grid with horizontal scrollbar (ignore the virtualization) http://demos.kendoui.com/web/grid/virtualization-remote-data.html.
Have a width on your grid or it's parent and width for each column with their sum over the actual grid width then you get your scrollbar:
{ field: "OrderID", title: "Order ID", width: 60 },
(I did quite few Kendo grids in the past and never experienced such issue. Sounds like you setting up the column width directly on the html, I can't see how else would Kendo get out off sync.)
I have a table where I show some columns depending on users choice stored in database.
What I want is:
If all columns width is shorter than table width, expand columns to use the entire table width.
If all columns width is longer than table width, make columns narrower so no horizontal scrollbar appears.
If I manually change a column width within the table (using the vertical line next to the column header), I need the other columns to autoresize so the full width is 100% (not longer nor narrower) of table width.
I've been using the parameters autowidth, shrinkToFit and forceFit, but when full width is ok, then if I resize a column manually a horizontal scrollbar appears. I cannot find the correct combination of those parameters so the table behaves like that.
Any idea on how to put those values to get my aim?
Thank you very much-
jqGrid edit and view forms row labels (they are same as column captions ) are set at runtime.
Sometimes they are narrow and sometimes wide.
For narrow labels column width in too big. There is too much empty place between label text and value field.
It looks like labelswidth: '30%' value is hard coded.
How to adjust edit and view form labels columns width automatically so that if all labels are narrow, column width is smaller ?
The first which I would try to do is to use the values in pixel instead of percents:
labelswidth: 80, width: 600
I want slickgrid to autosize the columns based on the widest content or header text - whichever is wider. In simpler terms, I want it to simulate the default behavior of regular HTML tables when it comes to column sizing. How can I do it in slickgrid?
When constructing your options, you can use forceFitColumns: true
var options = {
enableCellNavigation: true,
forceFitColumns: true
};
This will make the columns fill the entire width of your grid div.
The OP is looking for columns to grow to match their content. grid.autosizeColumns() grows the cells to fit the parent container, which is not the same thing.
I have added this feature, and it is about as manual as you might imagine. You loop through the displayed cells and measure each one, saving the widest cell and using that width to set the width of your column. SlickGrid gives you good access to the cells in the viewport, so that works nicely.
The measurement algorithm is your big decision. You may put the content off screen and measure it, as #jay suggests. This works, but it is the slowest method, as it requires a repaint to insert, and a repaint when you remove. There may be ways to optimize. The solution I went with is to measure the width of every letter in the alphabet, as well as other typographic characters we come across, and sum them to generate a width. Yes, this sounds absurd. It has many constraints: The font size must be the same, it doesn't support images, there can't be any line returns, and more. If you can live with the constraints though, you can calculate sizes for a huge grid viewport in <5ms, because the character widths are only measured once.
After you get the sizes of the columns, you assign them to your columns using grid.setColumns().
Slickgrid will not support column auto size based on data.You need to write a plugin or fork the slickgrid core to modify.
Here is the link I have created a plugin to handle slickgrid auto size
https://github.com/naresh-n/slickgrid-column-data-autosize
I added this after the grid is drawn and it works fine.
$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
You should be able to call the autosizeColumns() method of the grid object.
grid.autosizeColumns();
Make this simple adjustment to Naresh's https://github.com/naresh-n/slickgrid-column-data-autosize, on the init function:
Add $container.ready(resizeAllColumns); to the init function.
This ensures the columns autoresize on initial load
Insert the text into an off-screen element and retrieve the width of the element. This is what excanvas does to measure text. Use this to set the width of the column since it's expecting a pixel value.