For unbalanced groups in Ag-Grid, how can I move all ungrouped rows to the bottom of the grid?
https://www.ag-grid.com/archive/27.0.0/react-data-grid/grouping-unbalanced-groups/
after I added new empty row, it always shows at the top of the grid.
Related
I am wondering if there is a way to effectively lock a column in Ag-Grid so that the column is always the very last column no matter what.
Background
What I am ultimately looking for is to avoid the blank space after the last column if the grid size is wider than all column width combined. This is to give the grid a consistent, professional look especially considering even/odd rows are rendered usually in different color. I would prefer the blank space also has that alternating background color.
Given there seems to be no grid property that forces the grid to render the blank space at the end as a pseudo column, I am therefore considering to add a pseudo column manually in such a way that:
the pseudo column has no header
the pseudo column has no data
the pseudo column is not sortable (achieved via sortable: false)
the pseudo column is not manually resizable (achieved via resizable: false)
the pseudo column is the only column which has suppressSizeToFit: false
lock the pseudo column to always be the last column so that user cannot drag a column to the right side of it
I've found a way to achieve everything apart from the last item in the above list. I know I can suppressMovable: true but that only ensures the column itself is not draggable, it does not prevent user from dragging a column to the right side of it.
Effectively, I am looking for something similar to lockPosition but instead of locking the column to the front I want to lock the column to the end.
Keep an eye on currently open AG-3326 issue in ag-grid backlog https://www.ag-grid.com/ag-grid-pipeline/
"Allow locking ( lockPosition ) a column to always be either the first or last columns (currently only the first column is supported)"
What I am ultimately looking for is to avoid the blank space after the last column if the grid size is wider than all column width combined
You could use sizeColumnsToFit() API for columns to adjust in size to fit the grid horizontally. Using this API, there won't be any blank space after the last column, but make sure you have not specified the width for at least one column. This is the column that will expand/shrink to fit the size of the grid.
Call sizeColumnsToFit() after the gridReady event has fired.
Here is an effective workaround to lock the right-most column until AG-3326 is implemented.
onColumnMoved: params => {
const columnCount = params.columnApi.getAllColumns().filter(c => c.isVisible()).length;
const maxIndex = columnCount - 2;
if(params.toIndex > maxIndex) {
params.columnApi.moveColumnByIndex(params.toIndex, maxIndex);
}
}
Any column that is moved to the right of the 'locked' column is immediately moved to the left of the 'locked' column.
Is it possible to set a certain width for my pinned columns section. In my application the use will have up to freeze columns and 20 unpinned columns. It gets tedious to scroll to the unpinned columns every time. Instead I want a scroll for my pinned columns with the section defined to certain width.
I'm wondering how well I can use GWT (or smart GWT) to build something like:
where I have:
A celltree in the first column that has a scrollbar at the bottom.
for each element in the tree, there are columnns 2 and 3 as shown, and columns 2 and 3 stay vertically lined up with the top.
This means if the celltree is deeply nested, the user would have to scroll it at the bottom, which is fine. I need the vertical columns to stay aligned.
Put a CellTree and a DataGrid side by side in a HorizontalPanel or LayoutPanel. Add a selection handler to a tree which refreshes the content of a DataGrid. If you set the same row height in a DataGrid as the height of a TreeItem, and prevent both from wrapping, they would align nicely.
You can even add a background to your CellTree items to match the DataGrid even/odd row backgrounds, but you will have to do it in code after every selection event on a non-leaf item in a CellTree.
In my table I have repeating value.
I have put isPrintRepeatedValues=false to avoid the repeat values. It was success but I found that the left border is missing for the left cell in a row.
How to make to cover his line for a repeat row only?
The result would be as at the picture (highlighting area) below:
The new DataGrid widget in GWT 2.4 automatically generates a horizontal scroll bar when the display viewport for the table is not as wide as the table itself, and a vertical scrollbar for the vertical case. Fine so far. But I have found that the scrollbar obscures the last row of the table. There is no filler space after the last row to allow you to vertically scroll a bit farther to let the last row completely enter the viewing space. That filler bar ought to be at least as tall as the scrollbar, and preferably a bit taller.
Any ideas for a work-around? I don't want to add empty data rows since these represents real rows in a real database.
I just noticed that if you select a row (even with NoSelectionModel, there is a "select" where the row turns pale yellow), then tap the up and down arrows on the keyboard, the DataGrid rolls up and down, including pulling any rows obscured by the header or footer or horizontal scrollbar entirely into view.
Good to know. Will have to train the users on that little trick.