Is it possible to hide a complete cell of a Grid Panel in java GWT?
Now I explain my question in detail:
I have a grid with some labels and textboxes, I want to hide the middle label and textbox, but when I set the visible property as false , it hides the 2 objects but it leaves the space between the 2 rows. How can I do to set those objects visible and the other objects to move up so there is no blank space between the two rows?
GWT Design View
http://s11.postimg.org/jc05zgjkj/gwt_grid_01.png
lblName.setVisible(false);
txtbxName.setVisible(false);
View after apply the visible property to false
http://s15.postimg.org/dnkd2927v/gwt_grid_02.png
Thanks a lot for your help
To hide the whole row you can use:
grid.getRowFormatter().setVisible(rowIndex, false);
Hope you need to hide element from DOM:
Can be done by changing row elements Display property.
Sample Code *
Grid g = new Grid();
int rowNumberToHideFromDom;
g.getRowFormatter().getElement(rowNumberToHideFromDom).getStyle().setDisplay(Display.NONE);
Have a look at the HTML table generated in the browser by your GWT code (preferably when visible is set to false). You may see something like this:
<tbody>
<!-- ... -->
<tr> <!-- hidden row -->
<td><!-- hidden widget --></td>
<td><!-- hidden widget --></td>
<td></td> <!-- The single space within the td element bears importance! -->
</tr>
<!-- ... -->
</tbody>
That empty space is padded because the hidden row still contains one or more td elements that have some whitespace content.
This is caused by the Grid widget's implementation of "empty" cells: when you do not set any content to a Grid's cell, or clear out previously set content, the implementation practically insterts a non-breaking space (nbsp) into that cell. (Have a look at the Grid source: addRows(), clearCell() and createCell().)
This default behaviour can be tricked by setting the innerHTML of the empty cells manually to an empty string:
grid.setHTML(2, 3, "");
Also, I guess that the grid.removeRow(row) workaround mentioned in united's comment may also work, although removing the whole row is a bit more radical If you intend to show the hidden row again, you better stick to solving this by setting empty strings into empty cells.
Related
I'm working on automation tool which uses fitnesse tool to get the data and compare. My table has all the data and i've the fixture to take that data and process and return the results. If the case is pass i show just pass but if the case is failed, i've to show more information in the table cell. I want to show the failure content in the expand and collapse view. Can i add expand and collapse view in a cell of a table in fitnesse? I tried to add but the wiki markup syntax is getting disturbed if i add or the expand / collapse view is coming out of table and showing separately. Can i include the expand / collapse view in the table cell?
Thanks in advance.
You can put a collapsible section inside a cell using the "nesting" markup: !( and )!
Example:
|cell|!(nested
!*> collapsible
line
line
line
*!
content)!|cell|
I have two widgets, placed into container. This looks like a mainScreenWidget and footerWidget. Together they should be spread through the all space.
Imagine the size of footerWidget changes due to changing its contents. This event should be propagated to main widget because it has some complicated calculations based on size.
A question is: how can I do it?
<container>
<mainWidget/> - its needs two know about footers size: the two widgets should be spread all over the container
<footerWidget/> - its size can be changed: second line can be added etc
</container>
In my case widgets are stored in a div-based table, buts thats not the case:
<div style="display:table">
<div style="display:table-row"><div style="display:table-cell" class="mainWidget">...
<div style="display:table-row"><div style="display:table-cell" class="footerWidget">...
</div>
You have many options:
Use LayoutPanel with two layers - one for main widget, one for footer widget.
Use CSS. For example, you can position your footer absolutely and let the browser resize the main widget.
I'd like to display informations about a book in a CellTable in GWT. For example its content.
How can i create a TextColumn that displays that much text. Multiple lines or a scrollbar is what i'm looking for.
Thanks in advance
If your content is plain text, you can put it in TextColumn. It will wrap within a cell, unless some CSS prevents wrapping.
If you want to set a limit on how high a cell can be, add a CSS rule to this table:
.myTable tr {
max-height: 100px;
}
If you have formatted text, you will need to create your own Cell by extending AbstractCell:
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCustomCells
I have an extrange case with JMesa..
When I'm doing tests without a form element as parent (to apply filters and pages) JMesa table is rendered.
But when I put the Jmesa element as form's child, the style disappears and is rendered as a basic table without colors or borders ._.
<fieldset>
<s:form action="listUsers">
<jmesa:tableModel id="test" items="${users}" var="bean">
<jmesa:htmlTable caption="${pageScope.caption}" width="100%">
<jmesa:htmlRow>
... Rows ....
</jmesa:htmlRow>
</jmesa:htmlTable>
</jmesa:tableModel>
</s:form>
</fieldset>
On head tags I have the css refered and jmesa/jquery.jmesa ..
Since the table renders with correct styles when not wrapped in a form tag but renders with no styling when it is inserted into the body of a form tag, my first thought is that there is a style somewhere at the form tag level that is causing the table styles to be lost or overridden. Another possibility is that if your CSS Selectors are configured with very specific parent/child relationships, the introduction of another tag could conceivably prevent styles from being applied.
Without more information as to what styles are present, the best suggestion I can offer is to use a tool that allows you to interactively assess your styles. Internet Explorer 8 has the Developer Tools feature. Conveniently, you can use a feature to click on an item on your Web page and it will load that element along with its styles. You can then analyze the styles or dynamically tweak styles to immediately see results.
I'd recommend loading the page that works and screen capturing the styles for the table when it looks good. Then you can do the same for when the styles are not being applied to the table and compare the two as a starting point to determining what's causing the difference.
I am using contenteditable attribute in this way.
${row.pno}.
As the data is retrieved from the DB, few values can be null. I can edit the span with some value. The problem is I cannot edit the blank(null text) span. How can i achieve this.
Thanks and Regards
Adeeb
An element with the contenteditable attribute is editable even if the element is initially empty, as in <span contenteditable></span>. The user just can’t focus on it by clicking on it. But he can use the TAB key to move to the element and then type or paste something.
The conclusions depend on the context. For example, if the span element is the sole content of a table cell, you could set display: block on it, making it occupy the entire. Assuming that other cells imply nonzero width and height for that cell, the editable element would have them too and be clickable.