TreeView using multibycheckbox!

[saulomartins]

Hello! How are you!?
I have a doubt about the language jslinb, i can't set values on the TreeView with multibycheckbox.
How can i access the methods to get/set values on TreeView? i Try using "_xxx" like "_checked" but this does't work fine!
Can you help me?
Please see that function: "_treemenu_onitemselected"

Here goes my demo code:


// The default code is a com class (inherited from linb.Com) Class('App', 'linb.Com',{     // Ensure that all the value of "key/value pair" does not refer to external variables     Instance:{         // To initialize instance(e.g. properties)         initialize : function(){             // To determine whether or not the com will be destroyed, when the first UI control be destroyed             this.autoDestroy = true;             // To initialize properties             this.properties = {};         },         // To initialize internal components (mostly UI controls)         // *** If you're not a skilled, dont modify this function manually ***         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,"treeMenu")                 .setDomId("treeMenu")                 .setItems([{"id":"node1", "caption":"Item1", "sub":[{"id":"node11", "caption":"SubItem1", "sub":[{"id":"node111", "caption":"SubItem2"}, {"id":"node112", "caption":"SubItem2"}]}]}, {"id":"node2", "caption":"Item2"}, {"id":"node2", "caption":"Item3"}])                 .setDock("none")                 .setLeft(0)                 .setTop(80)                 .setWidth(880)                 .setHeight(300)                 .setSelMode("multibycheckbox")                 .setValue("")                 .onItemSelected("_treemenu_onitemselected")             );                         return children;             // ]]code created by jsLinb UI Builder         },         // Give a chance to load other com         iniExComs : function(com, threadid){         },         // Give a chance to determine which UI controls will be appended to parent container         customAppend : function(parent, subId, left, top){             // "return false" will cause all the internal UI controls will be added to the parent panel             return false;         },         // This instance's events         events : {},         _treemenu_onitemselected : function (profile, item, e, src, type) {                     var ns = this, uictrl = profile.boxing();                     var value=item._checked;//Here i need to get the Value From the Clicked Item                     for (i in item.sub) {//Here i try to set Value on each item of the Clicked Item                         item.sub[i]._checked=value;//Here i try to set Check the checkbox                     }                 },     } });

[saulomartins]

Please!!!!
I need Help here!!
Thank you!!!

[linb]

You can learn these basic things from our demo or codesnip.

----------------------
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.SButton)
                .setHost(host,"ctl_sbutton1")
                .setLeft(200)
                .setTop(300)
                .setCaption("Set multi value")
                .onClick("_ctl_sbutton1_onclick")
            );
           
            append(
                (new linb.UI.Pane)
                .setHost(host,"ctl_pane6")
                .setLeft(120)
                .setTop(10)
                .setWidth(300)
                .setHeight(250)
            );
           
            host.ctl_pane6.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"}])
                .setSelMode("multibycheckbox")
                .setValue("")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },
        _ctl_sbutton1_onclick : function (profile, e, src, value) {
            var ns = this, uictrl = profile.boxing();
            ns.ctl_treeview1.setValue("node1;node2");
        }
    }
});

[Bruce_Dickey]

saulomartins,

Is this what you had in mind? This is for a two-level multi tree. Make sure all your id's are unique.

       _ctl_view_treeview_onitemselected : function (profile,item,e,src,type){             var ns = this, uictrl = profile.boxing();                         if (item._deep == 0)  {                                var values = uictrl.getUIValue().split(/[;,]/);                 var curText = e.currentTarget.textContent.trim();                 var items = uictrl.getItems();                                 for (var i = 0; i < items.length; i++) {                     var item = items[i];                                         if (item.caption == curText) {                             if (type == 1) {                             // Was unchecked; is being checked, so add items                             values.push(item.id);                                                     for (var j = 0; j < item.sub.length; j++) {                                 var sub = item.sub[j];                                 var pos = values.indexOf(sub.id);                                 if (pos == -1) {                                     values.push(sub.id);                                    }                             }                         }                         else {                             // Type == -1; was checked; is being unchecked, so remove items                             for (var i = 0; i < item.sub.length; i++) {                                 var rm_val = item.sub[i].id;                                                                     var pos = values.indexOf(rm_val);                                 if (pos > -1) {                                     var new_values = values.slice(0,pos).concat( values.slice(pos+1) );                                      values = new_values;                                                          }                             }                                                }                     }                  }                 var strvals = values.toString().replace(/,/g, ';');                 uictrl.setUIValue(strvals);             }         }     }

Linb,
If there is a better or more succinct way to do this, please indicate.
Thanks.

[linb]

I don't understand what you are doing.

Why you set value in 'onitemselected' event? If you .setSelMode("multibycheckbox"), you can click the checkbox to select it(values were set auto), if you .setSelMode("multi"), you can just click the item to select it(values were set auto).

[Bruce_Dickey]

Hi Linb.

It is to check / uncheck all child items when a parent item is clicked.

I am very new to Linb -- I don't know of another / easier way to do that -- is there one?

Can you explain what you mean by "values were set to auto"? I set value to "auto" in the Builder (and commented out my onitemselected handler) w/o desired effect.

Thanks,
Bruce

[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.Block)
                .host(host,"block1")
                .setLeft(180)
                .setTop(170)
                .setWidth(140)
                .setHeight(400)
            );
           
            host.block1.append((new linb.UI.TreeBar)
                .host(host,"treebar3")
                .setItems([{"id":"item a", "caption":"item a", "sub":[{"id":"sub a1", "caption":"sub a1", "sub":[{"id":"sub a111", "caption":"sub a111"}, {"id":"sub a222", "caption":"sub a222"}]}, {"id":"sub a2", "caption":"sub a2"}, {"id":"sub a3", "caption":"sub a3"}, {"id":"sub a4", "caption":"sub a4"}]}, {"id":"item b", "caption":"item b", "sub":[{"id":"sub b1", "caption":"sub b1"}, {"id":"sub b2", "caption":"sub b2"}, {"id":"sub b3", "caption":"sub b3", sub: [{"id":"sub b4", "caption":"sub b4"}]}]}])
                .setSelMode("multi")
                .onItemSelected("_treebar3_onitemselected")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },
        _treebar3_onitemselected:function (profile, item, src) {
            var checked,
                uiv = profile.boxing().getUIValue(),
                arruiv = uiv.split(';'),
                traversal = function(item,arr){
                    _.arr.each(item.sub,function(o){
                        arr.push(o.id);
                        if(o.sub!=null)
                            traversal(o,arr);
                    })
                };
           
            if(_.arr.indexOf(arruiv,item.id)!=-1)
                checked=true;

            var arr=[];
            traversal(item,arr);

            if(arr.length){
                _.filter(arruiv,function(o){
                    return _.arr.indexOf(arr,o)==-1;
                });
                if(checked)
                    _.arr.insertAny(arruiv, arr, -1);

                 profile.boxing().setUIValue(arruiv.join(';'));
            }
        }
    }
});

[Bruce_Dickey]

Nice - handles an arbitrary number of levels with the traversal function.

Thanks!