b:tree --> selecting treeNode on click of the folder icon

12 June, 2009 - 18:54 — avi

Hello All,

Is there any way to select the node, after clicking the folder(open or close) icon in the b:treeBranch.
I am using 'system' skin for the b:tree.

I want a behavior where onClick of the folder icon, that node should be selected too. Currently it is setting the value open="true". I want to set the select="true" as well. Please guide me.

Backbase version: 4.3.0

Thank You
Avi

Any suggestions / guidence

15 June, 2009 - 21:35 — avi

I have the user requirement for the tree functionality, which should work exactly same as windows tree (when we open Explore in Windows OS). TreeNode should be selected when user clicks on the TreeNode folder. Please guide me.

Thank You
Avi

It should be possible by

16 June, 2009 - 16:08 — yudi

Hi avi,
It should be possible by setting the "selected" tree leaf's attribute to true when the tree branch is selected.
Cheers,
Yudi

On which event?

16 June, 2009 - 19:06 — avi

Thank you Yudi. I know that by doing select=true we can make the treeLeaf selected. But, I am unable to find the event when user clicks on the folder icon. Can you tell me on which event? And also how to differentiate the click between folder icon and '+ or -' icon.

Thank You
Avi

It is the mousedown event

17 June, 2009 - 10:20 — yudi

It is the mousedown event (treeBase.xml line 258).So basically, it will check whether the event is triggered from the branch's icon and if it is so , then it will check the current "open" attribute value.If the current "open" attribute value is "true" then it sets to "false" and if it is "false" then it sets to "true". The branch icon image is changed based on the "open" attribute value.
Cheers,
Yudi

Working, but also for +/- icon

21 June, 2009 - 22:17 — avi

Hello Yudi,

I can able to select the treeNode through mousedown event, but unable to differentiate between 'folder icon' click or on the '+/-' icon click.
My requirement is to select the treeNode, if clicked on the 'folder' icon only and not on the '+/-' icon.

I am using dynamic tree with the behavior element

<d:behavior name="load-replace-behavior">

        <d:handler event="mousedown"  type="text/javascript"><![CDATA[

                var oController = event.target;

                if (bb.selector.queryAncestor(event.viewTarget, '.btl-dataTree-toggleOpenClose', oController.viewNode) && !btl.isTrueValue("empty", oController.getAttribute("empty")) && (this.getAttribute('id') == oController.getAttribute('id'))) {

                        this.setAttribute('selected', true);

                }

        ]]></d:handler>

</d:behavior>

We are almost near to the solution, some more help will solve the problem :)

Thank You
Avi

Do you mean the

22 June, 2009 - 09:02 — yudi

Do you mean the folder/branch label ? If you would like to target only the folder label , then you could check the folder /branch label's class name and replace the selector parameter from the queryAncestor function with the branch label's class name. For instance:

// trigger mouse down event only on branch's label not on branch's icon image

bb.selector.queryAncestor(event.viewTarget, '.btl-dataTree-selectAndToggle', oController.viewNode)

cheers,
Yudi

I mean folder/branch icon

22 June, 2009 - 18:16 — avi

Hello Yudi,

It is not working with btl-dataTree-selectAndToggle check.
To clarify my requirement, i am trying to show it in a diagram way

I am using b:tree with system skin. As a front-end user, there are 3 things involved in it

folder/branch label

folder/branch icon

'+/-' icon

and there Default behavior are

onClick 'folder/branch' label ---> select (highlights) the 'folder/branch' label

onClick 'folder/branch' icon  ---> if closed, opens the child tree nodes and if opened, closes the child tree nodes

onClick '+/-' icon            ---> if closed, opens the child tree nodes and if opened, closes the child tree nodes

My requirement

onClick 'folder/branch' label ---> default behavior 

onClick 'folder/branch' icon  ---> default behavior and select (highlights) the 'folder/branch' label too

onClick '+/-' icon            ---> default behavior

After looking into the code:
btl-dataTree-selectAndToggle css class is activated when we select(or click on) the folder/branch label
btl-dataTree-toggleOpenClose css class is activated when we click on the folder/branch icon or '+/-' icon.

If I check for btl-dataTree-toggleOpenClose, as

bb.selector.queryAncestor(event.viewTarget, '.btl-dataTree-toggleOpenClose', oController.viewNode)

I can able to achieve this

onClick 'folder/branch' label ---> default behavior 

onClick 'folder/branch' icon  ---> default behavior and select (highlights) the 'folder/branch' label too

onClick '+/-' icon            ---> default behavior and select (highlights) the 'folder/branch' label too

but my requirement is

onClick 'folder/branch' label ---> default behavior 

onClick 'folder/branch' icon  ---> default behavior and select (highlights) the 'folder/branch' label too

onClick '+/-' icon            ---> default behavior

I don't know whether it is helpful to clarify the things.

Thank You
Avi

I understand the situation

23 June, 2009 - 15:47 — yudi

I understand the situation now. If you would like to target only on icon folder/branch , then you could use bb.selector.query function and use the icon folder class name as a CSS selector in that query function

<e:handler event="mousedown" type="application/javascript">

var oController = event.target;

if(bb.selector.query(event.viewTarget, '.btl-treeBranch-div', oController.viewNode) ){

   do something

}

Cheers,
Yudi

Its working, but throwing JavaScript error

26 June, 2009 - 20:25 — avi

Hello Yudi,

It is working perfectly, as required. Thank you very much.
New problem occurred. It is throwing JavaScript error with this change. I know, it is because of the dynamic tree which I used to populating the tree branch.

Backbase debugger error

XML Command: Command 'create' cannot be executed in the specified context.

XML Command: Command 'create' cannot be executed in the specified context.

behavior code used at each treeBranch

<d:behavior name="load-replace-behavior">

<d:handler event="mousedown"  type="text/javascript"><![CDATA[

        // To select the tree item, if clicked on folder icon

        var oController = event.target;

        if (bb.selector.queryAncestor(event.viewTarget, '.btl-treeBranch-div', oController.viewNode) && 

                !btl.isTrueValue("empty", oController.getAttribute("empty")) && 

                (this.getAttribute('id') == oController.getAttribute('id'))) {

                this.setAttribute('selected', true);

                event.preventDefault();

                window.browse_keydown_select_event = true;

        }

]]></d:handler>

<d:handler event="select"  type="text/javascript"><![CDATA[

        bb.command.fireEvent( this, 'open', false, false );

]]></d:handler> 

<d:handler event="open"  type="text/javascript"><![CDATA[

        var checkBox = this.selectNodes("view()/descendant::input[@type='checkbox']")[0];

        var treeBranchId = this.getAttribute('id');

        var populated = this.getAttribute('populated');

        //If selected

        var selected = this.getAttribute( 'selected' );

        selected = (selected == '' || selected == 'false') ? 'false' : 'true';

        if(populated == 'false')

        {

                //loading message

                bb.document.getElementById('treeLoading').show();

                var widget = this;

                widget._.responseFunc = function(request, response)

                {

                        bb.document.getElementById('treeLoading').hide();

                        if(null == response || isErrorPage ( response ))

                        {

                                return;

                        }

                }

                var newURL = "/dtlt/populateTreeView.action?branch="+treeBranchId+"&checked="+checkBox.checked+"&selected="+selected;

                bb.command.load(newURL,'POST', null, null, this, 'replace', widget._.responseFunc, widget._.responseFunc);

        }

]]></d:handler>

</d:behavior>

Any idea, why it is throwing the error ?

Thank You
Avi

Client Framework