How to control cascading behavior of a checkbox dynamically?

[Samit Majumdar]

Hi,

I have a requirement to control the cascading behavior of checkbox dynamically. In my program the selection and deselection of checkbox happens both by user clicks and programatically. Whenever user clicks on any of the nodes cascading behavior 'Down' is desirable but when the page loads based on some logic I don't want the cascading bahavior, so that already de-selected child nodes doesn't get selected again. But, on load of the page I cannot change the cascading behavior back to 'Down' and as a result of it whenever user again selects some other parent nodes, it's child nodes doesn't get selected automatically.

I am doing this:

<%

    String cascadeMode = "Down";

    String dataString = ""; //This is the JSON string having parent child relationship established 

    // and I am setting the value of 'selected' attribute for 'State' property either to true or false dynamically.

    if(/*based on some condition*/)

    {

    cascadeMode = "";

    }

%>

<div id="selectiontree" style="padding-right:2px">

</div>

<script>

    $( document ).ready( function () {

        $.jstree.defaults.core.themes.variant = "small";

        var dataS = "";

        $( '#selectiontree' ).jstree( {

            'plugins': ["checkbox"],

            checkbox: {

                three_state: false,

                cascade: '<%=cascadeMode%>'

            },

            'core': {

                "multiple": true,

                "animation": 1,

                'data': [

                    <%=dataString%>,

                ]

            }

        } )

                .on( 'changed.jstree', function ( e, data ) {

                    if ( data && data.selected && data.selected.length ) {

                     //doing something here

                    }

                } )

                .on( 'hover_node.jstree', function ( e, data ) {

                    //doing something here

                } )

    } );

    

    //Now, on load of the jsp page I want to set the cascading behavior back to "Down" always. It doesn't matter whether current value of "cascadeMode" is "Down" or not.

    //Basically I want to do something like this, but this is not working. What is the solution for it?

    $( '#selectiontree' ).jstree(true).defaults.checkbox.cascade = "down"; //What is the solution for it?

</script>

[Ivan Bozhanov]

Hi,

This is not currently possible, but you can try toggling the setting like this:
$( '#selectiontree' ).jstree(true).settings.checkbox.cascade = "down";
And this:
$( '#selectiontree' ).jstree(true).settings.checkbox.cascade = "";

However, I am not really sure this will work properly - try it out and see.

Best regards,
Ivan

[Samit Majumdar]

Hi Ivan,

This didn't work:

$( '#selectiontree' ).jstree(true).settings.checkbox.cascade = "down";

But, are you planning to add the ability to change the cascading behavior of the checkbox dynamically soon? This will help us a lot. And, if yes, do you have any tentative plan on your mind right now? Please let me know.

Thanks-

Samit 

[Ivan Bozhanov]

Sorry that did not work - it was off the top of my head. No, I do not plan on adding this any time soon - it will interfere with way too much logic. Usually if you need something like this it can be achieved in some other way or the logic is broken. Basically - you either need inheritance or you don't, that is why I do not think I will be adding such functionality any time soon, if at all.

Best regards,
Ivan

[Ivan Bozhanov]

Hi,

My initial solution should work properly.
In your code create the instance with "cascade" : "down", then attach to "init.jstree" and set data.instance.settings.chechbox.cascade = "", and then when the tree is done - change it back to "down" in a separate event handler (probably "ready" or "state_ready" ).

Best regards,
Ivan

неделя, 8 март 2015 г., 3:57:55 UTC+2, Samit Majumdar написа:

Hi Ivan,

I gave a lot of effort to this problem since our last discussion and couldn't come up with a solution yet now. Also, this is a part of a very big project and lot of other functionality has already been built up around this tree structure and we are in the very very advanced stage of this functionality and we are about to deliver it to the client in a week's time. And the inability to dynamically control the behavior of the jstree (or controlling the inheritance property, as you mentioned) is bugging us continuously as we are sure that customer is going to come back with this issue and we don't have a solution to this.

Hence, please help me out in resolving this issue. I am just trying to describe the issue again so that if you can think of any other solution to this.

When the tree loads first time, it selects every check box by default. Based on the selected items user expects some report outputs. User will not select/deselect everything in one session. I have just shown a part of a very very big tree. The tree might have up to 6,000 to 7,000 nodes/child nodes. User will select some part of the tree and save the information. We are storing the information in a table and when the user comes back next day, he/she finds the previous selection already in place. He/She will again do some selection and deselection and this process continues till the user hits a 'Finalize' button. After finalization we lock the interface so that he is not able to do further selection/deselection.

Now, as this is a huge tree, we are loading the tree page with cascade: 'down', as otherwise user have to go and click on each and every node (6,000 or 7,000 of them are there) and obviously that is not desirable. On load of the page we are forming our datastring in such a way so that 'selected' attribute is either set to true or false.But because of  cascade: 'down' everything is getting selected like this:

 

And, this is reflecting wrong information to the user. Although 5 of the highlighted nodes above user didn't select it is coming back as selected, as we have the 'cascade' mode set as 'down'. So, we need an ability so that during the load of the JSP page the cascade mode is '<blank>' and once the tree/page is loaded we set the 'cascade' mode of the tree back to 'down' dynamically.

Please suggest something.

Thanks-

Samit 

--
You received this message because you are subscribed to the Google Groups "jsTree" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jstree+unsubscribe@googlegroups.com.
To post to this group, send email to jst...@googlegroups.com.
Visit this group at http://groups.google.com/group/jstree.
For more options, visit https://groups.google.com/d/optout.

[Samit Majumdar]

Ivan,

Please see the code snippet bellow. Some lines are commented out. I have tried out all those commented options with different combinations as well. Nothing worked out. Can you please suggest or point out what wrong I am doing here?

$( document ).ready( function () {

            $.jstree.defaults.core.themes.variant = "small";

            $( '#selectiontree' ).jstree( {

                'plugins': ["checkbox"],

                checkbox: {

                    three_state: false,

                    cascade: ''

                },

                'core': {

                    "multiple": true,

                    "animation": 1,

                    'data': [

                        <%=dataString%>,

                    ]

                }

            } )

//                    .on( 'ready.jstree', function ( e, data ) {

//                    .bind( 'ready.jstree', function ( e, data ) {

                    .bind( 'ready.jstree', function (  ) {

//                            data.instance.settings.checkbox.cascade = 'down';

//                        $( this ).jstree().settings.checkbox.cascade = 'down';

//                        $( '#selectiontree' ).jstree().settings.checkbox.cascade = 'down';

                        $( '#selectiontree' ).jstree( true ).settings.checkbox.cascade = 'down';

                    } )

        } ) ;

Thanks-

Samit

To unsubscribe from this group and stop receiving emails from it, send an email to jstree+un...@googlegroups.com.

[Ivan Bozhanov]

I do not see the code I suggested? Initialize the tree with "down", then on "init.jstree" set it to an empty string and then once you believe you should - that event depends on your logic - set it back to "down". I do not have the time to write this for you now, I will try and write it for you of you can't tomorrow. However I really think the instructions are clear.

Best regards,
Ivan

[Samit Majumdar]

Hi Ivan,

I tried the following as well and it didn't work out. I am not sure what mistake I am doing here or not following as per your instruction.

<div id="selectiontree" style="padding-right:2px">

    </div>

<script>

$( document ).ready( function () {

            

            $.jstree.defaults.core.themes.variant = "small";

            

            $( '#selectiontree' ).jstree( {

                'plugins': ["checkbox"],

                checkbox: {

                    three_state: false,

                    cascade: 'down'

                },

                'core': {

                    "multiple": true,

                    "animation": 1,

                    'data': [

                        <%=dataString%>,

                    ]

                }

            } )

                    .on( "init.jstree", function ( e, data ) {

                        alert( 'inside init' );

//                        $( '#selectiontree' ).jstree( true ).checkbox.cascade = '';

//                        $( '#selectiontree' ).jstree( true ).settings.checkbox.cascade = '';

//                        $.jstree.settings.checkbox.cascade = '';

data.instance.settings.checkbox.cascade = '';

                    } )

                    

                     .on( "ready.jstree", function ( e, data ) {

        alert( 'Inside ready ' );

        //$( '#selectiontree' ).jstree( true ).settings.checkbox.cascade = '';

        data.instance.settings.checkbox.cascade = 'down';

                    } )

                  

            $( '#selectiontree' ).jstree(true).trigger("init"); //If I do not call this I see that init.jstree is not getting called.

        } );

It has become a kind of urgent now and I would appreciate if you could help me out on this at soon as possible.

Thanks & Regards-

Samit

To unsubscribe from this group and stop receiving emails from it, send an email to jstree+un...@googlegroups.com.

To post to this group, send email to jst...@googlegroups.com.
Visit this group at http://groups.google.com/group/jstree.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "jsTree" group.

To unsubscribe from this group and stop receiving emails from it, send an email to jstree+un...@googlegroups.com.

[Ivan Bozhanov]

OK, I finally had a few minutes - here is your demo:
http://jsfiddle.net/DGAF4/369/

You can see that initially the selected checkbox will not cascade its state down, but half a second later, if you click the root node - it will.

I am using a timeout - you can use an event - it is up to you - I am not sure ready.jstree is the proper event to use in your case - it all depends - basically execute the stuff I do in the timeout when your tree is done loading. If ready.jstree is fine for you - use it.

Make sure the init.jstree handler is attached PRIOR to creating the tree, triggering it manually makes absolutely no sense - by then it is already too late.

Anyway - the above demo does exactly what you need.

Best regards,
Ivan

[Samit Majumdar]

Ivan,

It works PERFECTLY as I wanted it to work.

Thanks a LOT for helping me out at this critical stage of my requirement.

Thanks and regards-

Samit