«
»

, , , ,

CheckBoxTree Component (Adobe Flex 3)

Tuesday, December 30th, 2008 - 11:21 - Code

Build­ing on already avail­able Check­Tree ren­der­ers, here is the first release (0.1)  of the Check­Box­Tree com­po­nent. Sup­ports three state items i.e. “checked”, “unchecked”, “schro­dinger” and it has a basic search func­tion implemented.

Sam­ple code:

<inputs:CheckBoxTree width="480" height="320" title="Indian Subcontinent">
<inputs:dataProvider>
<mx:XMLListCollection>
<mx:source>
<mx:XMLList xmlns="">
<node state='checked' label='All' value='1'/>
<node state='unchecked' label='Afghanistan' value='2'/>
<node state='unchecked' label='Bangladesh' value='3'/>
<node state='unchecked' label='Bhutan' value='4'/>
<node state='unchecked' label='India' value='91'>
<node state='unchecked' label='Jammu and Kashmir' value='10'/>
<node state='unchecked' label='Himachal Pradesh' value='11'/>
<node state='unchecked' label='Punjab' value='12'/>
<node state='unchecked' label='Haryana' value='13'/>
<node state='unchecked' label='Uttaranchal' value='14'/>
</node>
<node state='unchecked' label='Nepal' value='5'/>
<node state='unchecked' label='Pakistan' value='6'/>
<node state='unchecked' label='Sri Lanka' value='7'/>
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
</inputs:dataProvider>
</inputs:CheckBoxTree>

A quick screen shot..
CheckBoxTree component Again, all code self explana­tory. Proper doc­u­men­ta­tion will fol­low when advanced fea­tures will be intro­duced into the component.

 What’s next?
– Select all, Clear all fea­tures
– Sup­port for mul­ti­ple dat­aProviders
– getCheckedItems(), setCheckedItems() meth­ods etc.

 Demo | Source code (Zip 6kB)


  1. sangeetha harilal says:
    2009/07/14 at 21:45

    I am a newbi to flex.

    Can we show check­boxes only in the lower level? or can we restrict click­ing upper level check boxes?

  2. Srirangan says:
    2009/07/16 at 07:10

    Just mod­ify the dat­aProvider to achieve sin­gle level.

  3. Ravi says:
    2009/07/16 at 16:48

    could any­one tell me how to cre­ate check­box tree for C: in windows

    using adobe flex

  4. Duke Fama says:
    2009/11/13 at 14:42

    Hi,
    please how can I get select items in the tree ? Any ideas please

  5. martin joseph says:
    2009/12/01 at 16:43

    hai ,

    I came to see your com­po­nent from one of my friends appli­ca­tion. He had used it. So i also just jumped in and used one for my appli­ca­tion . Every­thing went well , till the need arose for me to show the com­po­nent in view mode.

    What i have ? :
    I have a panel in which your com­po­nent is included. The required ren­derer file and the com­po­nent file are placed in the pack­age.
    Now in view mode , i want to show the user the tree , but restrict his abil­ity to click the check box . I am at a loss here .

    I need this to hap­pen only in the view mode .
    Could you help me out .

    Also have you updated this component ?

    Thanks sri­ran­gan.

    Mar­tin

  6. martin joseph says:
    2009/12/02 at 08:51

    Hai Sri­ran­gan,

    How do i dis­able the check box enabled state in your componenent ?

    Regards
    Martin

  7. Flex: CheckBox Tree ‹ 戈壁滩上的狗尾巴花 says:
    2010/03/07 at 17:14

    […] Check­Box­Tree Com­po­nent (Adobe Flex 3): http://srirangan.net/?p=56 […]

  8. Tweets that mention Srirangan » Blog Archive » CheckBoxTree Component (Adobe Flex 3) -- Topsy.com says:
    2010/05/15 at 23:01

    […] This post was men­tioned on Twit­ter by Den­nis Plu­cinik. Den­nis Plu­cinik said: Read­ing: Sri­ran­gan » Blog Archive » Check­Box­Tree Com­po­nent (Adobe Flex 3): http://bit.ly/dddw3J […]

Leave a Reply