I am using Ag Grid with React. I have a page with a dropdown which renders different tables according to the dropdown choice.
Some columns of these tables have content that overflows their width. To deal with this, I have a custom tooltip implemented, which displays the full text content on hover.
The issue is that since I have multiple tables inside a single page, the column widths of my target columns keep changing. I want to pass the column width of the target column as props to cell renderer component in colDef so that I can compare the columnWidth and the text scrollWidth to decide if the text overflows. Let me know any leads for this.
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.
I am using sap.ui.table.Table. This table has some very good feature but I am having a tough time to figure out how to set the column to auto width.
Currently, all the columns are fixed size but I want something if column A value is small, then auto adjust it rather than having fixed size. Same for if the column value is large, then adjust it to show the value.
I saw the other question sap.ui.table.Table how to optimize column widths but the answers there are to get column layout with fixed sizes, not auto width.
The control sap.ui.table.Column offers a property called autoResizable by which the user can resize the column width depending on the content of the column's template.
<Column
autoResizable="true"
...
From API Reference:
Enables auto-resizing of the column on double clicking the resize bar. The width is determined on the widest currently displayed content. It does not consider rows which are currently not scrolled into view.
However, as you can see, it requires user interaction. Doing it without user interaction programmatically can be achieved by using the (currently experimental) API autoResizeColumn from sap.ui.table.Table.
myTable.autoResizeColumn(/*ColumnIndex*/); // experimental!
Here is an example of both approaches: https://embed.plnkr.co/NQpkJo/.
I have a structure like bellow which consist of one static text and two text fields. The text fields should expand relative to their content. I need to adjust them in a way that these three elements expand together. Should I keep them in one band? What should be the stretch type for each?
Put all three elements in a band.
Set the Stretch Type of Static Text to Relative To Band Height.
Set the same for text field 1.
Set the same for text field 2 and additionally set Position Type to Float.
I have a JasperReport file with the basic header/detail/footer bands. In my Details, I have a Column Header row in a Grid Layout and a Detail Row, also in a GridLayout. I'm having a few issues with this Detail section. I have 3 columns that I'm hiding with an expression using printWhenExpression=$P{Exp1}. This works to hide the field, but the rest of the columns in the detail section don't adjust to this. So I'm left with a giant blank column in the middle of my detail section.
I'm coming from Crystal Reports where I could just suppress fields and the CR would adjust widths as necessary. I can't seem to find anything to do the same with JasperReports, which doesn't make much sense since I would expect a GridLayout to try and fill up the space as needed. So is there any way to have a table/grid like layout that will adjust column widths to fill the available space when a field is hidden.
I want to create a form similar to this one.
In particular, I want to learn how to put different sized input boxes on the same line with vertically aligned labels underneath. For instance, in the "Name" section of the form, it has a box for "first" and "last."
How can you do this with HTML and CSS?
You sample form contains SPAN elements with display property set to inline-block, and the INPUT and LABEL elements each have a display property value of block, with a fixed size. That way, you are basically creating cells to contain your elements and their labels.
The same thing could be achieved using TABLE/TR/TD combination, though it would be a little old-fashioned, and thus not recommended.