dijit Tree + checkbox - unable to select/unselect checkbox

Question

I'm trying to place a checkbox inside dijit.Tree by entering input html code as part of label value. And it displays ok but I can't check or uncheck it. As if click events are not bubbling/reaching input element.

Here is how I create my tree object.

myTree = new dijit.Tree({
    model: myModel,
    showRoot: false,            
    getLabel: function(item) {
        if (!item.root)
            return '<input type="checkbox" name="'+ item.name +'" id="'+ item.name +'" value="1" /> '+ item.name;
    }

}, "gridDiv");

How can I fix this ?

Answer 1

right now 2 choices come to my mind:

1. Use the new dojo's dgrid if you can. With this new grid you can use the Editor module and pass "checkbox" as a parameter and it would render a checkbox in your column. Check it out here . Then you can download it here and when you do, check out the "test" folder where you will find an example of what you want in "dgrid/test/tree.html".
2. in your current grid, edit your return statement for getLabel method and make it return a dojo style markup like <div data-dojo-type="dijit.form.CheckBox" ... ></div> and then after the tree's startup event do a dojo.parser.parse(tree.domNode) . This will parse only your grid's DOM node and will convert any dojo style markup into actual dojo objects.

I personally recommend, if you can, the first choice.

Luck,

Answer 2

I'd go with cbtree if I have check boxes in the tree. check here