I'm creating a report for MS Dynamics AX using SSRS. So far everything is working well, but this time i'm making a report consisting of many tablixes. Row height is fixed and there seem to be no issues from a horizontal perspective. Vertically however there is problem because columns are resizing randomly and my tablixes dont appear uniform. Everything appears perfect in design view but not in the output. Columns resize at run time. I have set the canGrow properties to false and resized all the columns manually but to no effect.
I've attached screenshots of my design and a small part of the preview/output.
Design
Preview
Has anybody faced such an issue? Were they able to solve it?
I had a similar issue where I needed the cell to be 3.5 in, regardless of the data within it. The fix wound up being to set the padding in the blank cell to that width.
From the documentation on the FooTable website, I had the impression that table 'breaking' depended on screen resolution (or browser window width). Thus, the browser width.
But in practice, it seems to 'break' tables depending on the width of the container element they're in, eg. a DIV element.
How are these breakpoints supposed to work?
I'm sorry, I did not read the docs well enough.
They state: "FooTable works with the concepts of "breakpoints", which are different table widths we care about."
Thus, breaking points are about table width, not window or screen width.
Duh...
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.
How do you force a row to be a given height? I have a grid that has a column that sometimes has lengthy data and the rows auto-size to fit it in. I'd like to force the rows to remain a uniform height, however all of my searches seem yield results from people trying to achieve the exact opposite.
What you need to do is just set the CSS attribute 'height' of the row (of the <tr>) element. It is important that you can do this only after the row will be created. So you have to place the changing of the 'height' inside of loadComplete of gridComplete event handle.
The answer contain working demos. The usage of setRowData inside of the loop is not the best way from the performance side, but nevertheless the demos shows the main idea how to set the fixed row height dynamically.
I am using AdvancedDataGrid with its number of rows changing dynamically.I want to adjust the grid height according to the number of rows displayed.Can anyone help me out in this.
I'm not sure what you're asking... please provide an example. You want the grid to keep getting taller as the row number increases? Is this to avoid a scroll bar? How tall would you like it to get before you stop? Are you looking for it to be 1:1 (height = numberOfRows * heightOfOneRow)?
It sounds like what you're asking for should be pretty straight forward, if you just elaborate a little bit.
This is a dupe of flex datagrid - making grid height dynamic and component that contains it, and I answer the question more fully over there. Short version: the rowCount property controls the height of the DataGrid control.