In my code I'm using four grids, I've set the row height in css like this:
.x-grid3-row td {line-height: 50px;}
and it sets the rows of all my grids.
So I need to set the height row of one of those grids.
Based on id or cls class you can specify the CSS for eaxch component individually. For example,if you have grid with id sample then code will be:
.sample .x-grid3-row td {line-height: 50px;}
Late answer, but another option is to use getRowClass on your viewConfig:
viewConfig: {
getRowClass: function (record, rowIndex, rp, store) {
rp.tstyle += 'height: 50px;';
}
}
Related
i'm using AG Grid Angular to create a log view, i will add a lot of entries per second to the grid, typically this type of view's has the newest entry at the bottom, so it would be great if there is a good way where the scrolling will stick at the bottom, so i can always see the latest entry. A bonus would be, if i can manually scroll up and the scrolling will stay at this position.
Here's one way to do it:
handle rowDataChanged in your markup:
<ag-grid-angular
class="ag-dark"
[rowData]="messages"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
(bodyScroll)="handleScroll($event)"
(rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>
In the handler for rowDataChanged, call ensureVisibleIndex to scroll to the last row added:
gridOptions: GridOptions = {
suppressScrollOnNewData: true,
}
handleRowDataChanged(event) {
const index = this.messages.length - 1;
this.gridOptions.api.ensureIndexVisible(index, 'bottom');
}
Demo:
https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom
In that code there is also some logic around when to keep the table scrolled to the end or not based on the scroll position.
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
How to create table with scroll overflow in Material UI v1 (v1-beta currently)? In component demos in MUI documentation there is no such example.
In all of the Table examples, there is a class applied to the div containing the Table that configures horizontal scrolling. It isn't apparent unless you're viewing the documentation with a sufficiently small viewport. (see BasicTable.js):
const styles = theme => ({
paper: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
});
The paper class is applied to the root element:
function BasicTable(props) {
const classes = props.classes;
return (
<Paper className={classes.paper}>
<Table>
...
If you want a vertical scroll, you'll need to specify a height and include considerations for overflow-y. If you want both horizontal and vertical scrolling, you can set overflow and both axes will be configured:
const styles = theme => ({
paper: {
height: 300,
width: '100%',
marginTop: theme.spacing.unit * 3,
overflow: 'auto',
},
});
Note: This will not fix your column headings, because it is applied to the container. This adjustment will apply scrollbars to the entire table - heading, body, footer, etc.
In order to have the table header fixed and scroll just the table body I've come up with this solution.
First I added to each of the table components the component="div" property in order to get rid of the table skeleton completely.
Then I've added to Table, TableHead, TableBody and TableCell the display: block rule to override the material rules.
TableRows will get display: flex.
TableBody will get the desired fixed (max-)height, plus overflow: auto.
Of course by using divs instead of table tags the header and body cells lose the table alignment. In my case I solved this by setting to the first cells a fixed width, same for the first cells in the header and the first cells in body (or you can go for percentages as well) plus a flex-shrink: 0.
The second cells got flex-grow: 1
Note: Material UI v1 used
Use the "stickyHeader" property on table such as <Table stickyHeader>...</Table>
From this link the author suggested:
table.setWidth("100%", true);
table.setColumnWidth(nameColumn, 35.0, Unit.PCT);
table.setColumnWidth(addressColumn, 65.0, Unit.PCT);
for CellTable column width to work, however in my project the nameColumn contain an extra long text, then this column will occupy almost all browser view, apparently the column width does not work, Could anybody shed some light on this?
The nameColumn defined as below:
TextColumn<Person> nameColumn = new TextColumn<Person>()
{
#Override
public String getValue( Person object )
{
return object.getUserName();
}
};
You can use following method to set custom style on the column cell:
nameColumn.setCellStyleNames("name-cell");
The following structure is generated(in DOM) for the cell:
<td class="xxxxxxxx xxxxxx name-cell">
<div style="outline:none;">Very long name ...</div>
</td>
So you have to define following css classes to set the wanted style and limit the cell and text size:
.name-cell {
...
}
.name-cell div {
...
}
Update
I tested the method table.setColumnWidth( and works well for me.
Here is how I do it:
Table constructed by UI binder
Create columns
Set table width
add columns to the table
set column width (with table.setColumnWidth )
When you calculate the cell width don't forget to take padding into account.
Used GWT 2.4
I am using GWT2.3 in my project.
I want to increase editableTextBox width when user click on editableTextCell.
Problem is My Column width is 200 Px. when user clicks on editableTextCell then that TextBox width is around 125px in EditableTextCell is less as compare to column width.
I added EditTextCell in Celltable's column
Column stringColumn = new Column(new EditTextCell()) {
// My Code
}
cellTable.addColumn(stringColumn, "MyColumn");
cellTable.setColumnWidth(checkBoxColumn, 200, Unit.PX);
I tried following way to increase TextBox width but problem is I cannot edit in textbox + focus not losses
#Override
public void onBrowserEvent(Context context, Element elem,Record object, NativeEvent event) {
String type = event.getType();
int editedTexBoxSize = (cellTable.getOffsetWidth()-100)/cellTable.getColumnCount();
if(elem.getInnerHTML().startsWith("<INPUT")){
String test = elem.getInnerHTML();
// test = <INPUT tabIndex=-1 value=P __eventBits="2048"></INPUT>
test= test.replace("value", " size="+editedTexBoxSize+" value");
// test = <INPUT tabIndex=-1 size=131 value=P __eventBits="2048"></INPUT>
elem.setInnerHTML(test);
}
super.onBrowserEvent(context, elem, object, event);
}
I want to Increase(set) TextBox width appear in EditTextCell is equal to column Width.
Any Solution ?
In my project I do that:
cellTable.getColumn(cellTable.getColumnIndex(column)).setCellStyleNames(CELL_CSS);
.edit-cell input {
width: 290px;
}
Finally the answer !
I tried this even simplier using UIBinder by adding :
.edit-cell input {
width: 30px;
text-align: right;
}
Then for the cell table I added
<c:CellTable
addStyleNames='{style.edit-cell}'
ui:field='itemTable' />
Wonderful !
You'll need to create a custom component. The out of the box EditTextCell does not allow you to set the size attribute of the input field, just the column width.
Have a look at the ValidateableInputCell impl here: In search of a GWT validation example... where art thou? for an example of how to craft a custom cell.
Admittedly the validation does not yet work but the ability to set the size on the input field within the cell does.