How to Hide Grid Border and cell line

asked 2010-02-25 00:33:39 +0800

abhi2008
61 ● 1 ● 1 ● 4

updated 2010-02-25 01:37:35 +0800

Source Code

I want to create a form based input. So I decided to create using Grid. But I want to hide the grid border and cell border. Also I want to avoid alternate row background color in the grid. How to change the style of grid.

Here is my code...

<groupbox id="pi" mold="3d" width="510px">
<caption label="Time Information" style="font-weight:bold;"/>
<grid>
<columns>
<column label="" width="80px"/>
<column label="" width="135px"/>
<column label="" width="120px"/>
<column label=""/>
</columns>

<rows>
<row>
<label value="Move In:"/>
<datebox id="mi" width="125px"/>
<label value="Term:"/>
<label value="0 month"/>
</row>
<row>
<label value="Move Out:"/>
<datebox id="mo" width="125px"/>
<label value="Remaining Term:"/>
<label value="0 month"/>
</row>
<row>
<label value="Signed:"/>
<datebox id="sd" width="125px"/>
</row>

</rows>
</grid>

</groupbox>

I have tried the above desing using <vbox spacing="10"> and <hox spacing="X">. But I couldn't get the expected result.

The only easy solution I found is using Grid, but the grid lines gives me ugly look.

Is there any other way to achive the same result?

delete flag offensive retag edit

8 Replies

Sort by » oldest newest

answered 2010-02-25 03:17:40 +0800

terrytornado

9393 ● 3 ● 7 ● 16
http://www.oxitec.de/

updated 2010-02-25 03:19:07 +0800

I have helped me with the grid lines with following style changes in the zul file:

	<window id="window_customerDialog"
                 .  .  .

		<style>
                        . . .
			<!-- cut/hide the vertical borders in the grid rows -->
			tr.z-row td.z-row-inner { border-right: 0px #CCC; }
                        . . .
		</style>

		<borderlayout id="borderlayoutCustomer">

			<north border="none" margins="0,0,0,0">
				<grid>
					<columns sizable="true" height="20px">
                                         . . .

best
Stephan

link publish delete flag offensive edit

answered 2010-02-25 04:34:03 +0800

abhi2008
61 ● 1 ● 1 ● 4

Hi Stephan,

Thankyou very much for your valuable suggestion. After reading your code I have got an basic idea of how to override the style class property. I have applied the style suggested by you, now my vertical lines are invisible. Let me try to hide horizontal and odd row bacground color.

Once again thanks.

Today I found your zkSample2 Application. I dowloaded zkoss-v2-0.war and copied into $TOMCAT_HOME/webapps folder. Start Application Server and access the URL http://localhost:8080/zkoss-v2-0

I am getting error. Is required any special configuration in Tomcat apart from auto deployment.

Thanks

Abhi

link publish delete flag offensive edit

answered 2010-02-25 04:58:13 +0800

terrytornado

9393 ● 3 ● 7 ● 16
http://www.oxitec.de/

Hmmmmmmm, i have downloaded yet and started on local Tomcat. It runs very well.
What is your errorstack ?

best
Stephan

link publish delete flag offensive edit

answered 2010-02-25 21:54:04 +0800

abhi2008
61 ● 1 ● 1 ● 4

Hi Stephan,

I have resolved the issues. The problem is JDK version 1.5
I replaced by JDK 1.6. It is successfully deployed. The application runs well.

Also, I have helped me to hide the entire grid border and odd row background color. Now my UI Looks great. However, the style affects other grids on the same page. My page has parent-child relationship. I am trying to hide grid cell lines only for parent, but it affects the child grid also.

How to use the style properties only the required grid? Is possible to create a grid layout component by ZK team.

Is there any other component available to build a form similar to Grid?

Sorry, I think I have asked too much

Thanks

Abhi

link publish delete flag offensive edit

answered 2010-02-26 02:32:45 +0800

terrytornado

9393 ● 3 ● 7 ● 16
http://www.oxitec.de/

updated 2010-02-26 02:36:30 +0800

You can give your piece of the style a 'name'

      	    <style dynamic="true">

			<!-- cut/hide the vertical borders in the grid rows -->
                        .myGridWithNoBorder tr.z-row td.z-row-inner { border-right: 0px #CCC; }
    
            </style>

<grid sclass="myGridWithNoBorder"

best
Stephan

PS: Please post your ready style here.

link publish delete flag offensive edit

answered 2010-02-26 04:05:23 +0800

abhi2008
61 ● 1 ● 1 ● 4

Hi Stephan,

Tens of thanks.

Now I achieved the expected result. You are my Guru (i.e. Teacher).

I am new to ZK Framework.

Here is my ready style...

<zk>
<style dynamic="true">


.GridLayoutNoBorder tr.z-row td.z-row-inner, tr.z-row .z-cell,div.z-grid
{
border: none;
overflow: hidden;
zoom: 1;
background: white;
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
}

</style>

<grid sclass="GridLayoutNoBorder">

</grid>
</zk>