0

how to change row background style in grid base on value?

asked 2010-10-08 08:49:53 +0800

xrehbam gravatar image xrehbam
15 1

Hi, i am having difficulty to find out how to changer row background style in a grid. I populating grid dynamically from the List. when i iterate i want to change font and background of specific rows base on value from the list. let say in my sample zul if currentYear value = 2010 i want make this row red? In struts framework i will use <logic:equal> what is alternative in zk?

Thanks,
Albert.

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<?component name="textbox" extends="textbox" constraint="no empty" style="text-align:right; color:blue" inplace="true" width="80px"?>

<window id="win" apply="com.pru.actions.EditableGridAction" title="Editable Grid" border="normal" width="1030px" >
<style src="/css/zul/grid.css"/>

<label id="labelMessage"/>
<groupbox if="${true}">
<label style="color:red"
value="Login failed. Please try again." />
<label style="color:red"
value="Login not failed." />
</groupbox>
<grid id="gridList" model="@{win$composer.allRecords}" width="1020x">
<frozen style="background: #dfded8" columns="2">
<div style="padding: 0 10px;">
<image
src="/images/Centigrade-Widget-Icons/DisketteBlack-16x16.png"
forward="onClick=onSave"
tooltiptext="Save" style="padding-right: 5px; cursor:pointer;"/>
<image
src="/images/Centigrade-Widget-Icons/icon-pdf_16x16.png"
forward="onClick=onExportToPDF"
tooltiptext="PDF" style="padding-right: 5px; cursor:pointer;"/>
<image
src="/images/Centigrade-Widget-Icons/Excel-16.gif"
forward="onClick=onExportToExcel"
tooltiptext="Excel" style="padding-right: 5px; cursor:pointer;"/>
</div>
</frozen>
<auxhead>
<auxheader label="SomeHeader" colspan="4" align="center" style="font-weight : bold;"/>
<auxheader label="SomeHeader" colspan="5" align="center" style="font-weight : bold;"/>
</auxhead>
<auxhead>
<auxheader align="center"/>
<auxheader label="Header1" align="center" style="font-weight : bold;"/>
<auxheader label="Header2" colspan="2" align="center" style="font-weight : bold;"/>
<auxheader label="Header3" colspan="2" align="center" style="font-weight : bold;"/>
<auxheader label="Header4" colspan="3" align="center" style="font-weight : bold;"/>
</auxhead>
<columns menupopup="auto">
<column sclass="header" width="30px"/>
<column sclass="header" label="Description" width="350px" style="font-weight : bold;"/>
<column sclass="header" label="CurrentYear" width="90px" style="font-weight : bold;"/>
<column sclass="header" label="PriorYear" width="90px" style="font-weight : bold;"/>
<column sclass="header" label="Q1 2010" width="90px" style="font-weight : bold;"/>
<column sclass="header" label="Q4 2009" width="90px" style="font-weight : bold;"/>
<column sclass="header" label="Q3 2009" width="90px" style="font-weight : bold;"/>
<column sclass="header" label="Q2 2009" width="100px" style="font-weight : bold;"/>
<column sclass="header" label="Q1 2009" width="90px" style="font-weight : bold;"/>
</columns>
<rows>
<row self="@{each=allRecords}" value="@{allRecords.id}" style="background:#9CB4EB!important;">
<cell><checkbox name="checkbox" value="true" checked="@{allRecords.checkbox}" if="${allRecords.checkbox=='true'}" style="font-weight : bold;" forward="onCheck=onCheck"></checkbox></cell>
<cell class="id"><toolbarbutton id="itemDescription" label="@{allRecords.itemDescription}" href="http://www.zkoss.org" style="font-size:11px;color:black;"></toolbarbutton></cell>
<cell class="currentYear"><textbox name="currentYear" value="@{allRecords.currentYear}" forward="onChange=onItemChange"></textbox></cell>
<cell class="priorYear"><textbox name="priorYear" value="@{allRecords.priorYear}" forward="onChange=onItemChange"></textbox></cell>
<cell><textbox name="q12010" value="@{allRecords.q12010}" forward="onChange=onItemChange"></textbox></cell>
<cell><textbox name="q42009" value="@{allRecords.q42009}" forward="onChange=onItemChange"></textbox></cell>
<cell><textbox name="q32009" value="@{allRecords.q32009}" forward="onChange=onItemChange"></textbox></cell>
<cell><textbox name="q22009" value="@{allRecords.q22009}" forward="onChange=onItemChange"></textbox></cell>
<cell><textbox name="q12009" value="@{allRecords.q12009}" forward="onChange=onItemChange"></textbox></cell>
</row>
</rows>
</grid>
</window>

delete flag offensive retag edit

2 Replies

Sort by ยป oldest newest

answered 2010-10-10 22:42:36 +0800

henrichen gravatar image henrichen
3869 2
ZK Team

Databinding handles getters and setters only. You might have to write the "logic" in a converter and use it to return proper style you want.

<row ... style="@{allRecords.currentYear}, converter=mypackage.MyConverter">

Check JavaDoc for org.zkoss.zkplus.databind.AnnotateDatabinder and org.zkoss.zkplus.databind.TypeConverter.

link publish delete flag offensive edit

answered 2010-10-11 12:44:44 +0800

xrehbam gravatar image xrehbam
15 1

Henry, Thanks for a help. I implemented TypeConverter and it's working beautiful.

here is my rows in zul

<rows>
<row self="@{each=allRecords}" value="@{allRecords.id}" style="@{allRecords.itemDescription,converter='mypackage.utils.TypeConverterUtil'}">
<cell><checkbox name="checkbox" value="true" checked="@{allRecords.checkbox}" forward="onCheck=onCheck"></checkbox></cell>
<cell class="id"><toolbarbutton id="itemDescription" label="@{allRecords.itemDescription}" href="http://www.zkoss.org" style="font-size:11px;color:black"></toolbarbutton></cell>
<cell class="currentYear"><textbox name="currentYear" value="@{allRecords.currentYear}" forward="onChange=onItemChange"></textbox></cell>
<cell class="priorYear"><textbox name="priorYear" value="@{allRecords.priorYear}" forward="onChange=onItemChange"></textbox></cell>
<cell><textbox name="q12010" value="@{allRecords.q12010}" forward="onChange=onItemChange"></textbox></cell>
<cell><textbox name="q42009" value="@{allRecords.q42009}" forward="onChange=onItemChange"></textbox></cell>
<cell><textbox name="q32009" value="@{allRecords.q32009}" forward="onChange=onItemChange"></textbox></cell>
<cell><textbox name="q22009" value="@{allRecords.q22009}" forward="onChange=onItemChange"></textbox></cell>
<cell><textbox name="q12009" value="@{allRecords.q12009}" forward="onChange=onItemChange"></textbox></cell>
</row>
</rows>

and here is java class

package mypackage.utils;
import org.zkoss.zkplus.databind.TypeConverter;
import org.zkoss.zul.Row;

public class TypeConverterUtil implements TypeConverter {
public Object coerceToBean(java.lang.Object val,
org.zkoss.zk.ui.Component comp) {
// System.out.println("************************ " + val);
return null;
}

public Object coerceToUi(java.lang.Object val,org.zkoss.zk.ui.Component comp) {
String total = (String) val;
CharSequence cs = "total";
if (total.toLowerCase().contains(cs)){
((Row)comp).setStyle("background:#cccccc;!important");
}
return((Row)comp).getStyle();
}
}

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-10-08 08:49:53 +0800

Seen: 1,443 times

Last updated: Oct 11 '10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More