Sahil Sahil - 1 month ago 20
jQuery Question

CheckBox dropdownlist with grouping in JSF

I need to have a checkbox dropdown list which is grouped and the group header should also be selectable. If u select the group header all the children under the group should be selected. I tried using the jquery ui dropdownchecklist with grouping but the group header was non selectable for it. Check out the image link below

http://i.stack.imgur.com/wbD7L.jpg

As u see, 'Timesheet' is non selectable. I need 'Timesheet' and 'Supplementary timesheet' to have a checkbox and if u click on it, all its children must be selected.

Answer

I see you're using DDCL, First you need to download an updated ui.dropdownchecklist.js from here (ui.dropdownchecklist with patch). It has been patched with an additional groupItemChecksWholeGroup Tag.

All you need to do is set the groupItemChecksWholeGroup : true.

See the code below

Code for ManagedBean

public ArrayList<SelectItem> cars;
SelectItemGroup g1=new SelectItemGroup("BMWs");
SelectItemGroup g2=new SelectItemGroup("Audi");
g1.setSelectItems(new SelectItem[]{new SelectItem("320D", "320D"),new SelectItem("520D","520D"),new SelectItem("620D","620D"),new SelectItem("720D","720D")});
g2.setSelectItems(new SelectItem[]{new SelectItem("A3","A3"),new SelectItem("A6","A6"),new SelectItem("Q3","Q3"),new SelectItem("Q5","Q5"),new SelectItem("Q7","Q7")});
cars = new ArrayList<SelectItem>();
cars.add(g1);
cars.add(g2);

Below is the code for the Html file

<h:selectManyListbox id="s1" value="">
<f:selectItem id="item1" itemLabel="All" itemValue="1" />
<f:selectItems value="#{myBean.cars}" />

Then add this jQuery script in your Html head

<script type="text/javascript">
$(document).ready(function() {
    $("#s1").dropdownchecklist({
        firstItemChecksAll : true,
        groupItemChecksWholeGroup : true,
        width : 250
    });
});

The result will be

enter image description here