Wednesday, 21 November 2012

ZK Grid CSS

image

<zk>

<style>
.fgrid tr.z-row td.z-row-inner,tr.z-row,div.z-grid-body
div.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; }

.fgrid .z-grid-odd .fgrid .z-row-inner,.fgrid .z-grid-odd
.z-cell { background-color: #F7F7F7; border-bottom: 1px solid
transparent; border-left: 1px solid transparent; border-top: 1px
solid transparent; }

.fgrid .z-grid-odd .fgrid.z-row-inner,.fgrid.z-grid-odd
.z-cell,.fgrid.z-grid-odd { background: none repeat scroll 0 0
transparent; }

.fgrid tr.z-grid-odd td.z-row-inner,.fgrid tr.z-grid-odd
.z-cell,.fgrid tr.z-grid-odd { background: white }

.fgrid tr.z-row td.z-row-inner,.fgrid tr.z-row .z-cell {
background: white; border-top: none; }


</style>

<window id="win" width="99%" height="auto">
<label value="Grid without sclass " style="font-size :20px;" />
<panel width="100%">
<panelchildren>
<separator />
<grid hflex="min">
<columns>
<column hflex="min" align="right" />
<column hflex="min" />
<column hflex="min" align="right" />
<column hflex="min" />
<column hflex="min" align="right" />
<column hflex="min" />
<column hflex="min" align="right" />
<column hflex="min" />
<column hflex="min" align="right" />
<column hflex="min" />
</columns>
<rows>
<row>
<label value="Salutation" />
<textbox />
<label value="Last Name" />
<textbox />
<label value="First Name" />
<textbox />
<label value="Middle Name" />
<textbox />
</row>
<row>
<label value="Suffix" />
<textbox />
<label value="Gender" />
<textbox />
<label value="DOB" />
<textbox />
<label value=" " />
<label value=" " />
<label value=" " />

</row>
<row>
<label value="SSN" />
<textbox />
<label value="Marital Status" />
<textbox />
<label value="" />
<label value=" " />
<label value=" " />
<label value=" " />
<label value=" " />
</row>

<row>
<cell colspan="8">
<separator bar="true" />
</cell>
</row>

<row>
<cell colspan="8" style="" align="left">
<label value="Contact Details" />
</cell>
</row>


<row>
<label value="Address:" />
<cell colspan="3">
<textbox rows="1" hflex="1" />
</cell>
<label value="" />
<label value=" " />
<label value=" " />
<label value=" " />
<label value=" " />
</row>

<row>
<label value="" />
<cell colspan="3">
<textbox rows="1" hflex="1" />
</cell>
<label value="" />
<label value=" " />
<label value=" " />
<label value=" " />
<label value=" " />
</row>

<row>
<label value="City" />
<textbox rows="1" hflex="1" />
<label value="State" />
<textbox />
<label value="ZipCode " />
<textbox />
<label value=" " />
<label value=" " />
<label value=" " />
</row>

<row>
<label value="Home Phone" />
<textbox />
<label value="Office Phone" />
<span>
<textbox width="100px" />
<textbox width="30px" />
</span>
<label value="Mobile" />
<textbox />
<label value="Fax" />
<textbox />
<label value=" " />
<label value=" " />
</row>

<row>
<label value="Email" />
<cell colspan="3">
<textbox rows="1" hflex="1" />
</cell>
</row>
</rows>
</grid>
</panelchildren>
</panel>
</window>
<window id="win1" width="99%" height="440px">
<label value="Grid with sclass " style="font-size :20px;" />
<panel width="100%">
<panelchildren>
<separator />
<grid hflex="min" sclass="fgrid">
<columns>
<column hflex="min" align="right" />
<column hflex="min" />
<column hflex="min" align="right" />
<column hflex="min" />
<column hflex="min" align="right" />
<column hflex="min" />
<column hflex="min" align="right" />
<column hflex="min" />
<column hflex="min" align="right" />
<column hflex="min" />
</columns>
<rows>
<row>
<label value="Salutation" />
<textbox />
<label value="Last Name" />
<textbox />
<label value="First Name" />
<textbox />
<label value="Middle Name" />
<textbox />
</row>
<row>
<label value="Suffix" />
<textbox />
<label value="Gender" />
<textbox />
<label value="DOB" />
<textbox />
<label value=" " />
<label value=" " />
<label value=" " />

</row>
<row>
<label value="SSN" />
<textbox />
<label value="Marital Status" />
<textbox />
<label value="" />
<label value=" " />
<label value=" " />
<label value=" " />
<label value=" " />
</row>

<row>
<cell colspan="8">
<separator bar="true" />
</cell>
</row>

<row>
<cell colspan="8" style="" align="left">
<label value="Contact Details" />
</cell>
</row>


<row>
<label value="Address:" />
<cell colspan="3">
<textbox rows="1" hflex="1" />
</cell>
<label value="" />
<label value=" " />
<label value=" " />
<label value=" " />
<label value=" " />
</row>

<row>
<label value="" />
<cell colspan="3">
<textbox rows="1" hflex="1" />
</cell>
<label value="" />
<label value=" " />
<label value=" " />
<label value=" " />
<label value=" " />
</row>

<row>
<label value="City" />
<textbox rows="1" hflex="1" />
<label value="State" />
<textbox />
<label value="ZipCode " />
<textbox />
<label value=" " />
<label value=" " />
<label value=" " />
</row>

<row>
<label value="Home Phone" />
<textbox />
<label value="Office Phone" />
<span>
<textbox width="100px" />
<textbox width="30px" />
</span>
<label value="Mobile" />
<textbox />
<label value="Fax" />
<textbox />
<label value=" " />
<label value=" " />
</row>

<row>
<label value="Email" />
<cell colspan="3">
<textbox rows="1" hflex="1" />
</cell>
</row>
</rows>
</grid>
</panelchildren>
</panel>
</window>
</zk>

14 comments:

  1. Great job, very useful!! Thank you

    Rodolfo

    ReplyDelete
  2. Hi,
    How to set background color on grid.
    it's working on panelchildren style="background-color: transparent"
    but it's not working on case of grid.
    please help how to set grid in transpanent.

    ReplyDelete
  3. @himansu my code for transparent background:
    .grid div.z-grid-body, .z-panel .z-panelchildren ,div.z-grid, tr.z-grid-odd, tr.z-row td.z-row-inner, .z-cell {
    background: transparent;
    background-image: none;
    border: 0px solid transparent;
    }

    ReplyDelete
  4. When I use this code,
    The label that I put on the first column in the grid disappear when the mouse over,
    Could you pleaese suggest what to change?

    ReplyDelete
    Replies
    1. What ZK Version you are using ?

      Delete
    2. I am usging ZK7 with atlantic theme.

      rujimethut

      Delete
  5. I am using ZK 7

    ReplyDelete
    Replies
    1. Sorry Man. The above code will work correctly only in ZK 6 + version. ZK 7 has been changed the CSS Completely

      Delete
    2. Thank you for great articles , I will try on ZK6.
      Rujimeth

      Delete
  6. I managed to disable hover event and borders in ZK, through this css code:

    .z-row-content,.z-row-inner,.z-rows,.z-row,.z-grid-odd,.z-grid-body,.z-grid-header,.z-cell {
    background: transparent !important;
    border: none !important;
    }

    I Hope helps.

    ReplyDelete
    Replies
    1. Thanks Jose,

      It works on ZK version 7+. It helped me alot

      Delete
  7. Thank you so much for posting. It works well.

    ReplyDelete