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.
Related
I am trying to render a set of footnotes at the end of my data set. Each footnote should be a full-width row. On the docs page for row height, it says that you can set an autoHeight property for the column you want to use to set the height. Full-width rows, however, aren't tied to any column, so I don't think there's a place to set that autoHeight property.
For reference, here is my cell renderer, which gets invoked if a flag in the data object is true.
import { Component } from '#angular/core';
import { ICellRendererComp, ICellRendererParams } from '#ag-grid-community/core';
#Component({
template: '',
})
export class FootnoteRendererComponent implements ICellRendererComp {
cellContent: HTMLElement;
init?(params: ICellRendererParams): void {
this.cellContent = document.createElement('div');
this.cellContent.innerHTML = params.data.title;
this.cellContent.setAttribute('class', 'footnote');
}
getGui(): HTMLElement {
return this.cellContent;
}
refresh(): boolean {
return false;
}
}
The footnote (the "title" property above) could be one line or several depending on its length and the browser's window size. There may also be several footnotes. Is there a way to set autoHeight for each footnote row? Thanks for any help!
Not sure of CSS autoHeight can be use, but here is some example for calculating height dynamically. Take a look to getRowHeight function, it's works for any rows (full-width too):
public getRowHeight: (
params: RowHeightParams
) => number | undefined | null = function (params) {
if (params.node && params.node.detail) {
var offset = 80;
var allDetailRowHeight =
params.data.callRecords.length *
params.api.getSizesForCurrentTheme().rowHeight;
var gridSizes = params.api.getSizesForCurrentTheme();
return (
allDetailRowHeight +
((gridSizes && gridSizes.headerHeight) || 0) +
offset
);
}
};
Here is the solution I ended up with, though I like #LennyLip's answer as well. It uses some ideas from Text Wrapping in ag-Grid Column Headers & Cells.
There were two parts to the problem - 1) calculating the height, and 2) knowing when to calculate the height.
1) Calculating the Height
I updated the footnote's Cell Renderer to add an ID to each footnote text node, and used it in the function below.
const footnoteRowHeightSetter = function(params): void {
const footnoteCells = document.querySelectorAll('.footnote .footnote-text');
const footnoteRowNodes = [];
params.api.forEachNode(row => {
if (row.data.dataType === 'footnote') { // Test to see if it's a footnote
footnoteRowNodes.push(row);
}
});
if (footnoteCells.length > 0 && footnoteRowNodes.length > 0) {
footnoteRowNodes.forEach(rowNode => {
const cellId = 'footnote_' + rowNode.data.id;
const cell = _.find(footnoteCells, node => node.id === cellId);
const height = cell.clientHeight;
rowNode.setRowHeight(height);
});
params.api.onRowHeightChanged();
}
};
To summarize, the function gets all HTML nodes in the DOM that are footnote text nodes. It then gets all of the table's row nodes that are footnotes. It goes through those row nodes, matching each up with its DOM text. It uses the clientHeight property of the text node and sets the row node height to that value. Finally, it calls the api.onRowHeightChanged() function to let the table know it should reposition and draw the rows.
Knowing when to calculate the height
When I set the gridOptions.getRowHeight property to the function above, it didn't work. When the function fires, the footnote rows hadn't yet been rendered, so it was unable to get the clientHeight for the text nodes since they didn't exist.
Instead, I triggered the function using these event handlers in gridOptions.
onFirstDataRendered: footnoteRowHeightSetter,
onBodyScrollEnd: footnoteRowHeightSetter,
onGridSizeChanged: footnoteRowHeightSetter,
onFirstDataRendered covers the case where footnotes are on screen when the grid first renders (short table).
onBodyScrollEnd covers the case where footnotes aren't on screen at first but the user scrolls to see them.
onGridSizeChanged covers the case of grid resizing that alters the wrapping and height of the footnote text.
This is what worked for me. I like #LennyLip's answer and looking more into it before I select an answer.
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();
};
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 need to use a text-box (multiline) in my application. It need to grow as the user inputs text into it. I want that textbox to grow without any scrollbars. I tried allow=resize:null but it just prevents textbox from being stretched.All i want is a textbox as we see in facebook comment /share area which grows simply without any scrollbars on sides. I hope i have neatly explained it.
You can use something like this: (Source: Expandable or Auto-Resize TextBox Height by Colt Kwong)
<asp:TextBox ID="txtMsg" runat="server" TextMode="MultiLine"
style="overflow:hidden" onkeyup="AutoExpand(this, event)" Rows="2" />
using this javascript:
function AutoExpand(txtBox, event)
{
if (event.keyCode == "13" || event.keyCode == "8") {
var therows = 0
var thetext = document.getElementById(txtBox.id).value;
var newtext = thetext.split("\n");
therows += newtext.length
document.getElementById(txtBox.id).rows = therows;
return false;
}
}
Or if you like jquery you should take a look at the jQuery autoResize Plugin.
A plugin for jQuery which changes the dimensions of input elements to
suit the amount of data entered. It operates on textarea,
input[type=text] and input[type=password] elements.
Usage is as follows:
$('textarea#foo').autoResize();
You can pass options:
$('textarea#foo').autoResize({
maxHeight: 200,
minHeight: 100
});
Does anybody know how to make a CellList oriented horizontally? If possible, please with UiBinder, but this is not necessary.
Following Thomas Broyer's suggestion on the google-web-toolkit group, and How to style GWT CellList?, we can inject a new CSS resource into the CellList constructor.
The CSS for getting the horizonltal formatting MyCellList.css:
/* This file is based on the CSS for a GWT CellList:
* https://gwt.googlesource.com/gwt/+/master/./user/src/com/google/gwt/user/cellview/client/CellList.css
* The primary purpose is to arrange for the <div> elements that contain each cell to be laid out inline (horizontally).
*/
/* Using inline-block, following Thomas Broyer's recommendations (with link to justification) here:
* https://groups.google.com/forum/#!topic/google-web-toolkit/rPfCO5H91Rk
*/
.cellListEvenItem {
display: inline-block;
padding: 5px;
}
.cellListOddItem {
display: inline-block;
padding: 5px;
}
Define a new Resource like this:
public interface MyCellListResource extends CellList.Resources {
public static MyCellListResource INSTANCE = GWT.create(MyCellListResource.class);
interface MyCellListStyle extends CellList.Style {}
#Override
#Source({CellList.Style.DEFAULT_CSS, "MyCellList.css"})
MyCellListStyle cellListStyle();
}
Inject the new style, and pass it CellList's constructor:
MyCellListResource.INSTANCE.cellListStyle().ensureInjected();
CellList<Fare> cellList = new CellList<Fare>(cell, MyCellListResource.INSTANCE);
Note that the new style appears in the cascade after the DEFAULT style for CellList, so you need only put the modifications you require into your MyCellList.css.
Try to override the CellList.renderRowValues method. You have to be able to create a horizontal presentation template.
There is a lot of logic in that method I didn't want to reproduce, but my hacky solution of just replacing all div's with span's worked:
public class HorizontalCellList<T> extends CellList<T> {
public HorizontalCellList(Cell<T> cell) {
super(cell);
}
#Override
protected void renderRowValues(
SafeHtmlBuilder sb, List<T> values, int start, SelectionModel<? super T> selectionModel) {
SafeHtmlBuilder filteredSB = new SafeHtmlBuilder();
super.renderRowValues(filteredSB, values, start, selectionModel);
SafeHtml safeHtml = filteredSB.toSafeHtml();
String filtered = safeHtml.asString().replaceAll("<div", "<span").replaceAll("div>","span>");
sb.append(SafeHtmlUtils.fromTrustedString(filtered));
}
}
A variant with CSS - set CSS class name on you cell list
CellList<T> list = new CellList<T>(...);
list.addStyleName('myList');
then apply CSS rule to the cells to make them align horizontally:
.myList > div > div > div {
display: inline;
}
I'm able to solve this by extending CellList and creating my own template + overriding the renderRowValues method. Simply changing divs into spans didn't do the trick for me maybe it was because I have custom cells (each cell is rendered as table). Adding display:inline on the CSS didn't work for me also.
My template code is pretty much the same as the original except I added the "float:left;" style:
interface Template extends SafeHtmlTemplates {
#Template("<div onclick=\"\" __idx=\"{0}\" style=\"float:left;\">{1}</div>")
SafeHtml span(int idx, SafeHtml cellContents); ...
Here's a snippet of my renderRowValue method:
int length = values.size();
int end = start + length;
for (int i = start; i < end; i++) {
SingleKeyValueModel value = values.get(i - start);
//super.renderRowValues(sb, values, start, selectionModel);
SafeHtmlBuilder cellBuilder = new SafeHtmlBuilder();
Context context = new Context(i, 0, getValueKey(value));
cell.render(context, value, cellBuilder);
sb.append(TEMPLATE.span(i, cellBuilder.toSafeHtml()));
}