<div id="product-picker-container-#{cc.attrs.unitId}" class="product-picker-container">
            <p:dataTable var="p" rowKey="#{p.childNo}" rowSelectMode="checkbox" value="#{cc.attrs.products}" selection="#{cc.attrs.selection}">

                <p:ajax event="toggleSelect" oncomplete="#{cc.attrs.onchange}" process="@this" partialSubmit="true"/>
                <p:ajax event="rowSelectCheckbox" oncomplete="#{cc.attrs.onchange}" process="@this" partialSubmit="true"/>
                <p:ajax event="rowUnselectCheckbox" oncomplete="#{cc.attrs.onchange}" process="@this" partialSubmit="true"/>

                <p:column selectionMode="multiple"/>

<script>
                /* transport picker popup state across reloads */
                var picker = $('#product-picker-container-#{cc.attrs.unitId}');
                if(window.picker_state) {
                    picker.css('max-height', 'initial');
                }

                /* open / close picker */
                if(!window.toggle_picker) {
                    window.toggle_picker = function() {
                        var pos = $(this).position();
                        var h = $(this).outerHeight();
                        var picker = $(this).parent().find('.product-picker-container');

                        if(picker.css('max-height') == '0px')
                            picker.css('max-height', 'initial');
                        else
                            picker.css('max-height', '0px');

                        if(!window.picker_state){
                            window.picker_state = {};
                            window.picker_state = true;
                        } else {
                            window.picker_state = false;
                        }
                    };
                    $(document).on('click','.product-picker-trigger', window.toggle_picker);
                }
            </script>