Check All box for Richfaces Treenode

Question

Trying to create a checkbox to check all items in a treenode. I'm kind of new to JSF so I'm pretty stumped as how to implement this on a tree instead of a table. This is the current code:

<rich:panel style="width:400px;">           
            <h:selectBooleanCheckbox id="vehicleAll" onclick="selectAllModel(this.checked);">
            </h:selectBooleanCheckbox>
            <h:outputText value="  ALL"/>
        <rich:tree id="vehicleTree" switchType="client" 
            value="#{applicationScope.demoModelGrpList}" var="node" ajaxKeys="#{null}"
            binding="#{demoRptController.vehicleUiTree}"
            nodeSelectListener="#{demoRptController.selectionListener}"
            changeExpandListener="#{demoRptController.expansionListener}"
            ajaxSubmitSelection="true">
            <rich:treeNode id="modelNode" ajaxSingle="true" 
                icon="/images/pixel_node.gif" iconLeaf="/images/pixel_node.gif">
                <h:selectBooleanCheckbox id="cbxNode" value="#{node.selected}" style="position:relative; float:left; left:-22px;" class="vcBx">
                </h:selectBooleanCheckbox>
                <h:outputText value="#{node.name}" style="position:relative; float:left; left:-16px;"/>
            </rich:treeNode>
        </rich:tree>
    </rich:panel>

Script is:

<script type="text/javascript">
<![CDATA[
function selectAllModel(checks) {
    alert("calling select all");
    var array = document.getElementsByTagName("input");
    for(var i = 0; i < array.length; i++)
    {
       if(array[i].type == "checkbox")
       {
          if(array[i].className == "vcBx")
           {
            array[i].checked = checks;
           }
       }
    }
}
    ]]>
</script>

I placed the alert there for testing purposes; it's not even being called. I'm pretty sure I have my syntax correct so this has me scratching my head.

Just use jquery or javascript for this. Have all the checkbox in your tree have styleClass=foo, on the onclick of the main check box, invoke a javascript function that select all input element type checkbox class=foo to have the same selected/deselected value of the main checkbox — Thang Pham, Jul 04 '13 at 12:59
Doesn't seem to work in my case, tried doing something like: var inputs = document.getElementsByTagName('input'); for (var i=0;i — Mark M, Jul 05 '13 at 00:45
This is a simple problem using jquery to to select checkbox, Stackoverflow already provide lots of answers for this, please research. This is a promising answer from first glance http://stackoverflow.com/questions/14925874/checking-all-checkboxes-jquery — Thang Pham, Jul 05 '13 at 04:39
Sadly I cannot use jQuery for this, or I would have probably solved it long ago. I've been on this problem for two days now and I really can't seem to find a solution that works using only java/javascript. The fact that it has to be a treenode really complicates things as methods that normally work for selecting by class or id don't seem to work. Assigning a name also gives me a duplicate name error due to the nature of the treenode. — Mark M, Jul 05 '13 at 04:57
I've discovered a major problem; the function isn't being called at all! I'll edit my original with my new script. — Mark M, Jul 05 '13 at 06:17

score 0 · Accepted Answer · answered Jul 09 '13 at 03:46

Answering my own question for the benefit of anyone having the same problem.

Apparently I can't use select for a function name. That solves one problem; I simply had to rename the function and now it's being called.

To solve the other (checkboxes not being selected), I had to look up the specific ids being generated by the treenode. Seeing that only one digit changes pertaining to the index of the node, I setup the loop specified below to select the checkboxes one by one and change them according to the status of the ALL checkbox. A bit convoluted, but it's the best way I've found to satisfy what needed to be done. From my experiments, selecting by input or type checkbox doesn't seem to work with grabbing h:selectBooleanCheckbox. Please feel free to correct me if I'm wrong on this.

Alternatively, you can use indexOf using the id for the node, but I only needed the parent nodes selected and none of the children, as doing this also selected all the child nodes.

function ccAllModel(checks) {
    for (var i = 0; i < 9; i++) {
        var vehicleId = "demoRptForm:vehicleTree:" + i + "::cbxNode";
        var array = document.getElementById(vehicleId);
        array.checked = checks.checked;
    }
}

Check All box for Richfaces Treenode

1 Answers1

Linked