TreeView onClick event for checkbox?

[Bruce_Dickey]

Hi,

I've noticed that with the "multi"-select TreeView, the onClick event is fired when clicking on the caption or on the icon, but not when clicking on the checkbox itself.

This is very unexpected compared to other UIs.  How can I get an onClick event when clicking on a checkbox in a "multi"-select TreeView?

Thanks,
Bruce

[linb]

Does TreeView has onClick event?

[Bruce_Dickey]

No, you are right: TreeView does not have the onClick event (available to the user of the library in the normal usage as I understand it). I was thinking that the checkbox would be a linb.UI.SCheckbox or similar -- but looking now that has an onChecked event, not onClick.

BUT, if I set a breakpoint on the onItemSelected handler for the "multi" select TreeView, and go looking at the control returned from profile.boxing(), I see things like:

uictrl._nodes[0].behavior.MARK2.onClick                -- Is MARK2 the Checkbox?
uictrl._nodes[0].behavior.ITEMICON.onClick
uictrl._nodes[0].behavior.ITEMCAPTION.onClick

So to re-write my question better --

How can I get my own handler assigned to that onClick when single-clicking on a checkbox in a "multi"-select TreeView?
Something like the following (that doesn't work)?

.setEvents( { MARK2.onClick : "_ctl_treeview_onClick" } )

Thanks!

[linb]

Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
           
            append(
                (new linb.UI.TreeView)
                .setHost(host,"ctl_treeview1")
                .setItems([{"id":"node1", "sub":["node11", {"id":"node12", "image":"img/demo.gif"}, "node13", "node14"], "caption":"node1"}, {"id":"node2", "sub":["node21", "node22", "node23", "node24"], "caption":"node2"}])
                .setDock("none")
                .setLeft(60)
                .setTop(60)
                .setHeight(70)
                .setSelMode("multi")
                .setValue("")
                .onItemSelected("_treeview_onitemselected")
            );
           
            append(
                (new linb.UI.TreeView)
                .setHost(host,"ctl_treeview5")
                .setItems([{"id":"node1", "sub":["node11", {"id":"node12", "image":"img/demo.gif"}, "node13", "node14"], "caption":"node1"}, {"id":"node2", "sub":["node21", "node22", "node23", "node24"], "caption":"node2"}])
                .setDock("none")
                .setLeft(310)
                .setTop(60)
                .setHeight(70)
                .setSelMode("multibycheckbox")
                .setValue("")
                .onItemSelected("_treeview_onitemselected")
            );
           
            append(
                (new linb.UI.SLabel)
                .setHost(host,"ctl_slabel3")
                .setLeft(60)
                .setTop(40)
                .setCaption("multi")
            );
           
            append(
                (new linb.UI.SLabel)
                .setHost(host,"ctl_slabel4")
                .setLeft(310)
                .setTop(40)
                .setCaption("multi by checkbox")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },
        _treeview_onitemselected : function (profile, item, e, src, type) {
            switch(type){
              case -1:
                    linb.message("'" + item.id + "' was clicked to uncheck.");
              break;
              case 1:
                    linb.message("'" + item.id + "' was clicked to check.");
              break;
              default:
                    linb.message("'" + item.id + "' was clicked for normal event.");
            }
        }
    }
});

[Bruce_Dickey]

Super! Thank you.

To summarize, both "multi" and "multibycheckbox" have checkboxes, but I need to use "multibycheckbox" instead of "multi" in order to be able to distinguish between clicking on the checkbox itself versus the icon or caption.
type    multi                                      multibycheckbox ------------------------------------------------------------------------------------ -1      uncheck (ckeckbox, icon, and caption)      uncheck (click on checkbox) 1      check   (checkbox, icon , and caption)     check   (click on checkbox) 0      not applicable                             no effect on checkbox state (click on icon or caption)

[Bruce_Dickey]

Hi,

Oops, your example works with Firefox, but not with Chrome. That is, the onitemselected event is not fired when clicking on the checkbox when the TreeView selection mode is set to "multibycheckbox", in Chrome.

I thought perhaps I should update from v3.0 to v4.0, which I did, but that did not help.

Is this a bug or is there any way around this?

Thanks,
Bruce

[linb]

I run the code with Chrome, it works well.

[Bruce_Dickey]

Now same for me today, for your code. My large app still is misbehaving. I'll update this post when I find out why.

Later: Boiled down the files to the code shown below.

Problem: Not getting the event when clicking on the checkbox for the "multibycheckbox" tree.  Same in Chrome and Firefox.

For both working and non-working cases: Running on Red Hat Enterprise Linux 6, 64-bit, Apache sever, web2py web framework.

Conditions when not working: Running stand-alone with my index.html and my agile_diags.js files.

Conditions when working: Running in VisualJS (also from Apache and web2py) without using my index.html and agile_diags.js files.

This looks like it should be fairly simple, but I'm stumped. Please help.

Thanks,
Bruce

index.js
Class('App', 'linb.Com',{     Instance:{         iniComponents : function(){             // [[code created by jsLinb UI Builder             var host=this, children=[], append=function(child){children.push(child.get(0))};                         append(                 (new linb.UI.TreeView)                 .setHost(host,"ctl_treeview1")                 .setItems([{"id":"node1", "sub":["node11", {"id":"node12", "image":"img/demo.gif"}, "node13", "node14"], "caption":"node1"}, {"id":"node2", "sub":["node21", "node22", "node23", "node24"], "caption":"node2"}])                 .setDock("none")                 .setLeft(60)                 .setTop(60)                 .setHeight(430)                 .setSelMode("multi")                 .setValue("")                 .onItemSelected("_treeview_onitemselected")             );                         append(                 (new linb.UI.TreeView)                 .setHost(host,"ctl_treeview5")                 .setDirtyMark(false)                 .setShowDirtyMark(false)                 .setItems([{"id":"node1", "caption":"node1", "sub":[{"id":"node11", "caption":"node11"}, {"id":"node12", "image":"img/demo.gif", "caption":"node12"}, {"id":"node13", "caption":"node13"}, {"id":"node14", "caption":"node14"}]}, {"id":"node2", "caption":"node2", "sub":[{"id":"node21", "caption":"node21"}, {"id":"node22", "caption":"node22"}, {"id":"node23", "caption":"node23"}, {"id":"node24", "caption":"node24"}]}])                 .setDock("none")                 .setDockMargin({"left":10, "top":40, "right":5, "bottom":7})                 .setLeft(320)                 .setTop(60)                 .setHeight(440)                 .setIniFold(false)                 .setSelMode("multibycheckbox")                 .setValue("")                 .onItemSelected("_treeview_onitemselected")                 .setCustomStyle({"BOX":"background-color:Beige"})             );                         append(                 (new linb.UI.SLabel)                 .setHost(host,"ctl_slabel3")                 .setLeft(60)                 .setTop(40)                 .setCaption("multi")             );                         append(                 (new linb.UI.SLabel)                 .setHost(host,"ctl_slabel4")                 .setLeft(310)                 .setTop(40)                 .setCaption("multi by checkbox")             );                         return children;             // ]]code created by jsLinb UI Builder         },         _treeview_onitemselected : function (profile, item, e, src, type) {                         linb.message('', "'" + item.id + "' `type` is: " + type.toString() );                                    switch(type){               case -1:                     linb.message('', "'" + item.id + "' was clicked to uncheck.");               break;               case 1:                     linb.message('', "'" + item.id + "' was clicked to check.");               break;               default:                     linb.message('', "'" + item.id + "' was clicked for normal event.");             }         }     } });

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="keywords" content="" /> <meta name="description" content="Equipment UI" /> <meta name="copyright" content="Copyright 2011 Micron Technology, Inc." /> <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"> <meta http-equiv="imagetoolbar" content="no" /> <title> Agile Diags </title> </head> <body id="gui"  >         <!-- the {{ }} stuff are web2py macros that do indeed load the given files --> <script type="text/javascript" src="{{ =URL('static', 'runtime/jsLinb/js/linb-all.js') }}"></script> <script type="text/javascript" src="{{ =URL('static', 'runtime/jsLinb/js/adv-all.js') }}"></script> <script type="text/javascript" src="{{ =URL('static', 'App/js/index.js') }}"></script> <script type="text/javascript" src="{{ =URL('static', 'App/js/agile_diags.js') }}"></script> </body> </html>

agile_diags.js
function Run_AgileDiags_App() { window.app = new App; window.app.iniComponents(); linb('gui').append( app.getUIComponents() ); } linb.main( Run_AgileDiags_App );

[linb]

I tested it, it works well in two conditions.

[Bruce_Dickey]

Things that make you go "Hmmmm..."

Well, I'll figure it out some day. Must be something in my environment.. Thanks for taking a look.