Add Checkbox for Selected TreeItem [com.extjs.gxt.ui.client.widget.tree.TreeItem]

Hi all,


I tried to google but i was not able to find how to add a checkbox for a selected node in a tree.


By making Tree.setCheckable(true); will show a checkbox for all the parent and child node, my requirement is to have check box for only those node whose status is satisfied,


Thank you in Advance
Aks

You are referring to the Tree class which is deprecated in 2.x, but you are posting in the 2.x forums - are you referring to the GXT 2.x Tree class?

In both GXT 2.x TreePanel and GXT 3.x Tree you can call

Code:

---

treeWidget.setCheckable(true);
treeWidget.setCheckNodes(CheckNodes.LEAF);//or PARENT or BOTH

---

to configure which kind of node can be selected.

Does this answer your question? If not, can you be more specific about which version and which class you are using?

Hi,


treeWidget.setCheckNodes(CheckNodes.LEAF);//or PARENT or BOTH this would enable the checkbox for all the leaf node / parent or both

is it possible to add to only seleted item of the leaf node, which satifies certain condition ???

Not without knowing what version and what class you are trying to use...

Your title talks about 'com.extjs.gxt.ui.client.widget.tree.TreeItem', your post talks about 'Tree', but the only tree-like widget that exists in 2.x and should still be used is called TreePanel. The others are deprecated, and should be avoided, especially in any new code.

If I assumed you actually meant the 3.x Tree class, then I could give you one answer, but it wouldn't work for 2.x's deprecated Tree/TreeItem types.

i am using TreePanel and populating with treeStore.

i have enabled

store = new TreeStore<BeanModel>(createStore());
treePanel = new TreePanel<BeanModel>(store);
//treePanel.setCaching(false);
treePanel.setDisplayProperty(NODE);
treePanel.setCheckable(true);
treePanel.setCheckNodes(CheckNodes.LEAF);
treePanel.setAutoLoad(true);
treePanel.setLabelProvider(new ModelStringProvider<BeanModel>() {

@Override
public String getStringValue(BeanModel model, String property) {
MyObj cf = model.getBean();
String fieldName = "menu.item.";
return Messages.getMessage(fieldName, cf.getXmlName());
}
});

TreePanel.setChecked governs the ability to check items, as well as the actual firing of events and informing the dom to do the work. Its default implementation makes sure the default options (Leaf-only, node-only, or all) are followed with this code:

Code:

---

      if ((!leaf && checkNodes == CheckNodes.LEAF) || (leaf && checkNodes == CheckNodes.PARENT)) {
        return;
      }

---

Overriding this method and providing nearly the same functionality would be tricky, as there are a number of private variables - it could be done, but you'd need lots of JSNI to accomplish this.

Instead, take a look at the events fired as part of this process. When a Before- event is fired, this gives listening code the chance to stop whatever is happening by invoking .setCanceled(true);

How does this help you? There is a BeforeCheckChange event that goes off prior to actually checking the items - if you listen to this, you can customize the behavior of what is allowed to be checked. To make this work correctly, allow all nodes to be checked (using setCheckNodes), then implement your "can the user check this?" logic in your BeforeCheckChange listener.

thank you colin
my requirement is not to show up checkbox if the condition is not satisfied, but i guess i will have to show up some message when users tries to check by using BeforeCheckChange.

thank you for your reply.

could you please help me out with my other Post. "ReOrdering of child nodes within the parent"

My apologies - I answered the wrong question. I'm glad the fix I provided works for you, because the real fix is a little worse.

The rendering is managed by com.extjs.gxt.ui.client.widget.treepanel.TreePanelView.getTemplate(ModelData, String, String, AbstractImagePrototype, boolean, boolean, Joint, int, TreeViewRenderMode). The flag 'checkable' is used to decide whether or not to render the checkbox.

It could be possible to subclass TreePanelView, and override getTemplate, and decide whether or not you can render a checkbox , then pass that value to super.getTemplate. Something like this:

Code:

---

public ConditionalCheckTreePanelView extends TreePanelView {
    public String getTemplate(ModelData m, String id, String text,
                AbstractImagePrototype icon, boolean ignore, boolean checked,
                Joint joint, int level, TreeViewRenderMode renderMode) {
        boolean checkable = canBeChecked(m);
        return super.getTemplate(m, id, text, icon, checkable, checked,
                    joint, level, renderMode);
    }
}

---

This is untested. You'll need, as in the original example, to set checkNodes to ALL.

I' just novice in Ext.
My task now is to set checkboxes visible, when no "checked" params in json data(see example) setted.
The idea was to use treePanel's "load" event and just write something about
...... treePanel definition......
......................
load: function(node){
if(typeof node.checked != 'undefined'){
node.checked = false;
return;
}
node.checked = true;
}
........
Data in check-tree.json stays unchanged
Suggested:
Branches in example will be visible with empty checkboxes
leafs wil be set to checked
BUT:
IE debugger show this code is never called.
all checkboxes in the sampe stays unchecked

What is wrong?! I can't understand? but even "checkchange" listener from example is not calling from debugger, but check boxes are functioning!
Can somebody help me?
if you can FULL code, please
Gteat thanks for All

Unfortunately, this discussion forum is for GXT, which uses Java - we don't write much JavaScript. You'll have better luck in one of the forums that are specific to Ext JS.