Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I would like to dynamically change the background color of listitems/listcells in a listbox to highlight priority items. The code I have tried almost works, the problem is that the zebra striping overwrites the background color I have conditionally set on the items where the darker zebra background is set.
<style>
.highPriority {background:lightpink};
</style>
<template name="model" var="item">
<listitem>
<attribute name="sclass" if='${item.priority=="1"}'>highPriority</attribute>
<listcell>
...
If I add it as a zclass, or put the attribute on the list cell, then I no longer have the problem of the overwriting, but I also lose the functionality of mouseover highlighting, or changing to selected color.
Is there a way for me to conditionally change the background color of a listitem/listcell and retain the mouseover and selection coloring functionality?
why don't you add
.highPrioritySelected-odd{...}
.highPrioritySelected{...}
.highPriority-odd{....}
.highPriority{....}
Now for the problem of your selected item. That's not just css alone. First of all I should remove the "manual" set to the css class and add a renderer. I give you an example(already formatted for your problem) here :
package be.chillworld;
import org.zkoss.zul.Label;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.ListitemRenderer;
/**
*
* @author chillworld
*/
public class ListboxRenderer implements ListitemRenderer<Item>{
public void render(Listitem item, Item data, int index) throws Exception {
Listcell cell = new Listcell();
item.appendChild(cell);
Label label = new Label(data.toString()); // set here what you want to see.
cell.appendChild(label);
if (item.isSelected()){
doSelectedItem(label, data, index);
} else {
doNotSelecteItem(label, data, index);
}
}
private void doSelectedItem(Label label, Item data, int index) {
if (data.getPriority()==1) {
if (index%2==0) {
label.setClass("highPrioritySelected");
} else {
label.setClass("highPrioritySelected-odd");
}
} else if (index%2==0){
label.setClass("z-listitem z-listitem-selected");
} else {
label.setClass("z-listitem z-listbox-odd z-listitem-selected");
}
}
private void doNotSelecteItem(Label label, Item data, int index) {
if (data.getPriority()==1) {
if (index%2==0) {
label.setClass("highPriority");
} else {
label.setClass("highPriority-odd");
}
} else if (index%2==0){
label.setClass("z-listitem");
} else {
label.setClass("z-listitem z-listbox-odd");
}
}
}
edit : refactorig and add highpriority-odd
Greetz chill.
The following snippet works fine for me:
<style>
.highPriority {background:lightpink !important};
</style>
<listbox id="lboxTasks" model="@bind(vm.tasks)">
<listhead>
<listheader label="Description" />
<listheader label="Due Date" />
</listhead>
<template name="model" var="task">
<listitem sclass="@load(task.priority eq 1 ? 'highPriority' : '')">
<listcell>
<textbox inplace="true" value="@bind(task.description)" />
</listcell>
<listcell>
<datebox inplace="true" value="@bind(task.dueDate)" format="d MMM yyyy" />
</listcell>
</listitem>
</template>
</listbox>
Hope that helps /costas
When you hover over a high priority item the listitem is painted blue and again pink when your mouse is out. When you select a pink listitem the color turns into the default blue. I have tested with zk 7 and 6.5.
cyiannoulis ( 2014-01-31 09:09:44 +0800 )editThis does not work. This behaves exactly like my original problem. If the high priority item lands on a "white" stripe then it works, but if the high priority item lands on a "dark" stripe then it does not. Make every item high priority and you will see only every other item is painted pink.
rwoolf ( 2014-01-31 17:35:14 +0800 )editSorry, my mistake.. just add the "!important" clause in your style and you should be ok
<style> .highPriority {background:lightpink !important}; </style>
cyiannoulis ( 2014-02-04 09:25:19 +0800 )editWhen I add the "!important" clause then it behaves just like when I set it using zclass. The colored cells no longer highlight when hovering over them and they do not change color when selecting. I wish I had a simple answer, but I will likely have to go the writing of a renderer to resolve this.
rwoolf ( 2014-02-10 20:52:48 +0800 )editAsked: 2014-01-30 21:03:45 +0800
Seen: 143 times
Last updated: Feb 04 '14
Where your other questions right answered or do you have still problems there?
chillworld ( 2014-01-30 21:13:45 +0800 )edit