i have a small screen and i want the horizontal scrollbar on datagrid to appear automatically.
i've used:
dataGrid.setMinimumTableWidth(1500, Unit.PX);
this sets the width both the scrollbar still not appear
any tip?
I had a similar problem. When using DatGrid make sure you place it within a ResizeLayoutPanel. Set the height of the panel to xxx PX and the width to a yyy %. Then for the DataGrid just set width to 100%. Column widths units can be EM, PCT, or PX. In fact do not set all column widths to total 100%, otherwise you'll get funky display issues. Hope this helps.
So I tested out this code, both scrollbars show.
<g:ResizeLayoutPanel height="480px" width="760px">
<c:DataGrid width="100%" addStyleNames='{style.cellTable}' ui:field="testResultTable"/>
</g:ResizeLayoutPanel>
Related
Can someone help me in understanding how to calculate the Height and Width of a Powershell Forms. For Example I Created a blank Powershell form of Height 500 and Width 700 and now If want to place a Text box a little below from the top of the form what will be the height and width that I need to enter? and If I want to place a Button at middle of the Form? what will be the height and width that I need to enter? I am struggling with this calculation.
You should get the screen size and use the ratio to set position. The ratio is useful for different screen size.
I'm using ag-grid-community v.25.1.0 with 2-rows header and 5 pinned bottom rows.
I want the grid header to be always at fixed position - even when I scroll to the last data rows of my grid (which are often far below the screen bottom).
Unfortunately this forces me to set 'height = 100vh' for the grid - but then the 5 pinned bottom rows also occupy screen area, so there's too small height left for the data rows (about 10 data rows left when I'm using my 13-inch laptop). See demo #1 at https://codesandbox.io/s/aggrid-issue-demo-j9ls9
And if I do not limit grid height with 100vh - then the pinned bottom rows go ouside the screen together with the data rows (because AgGrid's OWN vertical scrollbar is no more shown) which is OK except for... scrolling down the vertical scrollbar of the grid's container (body tag) moves grid's header outside the screen (although "I want header to be always at fixed position" - see this requirement above!). See demo #2 at https://codesandbox.io/s/aggrid-issue-demo-2-52bo3 - it would be OK if header stayed at fixed position.
If there were no pinned bottom rows - the problem would not exist. But these pinned rows are really necessary in my app; however the fact that they occupy ~33% of the grid's height - is a real problem. Yes, I can make row height smaller (together with the font used to paint the cells) - but that's an ugly workaround, not a real solution. I can also provide users with a possibility to show/hide some of the pinned bottom rows (using several checkboxes) - but this "solution" also smells (besides, in most cases all 5 pinned rows are needed).
Is there any solution? maybe I can adjust header's CSS so that it's Y-coordinate stays strictly fixed? in such case removing 'height = 100vh' would solve my problem...
UPD: maybe it makes sense to describe the difference between demos #1 and #2:
App.css:
added this file to override the ".ag-root-wrapper-body.ag-layout-normal" style - because it had height set to zero
App.tsx:
added import for App.css (see above)
removed div style "height: '100vh'"
index.html:
removed body style "overflow-y: hidden;" (to enable vertical scrollbar which is needed to access last rows after we removed '100vh' above)
In ag-grid, the value of domLayout can be set to autoHeight in order to disable vertical scrolling of the ag-grid panel. Instead, the entire page adapts its height to show all the rows.
How can I have the same behavior for the horizontal scrolling?
There is the suppressHorizontalScroll option when set to true hides the horizontal scroll bar, but this doesn't force the entire page to have a scroll. Instead, the overflowing content is just hidden.
you can do this to some extent by juggling the minWidth, maxWidth, and width attributes on your columns while setting the width of the columns automatically based on their content using the gridColumnApi.autoSizeColumns(colId) method.
I say to some extent because it is quite hard, with agGrid, to set different row sizes for rows with certain cells having a lot of text or big images in them. This would force some columns to expand to accommodate for the content, or just clip it completely. Thus forcing the horizontal scroll.
Note : for the method above to work, you need to call gridColumnApi.autoSizeColumns(colId) after you get your rows setUp.
From what I understand the DataGrid auto resizes the columns.
What I would like is DataGrid to respect the column widths I set, and to show the horizontal scrollers accordingly. Is there a way to achieve this?
DataGrid gives you complete control over the width of its columns.
For example, if you set the width of all columns in pixels except for one column which has a width equal to 100%, then all columns will have exactly the width you specified, except for the percentage column which will shrink or expand based on the width of a DataGrid itself. If you want all columns to have fixed width, then you should set the width of the entire DataGrid explicitly in pixels.
There is also an important .setMinimumTableWidth method. You can use it to tell the DataGrid that it can resize with the width of its parent container, but never be smaller than a certain number of pixels. In this case, if a parent container is too small to accommodate all columns at their desired width, the horizontal scrollbar will appear.
I need to render a TextArea in an exact pixel width for the special purposes of my GUI.
When I set its width to "250px", it comes out as 256px.
Is there a way to override this behavior so I can render it as 250px exactly?
When you use setWidth(), you're effectively setting the element's content width.
To get the offset width use UIObject#getOffsetWidth(). This will return the width including padding and border (but not margins).
References on W3C
Computing widths and margins
The box model