I am using a Gwt DataGrid with multiple Columns. The default behavior of the columns is to wordwrap. I would like for one of the columns to not wordwrap and just cut off. Is this possible?
For example, currently this is displayed:
I am making a
sandwich
I would like it to display:
I am making a
In addition to overflow:hidden you may need white-space:nowrap and finally add a text-overflow: ellipsis so there is an indicator to the user that the incomplete text is being shown.
You can set overflow: hidden in the style of each Column.
You can use DataGrid.addColumnStyleName to set styles on individual columns, or just addStyleName to add a style to the whole widget.
Related
I'm trying to manipulate the style of a data-table being used with ag-grid plugin. The background colour of each row seems to cut off before the end of the table when it's inside of a CSS overflow parent. What can I do to avoid that cut off so that everything is in colour?
I had the same issue and solved it by
using overflow: auto on ag-body-viewport class and remove width: 100% on the .ag-body-container{} class, in case you have that.
I'm new to GWT and trying to understand it, but have encountered with a problem. When I try to add column style to the specified column in the table
table.getColumnFormatter().addStyleName(column, "columnStyle");
it doesn't take effect, but when I apply this style to each cell in the column
table.getCellFormatter().addStyleName(row, column, "columnStyle");
it works fine. Why I can not apply the style to the whole column?
It's possible that you're adding unsupported CSS elements to <col>, it only accepts backgrounds, width and borders CSS properties, whereas a <td> can accept many more.
I have a problem with DataGrid in gwt 2.4. I made table with CellTable, and everything worked fine. But I needed fixed header, and then just replaced CellTable with DataGrid. I had problem with .css file, but than has been resolved.
Now, the problem is that every column have fixed width, and table put every row just in visible part of screen.
This is new and old screen shots, to make things more clear :)
http://img832.imageshack.us/img832/5026/oldscreenshot.jpg
http://img834.imageshack.us/img834/1489/newscreenshot.jpg
Can someone help to make old looking, but with fixed header.
You can set a fixed width for each column of the data grid:
dataGrid.setColumnWidth(sampleColumn, 40, Unit.PX);
and expand the total data grid width:
dataGrid.setWidth("100%"); // choose the most useful in your app
dataGrid.setWidth("1400px");
I'm not sure what the right answer is, but I don't think the previous responders understood the question.
Basically, you want dataGrid to use "table-layout: auto" instead of "fixed". This is what cellTable does. Table columns are auto-sized based on content.
This is easy for the content table, but to get the header-freeze, dataGrid is using a separate div/table for the header. Therefore, the header table's columns need to be explicitly sized based on the data table. They also need to be resized anytime the table changes (browser resizes, etc.). I plan on adding resizeable cols on a dataGrid, so I'll be hitting this same challenge soon I expect and will update when I have something more explicit if anyone is still tracking this thread...
need to wrap your content in your td with an inner div. and make sure the overflow-x is set to hidden.
table {
overflow: hidden;
white-space: nowrap;
table-layout: fixed;
}
td div{
overflow-x:hidden;
}
In GWT, I am using CellTable.
When you mouse over the CellTable it highlights each row.
How do change the behavior of the highlighting from the mouse over? Specifically:
change the color of highlighting
disable/enable
make it highlight only the specific grid item at your cursor (instead of the entire row)
( The current hack I have is to create a bunch of 1 column wide CellTables and add them to a VerticalPanel layout... creating the illusion that there is one CellTable and it highlights each grid according to your cursor. Is this bad? Why? performance? )
You will notice the CellTable uses a ResourceBundle, which means all the css styles get obfuscated ... this makes it more difficult to override styles.
The CellTable constructor will actually allow you to override the default ResourceBundle. So first, you need to create your own resource bundle like this:
public interface CellTableResources extends Resources {
public CellTableResources INSTANCE =
GWT.create(CellTableResources.class);
/**
* The styles used in this widget.
*/
#Source("CellTable.css")
CellTable.Style cellTableStyle();
}
Then you need to create your own CSS file. I recommend copying the CellTable style directly into your project and use that as a starting point. You can find it here:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/cellview/client/CellTable.css
Make sure the style is injected first, and then you just feed it into the CellTable's constructor like this:
CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);
Specifically, you'll want to tweak these styles:
cellTableKeyboardSelectedRow
cellTableKeyboardSelectedRowCell
cellTableSelectedRow
cellTableSelectedRowCell
cellTableKeyboardSelectedCell
It is important to note that the cell table differentiates between the 'selected row' and the 'keyboard selected row'. The selected row is the actual row selected (ie via SelectionModel). The keyboard selected row refers to what is highlighted when the user is pressing the up / down key, but does not mean the row is actually selected (if that makes sense).
I'll just add for number 2) on your list, you can simply do
cellList.setSkipRowHoverStyleUpdate(true)
That completely disables highlighting. There are also two more setSkip-functions on CellList related to hovering.
CellTable can be styled via CSS: How do I style a gwt 2.1 CellTables headers?
To disable highlighting just set the hover CSS property to nothing.
Possibly - try tweaking the .cellTableSelectedRow and .cellTableSelectedRowCell.
Here is the original CellTable.css: http://www.google.com/codesearch/p?hl=en#A1edwVHBClQ/user/src/com/google/gwt/user/cellview/client/CellTable.css&q=cellTableLastColumn&d=8
Is there a way to change the space between a spark form item and its content(textinput, conbobox)? I already set to 0 the "gap" property of the form, but still there is a lot of vertical space left between the form inputs.
Set the gap to -14 to get no gap between the items
<s:Form>
<s:layout>
<s:FormLayout gap="-14"/>
</s:layout>
<s:FormItem .....>
</s:Form>
The spark skin for formItem has left/right variables set based on "columns." I.e. left="column1:10" means the element is 10 pixels to the right of column 1.
So, create the skin, reduce those numbers in the "content" column area and check it.
Reducing all those numbers and the gap should tighten, along with setting the gap in form layout.
If you want to change the vertical gap between each Spark Form Item, create a custom skin based on FormSkin and change the gap property FormLayout.
If you want to change the horizontal gap between skin parts (labelDisplay, indicatorDisplay, helpContentGroup, ...), you need to create a custom skin based on FormItemSkin and change the ConstraintColumn values
I changed in my custom FormItem skin as followed, and it worked for me:
before:
<s:ConstraintRow id="row1" baseline="maxAscent:10" height="100%"/>
after:
<s:ConstraintRow id="row1" baseline="maxAscent:0" height="100%"/>
There are no paddingLeft, paddingRight etc. properties in FormItemLayout yet.