I need a Scroll bar for GWT CellTable. The following is my ui.xml,
<gwt:SplitLayoutPanel>
<gwt:west size="200">
<gwt:VerticalPanel>
<gwt:HTMLPanel>
<table>
<tr>
<td>
<gwt:Label>xxxx</gwt:Label>
</td>
</tr>
<tr>
<td>
**Here i need a CellTable with Vertical Scrollbar**
</td>
</tr>
</table>
</gwt:HTMLPanel>
</gwt:VerticalPanel>
</gwt:west>
<gwt:center>
<gwt:VerticalPanel />
</gwt:center>
</gwt:SplitLayoutPanel>
I tried with ScrollPanel --> VerticalPanel --> CellTable. But i'm not getting ScrollBar. Can anyone help me?
Thanks in advance,
Gnik
What's the point in using of the VerticalPanel in this situation? Replace it by the ScrollPanel in your UiBinder xml-file. Set the width and the height in pixels for this ScrollPanel(this is very important!) and put in it your CellTable:
<g:ScroollPanel pixelSize="200, 400">
<c:CellTable ui:field="myCellList" />
</g:ScroollPanel>
200 - the width of panel in pixels, 400 - height.
At that the size of the CellTable list must necessarily larger than the size of ScrollPanel. Otherwise, a scroll does not appear.
Or set the width in 100% if you need a vertical scrolling:
<g:ScrollPanel width="100%" height ="400px">
If you are using Gwt 2.4, then replacing the CellTable Object with a DataGrid Object will give you the needed result with no need for a Scrollapanel.
You can see the difference between the celltable and the datagrid in the gwt Showcase (under cell widgets).
The below code worked for me -
<g:HTMLPanel>
<g:VerticalPanel>
<g:TabLayoutPanel barHeight="2" barUnit="EM" width="790px"
height="500px">
<g:tab>
<g:header>Sample</g:header>
<g:DockLayoutPanel>
<g:center>
<g:ScrollPanel>
<p1:CellTable ui:field="cellSampleTable" />
</g:ScrollPanel>
</g:center>
</g:DockLayoutPanel>
</g:tab>
</g:TabLayoutPanel>
</g:VerticalPanel>
</g:HTMLPanel>
Related
I have a customcell in my xml file, It contains vertical panel which I have hide, But it cause some UI design issue as CustomCell is not hidde. Can anyone tell me how I can hide my customcell?. Thanks in advance.
<g:customCell styleName="width:15%;" ui:field="parentCell"
visible="false">
<g:VerticalPanel visible="false" ui:field="SortVPanel">
<g:Grid width="100%">
<g:row>
<g:customCell >
<g:Label styleName="float-left" wordWrap="false" width="65px" >
<ui:msg key="lblSort"> Sort By </ui:msg></g:Label>
</g:customCell>
<g:customCell styleName="cell-width83">
<c:ComboBoxComponent />
</g:customCell>
</g:row>
</g:Grid>
</g:VerticalPanel>
</g:customCell>
I want to hide the above customcell, which UiField value is ui:field="parentCell"
The g:customCell tag isnt a dom element, but a marker for the g:Grid tag to know which items are cells vs rows. This means you can't add html attributes to it. You also can't give it a ui:field, since it isn't an object at all.
Instead, you put these on the child Widget which lives inside the g:customCell tag, or from your Java code, you can call grid.getCellFormatter() and use the methods there to further format the cell which wraps the widget.
Am new to ZK and using combobox in my page.I gave width="100%" to combobox but it doesn't take and if I refresh the page , the combobox shrinks.
Please anyone tell me how I can set common width to entire combobox in my application uniformly?
There are few ways to do what you want. for example:
<div sclass="positionInfo">
<combobox readonly="true" width="30%" model="#load(vm.positionModel)" constraint="no empty:Please select position!"
selectedItem="#bind(fx.position)" tabindex="3">
<template name="model" var="po">
<comboitem label="#load(po.positionName)" value="#load(po.positionId)" />
</template>
</combobox>
</div>
put your combobox inside div element, then set CSS class named "positionInfo".
set CSS rule for CSS selector .positionInfo (width by a specific pixels or percent), then everything will be done.
I am new to ZK frame work. I wanted to have a layout where one Window should fit the
enitre width of div component. I tried to add width=100% but it does not work.
how do I do that? Please see the code below
<zk>
<div style="background:yellow;">
<hlayout sclass="z-valign-top" style="background:red;">
<window width="100%" title="win" border="normal"/>
</hlayout>
<separator/>
</div>
</zk>
Using relative sizes (percent) are by my experience often counter-productive. Use hflex/vflex instead.
<zk>
<div style="background:yellow;">
<hlayout sclass="z-valign-top" style="background:red;">
<window hflex="1" title="win" border="normal"/>
</hlayout>
<separator/>
</div>
</zk>
How can I get colspan like feature in a form:textarea in spring form tag?
This is my current code:
<td><html:textarea rows="5" cols="60" path="comment" /></td>
There are total 5 columns in the table. I would like to have the label in the first column and textarea in the remaining 4 colums. How can I achieve this?
I think you don't need a "colspan-like" solution but colspan itself. Note that what you want to span is a table cell, not the textarea. Therefore, you must use the attribute on the enclosing td element.
Text areas in HTML have their own layout of rows and columns but it's completely unrelated to HTML tables. A colspan attribute on a textarea simply doesn't make sense.
Here's a piece of HTML code that does the trick.
<table>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
<tr>
<td>label</td>
<td colspan="2"><textarea cols="60" rows="3"></textarea></td>
</tr>
</table>
Here's a working example on JSFiddle, styled with CSS to make the structure more visible.
I'm trying to use the GWT grid component in uibinder. It works fine until I want to set the width of the columns. The following is what I've tried to do but it doesn't seem to work.
<g:Grid width="100%">
<g:row>
<g:customCell width="20%">
<g:FlowPanel width="">
</g:FlowPanel>
</g:customCell>
<g:customCell width="80%">
<g:FlowPanel width="">
</g:FlowPanel>
</g:customCell>
</g:row>
</g:Grid>
You can write some java code in order to do that, example:
grid.getColumnFormatter().setWidth(0, "10%");
grid.getColumnFormatter().setWidth(1, "10%");
Only styleName is taken into account on g:row, g:cell and g:customCell elements.
If you can (i.e. if your grid content is mostly static), avoid using Grid and prefer an HTMLPanel containing an HTML <table>, this gives you much more flexibility.
http://code.google.com/p/google-web-toolkit/source/browse/tags/2.4.0/user/src/com/google/gwt/uibinder/elementparsers/GridParser.java