[Dojo-interest] dijit.Tree checkbox

[Stephen Ince]

Hi,

  I am trying to add a checkbox to a dijit.Tree. It displays correctly but does not stay click. I put a debug statement "onClick" but does stay clicked after the debug statement.

 

 Any help would be greatly appreciated.

 

 

json data:

label: "performance <input type='checkbox' name='report' />",

 

html:

<div dojoType="dojo.data.ItemFileReadStore" jsId="performanceStore" data="performanceData">

</div>

<div dojoType="dijit.tree.TreeStoreModel" jsId="performanceModel" store="performanceStore"

query="{type:'root'}" rootId="performanceRoot" childrenAttrs="children">

</div>

<div dojoType="dijit.Tree" id="performanceTree" style="padding: 3px;" model="performanceModel" showRoot="true" persist="true">

<script type="dojo/method" event="getIconStyle" args="item, opened">

  return {

     height: "0px",

     width: "0px"

   };

</script>

<script type="dojo/method" event="_createTreeNode" args="args">

   var tnode = new dijit._TreeNode(args);

   tnode.labelNode.innerHTML = args.label;

   return tnode;

</script>

<script type="dojo/method" event="onClick" args="item">

   // the node is clicked before

alert("Execute of node " + performanceStore.getLabel(item) );

   // the node is unchecked after

</script>

</div>

 

 

[Stephen Ince]

Hi,
I am trying to add a checkbox to a dijit.Tree. It displays correctly

but does not stay clicked. I put a debug statement "onClick" event but

does stay clicked after the debug statement.

Any help would be greatly appreciated.

Steve

json data:
label: "performance <input type='checkbox' name='report' />",

html:
<div dojoType="dojo.data.ItemFileReadStore" jsId="performanceStore"
data="performanceData">
</div>
<div dojoType="dijit.tree.TreeStoreModel" jsId="performanceModel"
store="performanceStore"
query="{type:'root'}" rootId="performanceRoot" childrenAttrs="children">
</div>
<div dojoType="dijit.Tree" id="performanceTree" style="padding: 3px;"
model="performanceModel" showRoot="true" persist="true">

<script type="dojo/method" event="_createTreeNode" args="args">
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
return tnode;
</script>
<script type="dojo/method" event="onClick" args="item">
// the node is clicked before
alert("Execute of node " + performanceStore.getLabel(item) );
// the node is unchecked after
</script>
</div>

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
Dojo-i...@mail.dojotoolkit.org
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[Rishson]

I have a solution for checkboxes in the dijit tree.
It involves extending the tree to add checkboxes from the bound data store.
I can share bits of the architecture if you like?

Basically, in the PostCreate of the treenode class, you need to do:

var attrs = {'class' : "dijitTreeCheckbox"};
var checkBoxNode = dojo.create('span', attrs);
dojo.place(checkBoxNode, this.contentNode, "first");

Also note that the tree allows you to specify your own treenode class by
overriding:

_createTreeNode: function(/*Object*/ args){

--
View this message in context: http://dojo-toolkit.33424.n3.nabble.com/dijit-Tree-checkbox-tp1613970p1614882.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.

[Stephen Ince]

Rishson,
I need some more details on your solution. Can you send me a complete or
more detailed solution. Example of the html.

Steve

[Stephen Ince]

Here is my solution. I did see some overly complicated examples. It looks you have to extend the javascript classes via javascript and the not using the "html" "dojo/methods". I was getting "inherited" unknown variable when I tried to use the html method.

 

solution

 

html:

<script type="text/javascript" src="/loadgeneral/js/dojox_checkboxTree.js'></script>

<div dojoType="dojo.data.ItemFileReadStore" jsId="performanceStore" data="performanceData">

</div>

<div dojoType="dijit.tree.TreeStoreModel" jsId="performanceModel" store="performanceStore"

query="{type:'root'}" rootId="performanceRoot" childrenAttrs="children">

</div>

<div dojoType="dijit.CheckboxTree" id="performanceTree" style="padding: 3px; padding-top: 30px;" model="performanceModel" showRoot="true" persist="true">

</div>

 

javascript:  (/loadgeneral/js/dojox_checkboxTree.js)

 

dojo.require("dijit.Tree");

dojo.provide("dijit.CheckboxTree");

dojo.declare("dijit.CheckboxTree", dijit.Tree, {

_onClick: function(node,evt){

if(evt.target && evt.target.nodeName=='INPUT') {

return;

}

return this.inherited(arguments);

},

onClick: function(item,node){

node.checkNode.checked = !node.checkNode.checked;

},

 

// create a <input type="checkbox" name="id" /> label

_createTreeNode: function (node) {

var item = node.item;

var itemId = item.id;

var tnode = new dijit._TreeNode(node);

var chk = dojo.doc.createElement('input');

chk.type = 'checkbox';

chk.id = itemId;

chk.name = itemId;

chk.checked = false;

tnode.labelNode.innerHTML = '';

tnode.labelNode.appendChild( chk );

tnode.labelNode.appendChild( dojo.doc.createTextNode(node.label) );

tnode.checkNode = chk;

return tnode;

}

});

// end dijit.CheckboxTree

 

----- Original Message -----

From: "Rishson" <nab...@iamthepeanut.com>

To: <dojo-i...@mail.dojotoolkit.org>

Sent: Friday, October 01, 2010 10:14

Subject: Re: [Dojo-interest] dijit.Tree checkbox

>

http://dojotoolkit.org/support/faq