mardi 28 avril 2015

dijit tree checkbox select all the child when parent clicked

I have created check box adjacent to each node of the tree using _createTreeNode. The fiddle link given below:

http://ift.tt/1QEguIp

Now my requirement is below: 1. get all the treenode name when "try it" button clicked. I am trying this using publish and subscribe. Pushing the the treenode name in javascript array when checked and when unchecked, looping through the array and splice it from the array. Is there any other better way to capture the checked node?

  1. Another requirement is, when the parent node is checked, all the child node should also gets checked. I have observed that the argument "checkbox" contain the child elelment so I have list child node name , but I am not able to check these child node checkbox. Please help me in resolve this issue.

Please find the Jsfiddle link code:

HTML:
 <div id="contentHere">
</div>
<div id="contentButton">
    <button>Try it</button>
</div>    

JavaScript:

      require([
    "dojo/_base/window", "dojo/store/Memory",
    "dijit/tree/ObjectStoreModel", 
    "dijit/Tree", "dijit/form/CheckBox",
    "dojo/domReady!"
], function(win, Memory, ObjectStoreModel, Tree){

    // Create test store, adding the getChildren() method required by ObjectStoreModel
    var myStore = new Memory({
        data: [
            { id: 'world', name:'The earth', type:'planet', population: '6 billion'},
            { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
                    timezone: '-1 UTC to +4 UTC', parent: 'world'},
                { id: 'EG', name:'Egypt', type:'country', parent: 'AF' },
                { id: 'KE', name:'Kenya', type:'country', parent: 'AF' },
                    { id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' },
                    { id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' },
                { id: 'SD', name:'Sudan', type:'country', parent: 'AF' },
                    { id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' },
            { id: 'AS', name:'Asia', type:'continent', parent: 'world' },
                { id: 'CN', name:'China', type:'country', parent: 'AS' },
                { id: 'IN', name:'India', type:'country', parent: 'AS' },
                { id: 'RU', name:'Russia', type:'country', parent: 'AS' },
                { id: 'MN', name:'Mongolia', type:'country', parent: 'AS' },
            { id: 'OC', name:'Oceania', type:'continent', population:'21 million', parent: 'world'},
            { id: 'EU', name:'Europe', type:'continent', parent: 'world' },
                { id: 'DE', name:'Germany', type:'country', parent: 'EU' },
                { id: 'FR', name:'France', type:'country', parent: 'EU' },
                { id: 'ES', name:'Spain', type:'country', parent: 'EU' },
                { id: 'IT', name:'Italy', type:'country', parent: 'EU' },
            { id: 'NA', name:'North America', type:'continent', parent: 'world' },
            { id: 'SA', name:'South America', type:'continent', parent: 'world' }
        ],
        getChildren: function(object){
            return this.query({parent: object.id});
        }
    });

    // Create the model
    var myModel = new ObjectStoreModel({
        store: myStore,
        query: {id: 'world'}
    });

    // Create the Tree.
    var tree = new Tree({
        model: myModel,
        getIconClass:function(item, opened){
                console.log('tree getIconClass', item, opened);
                console.log('tree item type', item.type);
            },

        onClick: function(item, node) {
                node._iconClass= "dijitFolderClosed";
                node.iconNode.className = "dijitFolderClosed";
                console.log("node : " +node);

            },
        _createTreeNode: function(args) {
            var tnode = new dijit._TreeNode(args);
            tnode.labelNode.innerHTML = args.label;

            var cb = new dijit.form.CheckBox();
            cb.placeAt(tnode.labelNode, "first");

            dojo.connect(cb, "onChange", function() {
                var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
                checkBoxClicked(treeNode.item);
                dojo.publish("/checkbox/clicked", [{
                    "checkbox": this,
                    "item": treeNode.item}]);
            });

            return tnode;
        }
    });
    tree.placeAt(contentHere);
    tree.startup();
    dojo.subscribe("/checkbox/clicked", function(message){
                console.log("you clicked:", store.getLabel(message.item));   
            });


});




Aucun commentaire:

Enregistrer un commentaire