When font size is big, auto-sizing (no matter in what way) trims the column data.
I tried it on plnkr.com link referred from: https://www.ag-grid.com/javascript-grid-resizing/#
I styled the rows to have 20px font size and since then the autosizing doesn't work properly.
see in the image, country & date columns are cut in the middle after "Aut-Size all" and after double click to autosize a single column.
plnkr sample
any ideas?
thanks
You can fix this by applying your bigfont class via cellClass instead:
https://plnkr.co/edit/qzwOYqN6ybXJns0xDvqy?p=preview
var gridOptions = {
defaultColDef: {
resizable: true,
cellClass: 'bigfont',
},
columnDefs: columnDefs,
rowData: null,
//rowClass: 'bigfont',
onColumnResized: function(params) {
console.log(params);
}
};
This is happening because to work out the width of a cell, ag-grid clones it. The cloned cell doesn't have some of the parent DOM structure, such as a row with your specified rowClass.
It's a marginal bug in ag-grid.
Related to this, on GitHub:
https://github.com/ag-grid/ag-grid/issues/2731
https://github.com/ag-grid/ag-grid/pull/915
Related
Is it possible to change the style of a column based on whether it's pinned or not?
I'm able to change the style based on the value while the table is rendered for the first time. What I'm trying to do is change the style when the column is pinned using the mouse (drag and pin).
I'm able to figure out which column has been pinned by firing the ColumnPinnedEvent in gridOptions. I tried modifying the cellClass of the column obtained from 'event.column' but it does not get reflected on the table.
onColumnPinned(event: ColumnPinnedEvent) {
const column = event.column;
if (column) {
const columnDef = column.getColDef();
const userProvidedColDef = columnDef;
userProvidedColDef.cellStyle = event.pinned ? { color: 'white', backgroundColor: 'black' } : {};
column.setColDef(columnDef, userProvidedColDef);
}
}
You can achieve the same by just with the CSS.
Have a look at the plunk I've created: Column Pinning and styling. Add or remove any column to see the styles updated for it.
.ag-body-viewport .ag-pinned-left-cols-container .ag-row {
background-color: yellow;
}
Here .ag-body-viewport .ag-pinned-left-cols-container hierarchy is important. Just using .ag-pinned-left-cols-container .ag-row will not work as some row levels' styling of ag-grid will overwrite it.
So far this information is enough to solve your challenge, let me know in addition to this, you have some more details to provide.
This question is related to Ag-Grid row height on Angular 4 Project. Please see the below scenario:-
I have an Ag-Gird having 3 columns respectively:-
Id (resizable column from UI)
Name (resizable column from UI)
Address (resizable column from UI)
I do not have any limitations( like the limited number of character or words is allowed) on Address column. Users can type any number of characters or words they want to.
Issues:-
How to increase the row height, when Address column width is completely filled-up with words or when users press Enter or Shift + Enter?
How to adjust height automatically when users resize the Address column?
Please help me with these issues.
Thanks
There are multiple things to be taken care.
Have a look at the updated Stackblitz
Have cellClass: "cell-wrap-text" attribute in the ColDef for Address column and have the appropriate CSS
Handle columnResized event so that this.gridApi.resetRowHeights() can be called to adjust the height of the rows whenever the column is resized
Also handle cellEditingStopped event, so that when the data for the column is updated, the row height also gets updated accordingly.
onColumnResized() {
this.gridApi.resetRowHeights();
}
onCellEditingStopped() {
this.onColumnResized();
}
Provide autoHeight: true property in the defaultColDef
defaultColDef = { autoHeight: true };
Update:
provide cellEditor: 'agLargeTextCellEditor' if you want to have textarea like control for this field.
Check this StackBlitz
I was facing the same issue in react I wanted to increase the height of row according to the content of the text area and on enter it should go to next line in text area instead of not turning into read only, so what I did i used the suppressKeyboardEvent of ag-grid and wrote the code into it, here is my code
cellClass: "description-cell",
width: 200,
cellRendererFramework: (params) =>{
return <pre> {params.data.description}</pre>
},
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: (params) => {
return {
maxLength: '1000',
cols: this.props.cols,
rows: 2
}
},
suppressKeyboardEvent: (params) => {
const KEY_ENTER = 13;
const keyCode = params.event.keyCode;
const gridShouldDoNothing = params.event.target.value && params.editing && keyCode === KEY_ENTER;
params.event.target.style.height = 'inherit';
params.event.target.style.height = `${params.event.target.scrollHeight}px`;
params.node.setRowHeight(params.event.target.scrollHeight); // adjust it according to your requirement
this.gridApi && this.gridApi.onRowHeightChanged();
return gridShouldDoNothing;
}
I hope this could help you or someone who is looking for it :)
What helped me was to call redrawRows()
Typescript + React example:
const onCellEditingStopped = (event: CellEditingStoppedEvent<any>) => {
event.api.redrawRows();
};
The ag-grid popupParent documentation/plunker talks about setting popupParent so that context menus have room to display:
var gridOptions = {
columnDefs: [{field: 'num', headerName:'A'}]
rowData: [{num:'1'},{num:'2'},{num:'3'],
popupParent: document.querySelector("body")
};
This affects contextMenu items and columnMenu items, but it does not appear to affect toolPanel. In this plunker, you can see the issue I am having.
Is there another gridOption I should be using to fix this?
I can't find this anywhere. In a sap.ui.table.Table control is it possible to tell it to resize all column widths so that their contents are fully visible? I don't see any property/method either on the table or column instances.
Is it not supported?
Many thanks.
You can use autoResizeColumn(colIndex) method
Option 1: setting fixed sizes of columns
var oTable = new sap.ui.table.Table({
width : "100%",
selectionMode : sap.ui.table.SelectionMode.None,
enableColumnFreeze : true,
});
oTable.addColumn(new sap.ui.table.Column({
template : new sap.ui.commons.TextView({
text : "{Title}",
wrapping : true,
textAlign : sap.ui.core.TextAlign.Begin,
}),
enableColumnFreeze : true,
width : '350px', // also possible in % -> e.g. in ur case '100%'
}));
Option 2: resizable, but showing full column width, I would try to use these properties
width : sap.ui.core.CSSSize
flexible : boolean (default: true)
resizable : boolean (default: true)
like this
oTable.addColumn(new sap.ui.table.Column({
template : new sap.ui.commons.TextView({
text : "{Title}",
wrapping : true,
textAlign : sap.ui.core.TextAlign.Begin,
}),
width : '100%',
resizable : false,
flexible : false,
}));
I think its a challenge, I also made it via fixed sizes .. eventually you can define fixed sizes depending on the screen size .. hope to help you.
I tried several ways but none was really working on 1.52.23 so I analyzed the way auto-resize is working on the double-click on the column separator. And found the hidden treasure: sap.ui.table.TablePointerExtension
This code does the trick for me:
var oTpc = new sap.ui.table.TablePointerExtension(oTable);
var aColumns = oTable.getColumns();
for (var i = 0; i < aColumns.length; i++) {
oTpc.doAutoResizeColumn(i);
}
This works for me:
my colums are:
flexible: true,
resizable: true,
autoResizable: true,
width : 'auto'
$($.find('.sapUiTableColRsz')).trigger("click");
For me, I need to do the call to "autoResizeColumn" after the data is received. You can attach to the binding dataReceived event
While facing the same issue, I found the solution in the sap.m.Table control. Using the "fixed layout" option (set value to false, see documentation attached), you can force the columns/cells to resize according to its content (same effect like in ALV grid controls). The feature is described very well in the API reference: sap.m.Table / setFixedLayout
var oTable = new sap.m.Table({
fixedLayout: false
});
Defines the algorithm to be used to layout the table cells, rows, and columns. By default, a table is rendered with fixed layout algorithm. This means the horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells. Cells in subsequent rows do not affect column widths. This allows a browser to layout the table faster than the auto table layout since the browser can begin to display the table once the first row has been analyzed.
When this property is set to false, sap.m.Table is rendered with auto layout algorithm. This means, the width of the table and its cells depends on the contents of the cells. The column width is set by the widest unbreakable content inside the cells. This can make the rendering slow, since the browser needs to read through all the content in the table before determining the final layout. Note: Since sap.m.Table does not have its own scrollbars, setting fixedLayout to false can force the table to overflow, which may cause visual problems. It is suggested to use this property when a table has a few columns in wide screens or within the horizontal scroll container (e.g sap.m.Dialog) to handle overflow. In auto layout mode the width property of sap.m.Column is taken into account as a minimum width.
I'm having trouble setting the number of rows for a table to automagically fill the available estate of its encapsulating container.
According to the API, setting the visibleRowCountMode property to sap.ui.table.VisibleRowCountMode.Auto should render the table to
"[...] automatically fills the height of the surrounding container.
The visibleRowCount property is automatically changed accordingly. All
rows need the same height, otherwise the auto mode doesn't always work
as expected."
I have used the following code:
var oTable = new sap.ui.table.Table( {
rowHeight : 30,
height : "100%",
// The below property is seemingly ignored... What did I do wrong?
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto
});
...but as you can see in this jsbin example http://jsbin.com/vazuz/1/edit it just shows the default 10 rows, and certainly doesn't "change the visibleRowCount property accordingly" :-(
Anyone has a solution?
Thanks in advance!
=====================
EDIT: Thanks to #matz3's answer below, I was ultimately able to solve this issue.
Setting the surrounding container DIV to 100%, this seems to be ignored. Setting it to a fixed height, however, worked just fine. But what I really wanted, if a user resized the window, the number of available rows needs to be adjusted accordingly. Setting it to a fixed height is therefor not an option...
However, the trick was in some extra CSS: not only the DIV needed to be set to 100% height, also both BODY and HTML (!!) needed to have a height set to 100%:
html, body {
height: 100%
}
div#uiArea {
height: 100%
}
Now, the table spans the full height of the available viewport, and resizing the window adjusts the table rather nicely. See the final working solution here: http://jsbin.com/bosusuya/3/edit
Matz3, thanks for your help!
CSS hacks is a dirty way. In my application I use to bind visibleRowCount to Array.length
For example, if you have model with this data:
[{firstName: 'John', lastName: 'Smith',
{firstName: 'David', lastName: 'Ericsson'}]
You can bind to Array property length like this:
var oTable = new sap.ui.table.Table({
visibleRowCount : '{/length}'
})
[...] automatically fills the height of the surrounding container [...]
Your surrounding container is the view, so you have to set the height of it also to a value (e.g. 100%)
this.setHeight("100%");
And your view will be set into the uiArea-div, so this one also needs a height (e.g. 500px)
<div id="uiArea" style="height:500px"></div>
With these changes it now works as expected
I'm with the same issue. I "resolve" that in this manner. This is not perfect, but it's better than UI5 resizing...
_resizeTableRow: function () {
var oTable = this.getView().byId("referenceTabId");
var sTop = $('#' + oTable.getId()).offset().top;
var sHeight = $(document).height();
//if there a row, you can take the row Height
//var iRowHeight = $(oTable.getAggregation("rows")[0].getDomRef()).height();
var iRowHeight = 40;
var iRows = Math.trunc((sHeight - sTop ) / iRowHeight);
oTable.setVisibleRowCount(iRows);
},
Other option is to put the Table in sap.ui.layout.Splitter: