How can I set border to panelGroup through selectedBooleanCheckBox

Question

I have selectBooleanCheckbox and h:panelGroup in xhtml page. I want set the border to panelGroup when box value is checked Here the code:

<p:fieldset legend="Параметры печати" style="margin:0px; margin-top: 0px; padding-bottom: 0px; border: 1px solid" >
            <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
                <p:selectBooleanCheckbox value="#{priceListUI.borderCheck}" />
                <h:outputText value="Border" />

</p:fieldset>

and <h:panelGroup>, i need set border to external block:

<h:panelGroup styleClass="ui-g-5 box"
                                  style="padding: 15px; border: solid 1px; font-size: 16px;height: 202px;min-width:340px; position: relative">
                        <h:panelGroup style="height:44px; line-height: 1.4em">
                            <p>#{product.product.name}</p>
                        </h:panelGroup>
                        <h:panelGroup styleClass="ui-g" id="svg" style="width: 100%; display: block;">
                            <svg class="barcode bc-#{product.productId}"
                                 style="position: absolute;right: 20px; top: 80px;"
                                 jsbarcode-textmargin="0"
                                 jsbarcode-fontoptions="bold">
                            </svg>
                        </h:panelGroup>
                        <h:panelGroup style="height: 20px; display: inline; position: absolute; bottom: 15px;">
                            Цена:  #{util.fDouble(product.product.type eq 2? product.sellingPrice * 1000.0: product.sellingPrice)} тг
                        </h:panelGroup>

                        <script>
                            draw('#{product.product.code}', #{product.productId});
                            function draw(code, productId) {
                                var arr = {
                                    displayValue: true,
                                    fontSize: 16,
                                    height: 24
                                };
                                if (code.length === 8 || code.length === 13) {
                                    arr["format"] = "EAN" + code.length;
                                }
                                var className = ".bc-" + productId.toString();
                                JsBarcode(className, code, arr);
                            }
                        </script>
                    </h:panelGroup>

In Bean class there are getters and setters for checkbox Can anyone help?

Answer 1

You can use the styleClass attribute on you panelgrid, and set the class according to the checkbox boolean value. Example:

<h:head>
    <style type="text/css">
        .myBorderClass {
            border: #000000 solid 10px;
        }
    </style>
</h:head>
<f:view>
    <h:form>

        <p:selectBooleanCheckbox value="#{myBean.check}">
            <p:ajax update="grid"/>
        </p:selectBooleanCheckbox>

        <h:panelGrid id="grid" styleClass="#{myBean.check ? 'myBorderClass':''}">
            <h:outputLabel>
                test label
            </h:outputLabel>
        </h:panelGrid>
    </h:form>
</f:view>