-
FEATURED COMPONENTS
First time here? Check out the FAQ!
I'm using a Tree componant to navigate my application.
On top of it, I added a JS search that will act kind like the browser search option, highlighting the part that matches the string searched.
My issue is, with load on demande, not all the tree is loaded in the dom. And so my string search cannot matches the element not in the dom.
I've 2 option:
I tried using
<custom-attributes org.zkoss.zul.client.rod="false"/>
as described on the ClientRenderon_Demand page. (Btw someone give me a thumb up so I hit 30 and can finaly post links ;)
If anyone has experience with this, I'd be grateful.
Hello Costas,
Thanks for your reply. I understand what you are saying about manualy setting ID. And thanks about the class fix to go around.
However I've to disagree about changing the title of my post. Even though we digressed about talking about why setting id manualy is bad.
My issue is about how to load all the tree in the DOM.
After contacting ZK support, I got told to add
<custom-attributes org.zkoss.zul.tree.initRodSize="1000" />
For my tree and this seems to work fine.
Regards
I had the same thing with a grid displaying database search results. I use a js function to highlight the search keywords. The solution for me was to use paging with a sensible page size, but i understand this does not apply to you.
Maybe a solution would be to preformat the labels of your treeitems on the server-side. I mean, search the menu descriptions in java for the given keywords and preformat the tree labels with the appropriate html tags. But i don't know if the treeitem has the property pre="true"
which applies to labels and ignores the parsing of embedded html tags.
There goes a thumb :)
/Costas
Hum that was almost perfect. But now I've an issue.
My Treeitem all have a dynamic id And when I open a node containing children.
Then close it, I get an error message about the treeItem Id being duplicate. It's almost as if in pagination mode, the treeitem is duplicated (even temporary).
I don't have that issue when I remove the pagination mold.
Ouch! Please post a separate post with some code and the version you are using to be able some guys in here to test it.
Btw have you tried to remove the org.zkoss.zul.client.rod
attribute?
Small exemple I put up with a tree regular mold and a paginated one to show the issue.
Open and close both, you will get the error on the 2nd ...
The ViewModel :
public class TreeViewModel {
private DefaultTreeModel<CustNodeData> regTreeModel;
private DefaultTreeModel<CustNodeData> pagTreeModel;
@Init
public void init() {
regTreeModel = initTreeModel("regular");
pagTreeModel = initTreeModel("pagination");
}
private DefaultTreeModel<CustNodeData> initTreeModel(String key) {
DefaultTreeNode<CustNodeData> rootNode = new DefaultTreeNode<CustNodeData>(
null, new ArrayList<DefaultTreeNode<CustNodeData>>());
CustNodeData firstNodedata = new CustNodeData(key + "-1", key
+ "-Node1");
DefaultTreeNode<CustNodeData> firstNode = new DefaultTreeNode<CustNodeData>(
firstNodedata, new ArrayList<DefaultTreeNode<CustNodeData>>());
generateListNode(firstNode, key);
rootNode.add(firstNode);
return new DefaultTreeModel<CustNodeData>(rootNode);
}
private void generateListNode(DefaultTreeNode<CustNodeData> parentNode,
String key) {
CustNodeData nodeData1 = new CustNodeData(key + "-sub1", key
+ "-SubNode1");
DefaultTreeNode<CustNodeData> node1 = new DefaultTreeNode<CustNodeData>(
nodeData1);
parentNode.add(node1);
CustNodeData nodeData2 = new CustNodeData(key + "-sub2", key
+ "-SubNode3");
DefaultTreeNode<CustNodeData> node2 = new DefaultTreeNode<CustNodeData>(
nodeData2);
parentNode.add(node2);
CustNodeData nodeData3 = new CustNodeData(key + "-sub3", key
+ "-SubNode3");
DefaultTreeNode<CustNodeData> node3 = new DefaultTreeNode<CustNodeData>(
nodeData3);
parentNode.add(node3);
}
public DefaultTreeModel<CustNodeData> getRegTreeModel() {
return regTreeModel;
}
public DefaultTreeModel<CustNodeData> getPagTreeModel() {
return pagTreeModel;
}
}
The Zul:
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:n="native" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:w="client" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('tree.TreeViewModel')">
<vlayout>
<tree model="@load(vm.regTreeModel)">
<template name="model" var="node">
<treeitem id="${node.data.id}" label="${node.data.label}"/>
</template>
</tree>
<tree model="@load(vm.pagTreeModel)" mold="paging" pageSize="15">
<template name="model" var="node">
<treeitem id="${node.data.id}" label="${node.data.label}"/>
</template>
</tree>
</vlayout>
</window>
</zk>
The node Data object
public class CustNodeData {
private String id;
private String label;
public CustNodeData(String id, String label) {
this.id = id;
this.label = label;
}
public String getId() {
return id;
}
public String getLabel() {
return label;
}
}
This is really weird ....
William, i noticed that you are using EL expressions mixed with MVVM EL expressions:
<treeitem id="${node.data.id}" label="${node.data.label}"/>
I prefer not mixing these expressions so i would change to:
<treeitem id="@load(node.data.id)" label="@load(node.data.label)"/>
Now something more important. Is there any reason you set the id of each treeitem? In general it is not a good idea to set the id of ANY html component manually. ZK generates automatically these IDs and probably there is a conflict. I suppose that you need this id so to be able to know from the selected item's id the selection was made.
I prefer a simpler approach when the user clicks on an item. Create a link component inside the treecell and bind a @command to pass the desired data. For example:
<a onClick="@command('menu-item-selected', menu-id=node.data.id)">
<label value="@load(node.data.label)" />
</a>
Another solution could be to bind the onClick event of the treeitem to a @command passing the id of the node:
<treeitem label="@load(node.data.label)"
onClick="@command('menu-item-selected', menu-id=node.data.id)" />
Hope that helps
Costas
Hello Costas,
Thanks for your reply. For using ${} instead of @load, it's because, in my mind, @load is more costly since it needs watcher to update when there is a notify changes. I maybe could use @init, not sure if it would be better, but since the valuen never change i think @load wouldnt be appropriate.
About the id on each treeitem, yes I need them, the exemple I gave is a simplier version of my real code, but to quickly explain I've to interface with an oldest application wrote in VB and I'm using Js to be able to update which node is selected.
So I need the id to select the node via JS.
Btw do you have any idea why I would get that error message about duplicate ID?
Cheers,
William, i run your sample and after inspecting the output page i see that the ids are auto-generated by ZK. I have tested this with ZK 7.0.5
I insist it is not a good idea to set the id manually especially in complex components like trees or grids.
What i have done in a similar case, where i needed to select the components directly from js, was to set the value of the class
attribute instead of the id
. So your page looks like this now:
<zk>
<window apply="org.zkoss.bind.BindComposer"
xmlns:w="client"
viewModel="@id('vm') @init('tree.TreeVM')">
<button label="Select from JS" w:onClick="selectTreeNode()" />
<vlayout>
<tree model="@load(vm.regTreeModel)">
<template name="model" var="node">
<treeitem>
<treerow class="${node.data.id}">
<treecell label="${node.data.label}" />
</treerow>
</treeitem>
</template>
</tree>
<tree model="@load(vm.pagTreeModel)" mold="paging" pageSize="15">
<template name="model" var="node">
<treeitem>
<treerow class="${node.data.id}">
<treecell label="${node.data.label}" />
</treerow>
</treeitem>
</template>
</tree>
</vlayout>
<script type="text/javascript">
<![CDATA[
function selectTreeNode() {
$('.pagination-1').css('background-color', 'red');
}
]]></script>
</window>
</zk>
As you see i have added also a simple js function to select a treenode on the client-side.
Hope that helps
Costas
PS: I have changed the title of your post because it seems that eventualy the post has nothing to do with load on demand
:)
I was struggling with the same problem.
Asked: 2015-08-25 10:21:56 +0800
Seen: 88 times
Last updated: Feb 10 '17
How to remove html code from response
Facing issue in masking on phone [closed]
coerceFromString_ override no longer works from 6.5.1 [closed]
Execute Javascript on component visible
Is there a way to resolve view model properties as input to client side javascripts?
scrollbar listner for 2 grid [closed]