These boxes will basically be images of unknown resolutions. I want them to fit in such wrap structure that they are put one by one from left to right, but if there's more space in right column then the image should be placed in the right column instead of the left one.
I was wondering if this is possible with "wrap" widget, I tried it and couldn't get it to work without having to set a fixed height and wrap alignment to vertical. But I can't have a fixed height because there will be unknown number of images.
If nothing works, I will have to have a custom solution using columns or rows and I can do that but I just want to know if there's a simpler way to do this. Thank you in advance!
I have problem designing inside a flexible a grid where it can go from 3 item in a row on full screen to be 1 item in a row on the smallest allowed size of the application, is there a widget or guide for this?
use ResponsiveGridList from the package https://pub.dev/packages/responsive_grid.
It is simple and well documented. I used once already, it fitted my needs perfectly.
I have copied the code column definitions and all attributes pertaining to resizing columns from the ag-grid examples for re-sizing columns in ag-grid vue, however I cannot resize my columns... the cursor will not even change to the "arrow" when I hover over the left or right edges of the columns.
Has anyone ever run into this?
If you are using ag-grid version 19.1.2 you can enable column resizing by setting [enableColResize]=true to ag-grid component
i have a that grid consists of 3 columns. The first and third columns have fixed width but the middle is auto fit. What i want is to disable drag and drop on fixed columns so their positions in grid wont change ... any help for this ???
You can set the column to be fixed on the ColumnConfig using columnName.setFixed(true)
I am scratching my head on this one but I am starting to think it may be a bug in ag-grid.
I have a grid that is (inconsistently) only rendering 3 rows of data when I am expecting 5. There is a blank space for the 2 missing rows.
The pager says 5 rows, and the grid seems to know there are 5 rows (when I step through the javascript debugger). In fact, if I sort on the grid, or resize the window such that the grid provides scrollbars, the other 2 rows suddenly appear.
Has anyone seen anything like this?
----More detail but may not be relevant:
On this particular page, I have 2 grids. There is a main grid that has links in it, and when you click into a link, it hides the main grid and shows you the other grid. I was concerned that that was coming into play somehow, but I actually have seen this on another page I'm working on that has just 1 grid.
Based on various explanations I have seen online, I tried this and it appears to be working:
setTimeout(function ()
{
$scope.gridOptions.api.refreshView();
}, 0);
I call this after
params.successCallback(pResponse.data);
which invokes the grid's callback
Based on your observations that sorting or resizing the window makes the data appear, I get the feeling that the code needs to force the screen refresh somehow.
this.gridOptions.api.refreshView();
I had a similar issue and discovered that my gridOptions.rowHeight value did not match the actual height of my rows (I had a checkbox element in each row that was pushing the height taller).
As it turns out, the AgGrid row renderer uses absolute pixel location to calculate which rows should be visible. So if your actual row heights result in the rows not being in the exact position they are expected to be in, the renderer will skip them.
Ironically, the positioning code uses actual position, so the rows that do get rendered are positioned as if the skipped rows are still there, resulting in the blank space described by the OP.