Revision history [back]

click to hide/show revision 1
initial version

asked 2015-01-18 11:53:42 +0800

sjoshi gravatar image sjoshi flag of India

http://zkframeworkhint.bl...

How to Override GroupBox CSS which contain by Listbox

Please Have a Look on the attached imageimage description

This is a listbox with grouping but you can check grouping background creating issue anyone tell me which CSS i have to override so color of grouping will not create issue

How to Override GroupBox CSS which contain by Listbox

Please Have a Look on the attached imageimage description

This is a listbox with grouping but you can check grouping background creating issue anyone tell me which CSS i have to override so color of grouping will not create issue

                <div>
                    <listbox emptyMessage="@load(vm.getText('LABEL_NOROWS'))" multiple="true" model="@bind(vm.folderBilledFeeModel.groupModel)"
                        width="100%" height="100%" checkmark="true" span="true" vflex="1">
                        <listhead width="100%" sizable="true">
                            <listheader width="13%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEECODE'))" />
                            <listheader width="20%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEEDESC'))" />
                            <listheader width="25%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEECOMMENT'))" />
                            <listheader width="10%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEEAMOUNT'))" />
                            <listheader width="12%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_DUEAMOUNT'))" />
                            <listheader width="14%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_PAIDAMOUNT'))" />
                            <listheader width="5%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_PAID'))" />
                        </listhead>

                        <template name="model:group" var="groupNameList">
                            <listgroup style="background:red">
                                <zk forEach="${groupNameList}">
                                    <zk if="${each != '' || 'Paid' || 'Cancelled'}">
                                        <zk if="${c:startsWith(each,'Outstanding')}">
                                            <listcell sclass="temp">
                                                <label value="${each}" style="font-weight:bold;font-size:13px;color:red;"></label>
                                            </listcell>
                                        </zk>
                                        <zk if="${c:startsWith(each,'Date')}">
                                            <listcell span="2" sclass="temp">
                                                <label value="${each} "></label>
                                            </listcell>
                                        </zk>
                                        <zk if="${c:startsWith(each,'Due')}">
                                            <listcell span="2" sclass="temp">
                                                <label value="${each} "></label>
                                            </listcell>
                                        </zk>
                                        <zk if="${c:startsWith(each,'Bill')}">
                                            <listcell sclass="temp">
                                                <label value="${each}"></label>
                                                <custom-attributes a="${each}" />
                                            </listcell>
                                        </zk>
                                    </zk>

                                    <zk if="${c:startsWith(each,'id')}">
                                        <listcell>
                                            <custom-attributes billNum="${each}" />
                                            <div class="btn-group">
                                                <actionmenu>
                                                    <actionmenugroup title="Options" accesskey="a" btncolor="btn-link">
                                                        <actionmenuitem label="@load(vm.getText('AccountBillFeeDetail:CB_BILL_REPORT'))"
                                                            onClick="@command('printBill',billNumber = billNum)" iconclass="fa fa-print" accesskey="a">
                                                        </actionmenuitem>
                                                        <actionmenuitem label="@load(vm.getText('AccountBillFeeDetail:CB_ADJUST'))"
                                                            onClick="@command('adjustBill',billNumber = billNum)" tooltiptext="@load(vm.getText('AccountBillFeeDetail:CB_ADJUST'))"
                                                            iconclass="fa fa-trash">
                                                        </actionmenuitem>
                                                        <actionmenuitem label="GL Info" onClick="@command('showGlInfo')" iconclass="fa fa-refresh"
                                                            accesskey="r">
                                                        </actionmenuitem>
                                                        <actionmenuitem label="Fee Parms" onClick="@command('showFeeParms')"
                                                            tooltiptext="Fee Parms">
                                                        </actionmenuitem>
                                                    </actionmenugroup>
                                                </actionmenu>
                                            </div>
                                        </listcell>
                                    </zk>

                                    <zk if="${each eq 'Paid'}">
                                        <listcell sclass="temp">
                                            <headerpanel status="Paid"></headerpanel>
                                        </listcell>
                                    </zk>
                                    <zk if="${each eq 'Cancelled'}">
                                        <listcell sclass="temp">
                                            <headerpanel status="Cancelled"></headerpanel>
                                        </listcell>
                                    </zk>
                                </zk>
                            </listgroup>
                        </template>

                        <template name="model" var="accountBillFeeData">
                            <listitem width="100%">

                                <listcell>
                                    <label value="@load(accountBillFeeData.accountBillFee.feeCode)" />
                                </listcell>
                                <listcell>
                                    <label value="@load(accountBillFeeData.feeDesc)" />
                                </listcell>
                                <listcell>
                                    <label value="@load(accountBillFeeData.accountBillFee.feeComment)" />
                                </listcell>
                                <listcell>
                                    <currencybox value="@load(accountBillFeeData.accountBillFee.feeAmount)" readonly="true" />
                                </listcell>
                                <listcell>
                                    <currencybox value="@load(accountBillFeeData.dueAmount)" readonly="true" />
                                </listcell>
                                <listcell>
                                    <currencybox value="@load(accountBillFeeData.paidAmount)" readonly="true" />
                                </listcell>
                                <listcell>
                                    <zk if="${accountBillFeeData.paidInFullFlag == 'Paid'}">
                                        <x:i class="fa fa-check-circle"></x:i>
                                    </zk>
                                </listcell>
                            </listitem>
                        </template>
                        <listfoot sclass="tr-foot">
                            <listfooter></listfooter>
                            <listfooter></listfooter>
                            <listfooter></listfooter>
                            <listfooter align="center">
                                <label value="@load(c:cat('$',c:formatNumber(vm.sumTotalFeeAmount, '###,###,###,##0.00')))"
                                    style="padding:5px 10px;color: #000;font-size: 1.2em;border-top: 2px solid #ccc;">
                                </label>
                                <!-- <currencylabelbox value="@load(vm.sumTotalFeeAmount)" sclass="reset-this" /> -->
                            </listfooter>
                            <listfooter align="center">
                                <label value="@load(c:cat('$',c:formatNumber(vm.totalDueAmount, '###,###,###,##0.00')))"
                                    style="padding:5px 10px;color: #000;font-size: 1.2em;border-top: 2px solid #ccc;">
                                </label>
                                <!--    <currencylabelbox value="@load(vm.totalDueAmount)" sclass="reset-this" /> -->
                            </listfooter>
                            <listfooter align="center">
                                <label value="@load(c:cat('$',c:formatNumber(vm.totalPaidAmount, '###,###,###,##0.00')))"
                                    style="padding:5px 10px;color: #000;font-size: 1.2em;border-top: 2px solid #ccc;">
                                </label>
                                <!--    <currencylabelbox value="@load(vm.totalPaidAmount)" sclass="reset-this" /> -->
                            </listfooter>

                        </listfoot>
                    </listbox>
                </div>
            </div>

How to Override GroupBox Listbox Grouping CSS which contain by Listbox ?

Please Have a Look on the attached imageimage description

This is a listbox with grouping but you can check grouping background creating issue anyone tell me which CSS i have to override so color of grouping will not create issue

                <div>
                    <listbox emptyMessage="@load(vm.getText('LABEL_NOROWS'))" multiple="true" model="@bind(vm.folderBilledFeeModel.groupModel)"
                        width="100%" height="100%" checkmark="true" span="true" vflex="1">
                        <listhead width="100%" sizable="true">
                            <listheader width="13%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEECODE'))" />
                            <listheader width="20%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEEDESC'))" />
                            <listheader width="25%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEECOMMENT'))" />
                            <listheader width="10%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_FEEAMOUNT'))" />
                            <listheader width="12%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_DUEAMOUNT'))" />
                            <listheader width="14%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_PAIDAMOUNT'))" />
                            <listheader width="5%" label="@load(vm.getText('AccountBillFeeDetail:FIELD_PAID'))" />
                        </listhead>

                        <template name="model:group" var="groupNameList">
                            <listgroup style="background:red">
                                <zk forEach="${groupNameList}">
                                    <zk if="${each != '' || 'Paid' || 'Cancelled'}">
                                        <zk if="${c:startsWith(each,'Outstanding')}">
                                            <listcell sclass="temp">
                                                <label value="${each}" style="font-weight:bold;font-size:13px;color:red;"></label>
                                            </listcell>
                                        </zk>
                                        <zk if="${c:startsWith(each,'Date')}">
                                            <listcell span="2" sclass="temp">
                                                <label value="${each} "></label>
                                            </listcell>
                                        </zk>
                                        <zk if="${c:startsWith(each,'Due')}">
                                            <listcell span="2" sclass="temp">
                                                <label value="${each} "></label>
                                            </listcell>
                                        </zk>
                                        <zk if="${c:startsWith(each,'Bill')}">
                                            <listcell sclass="temp">
                                                <label value="${each}"></label>
                                                <custom-attributes a="${each}" />
                                            </listcell>
                                        </zk>
                                    </zk>

                                    <zk if="${c:startsWith(each,'id')}">
                                        <listcell>
                                            <custom-attributes billNum="${each}" />
                                            <div class="btn-group">
                                                <actionmenu>
                                                    <actionmenugroup title="Options" accesskey="a" btncolor="btn-link">
                                                        <actionmenuitem label="@load(vm.getText('AccountBillFeeDetail:CB_BILL_REPORT'))"
                                                            onClick="@command('printBill',billNumber = billNum)" iconclass="fa fa-print" accesskey="a">
                                                        </actionmenuitem>
                                                        <actionmenuitem label="@load(vm.getText('AccountBillFeeDetail:CB_ADJUST'))"
                                                            onClick="@command('adjustBill',billNumber = billNum)" tooltiptext="@load(vm.getText('AccountBillFeeDetail:CB_ADJUST'))"
                                                            iconclass="fa fa-trash">
                                                        </actionmenuitem>
                                                        <actionmenuitem label="GL Info" onClick="@command('showGlInfo')" iconclass="fa fa-refresh"
                                                            accesskey="r">
                                                        </actionmenuitem>
                                                        <actionmenuitem label="Fee Parms" onClick="@command('showFeeParms')"
                                                            tooltiptext="Fee Parms">
                                                        </actionmenuitem>
                                                    </actionmenugroup>
                                                </actionmenu>
                                            </div>
                                        </listcell>
                                    </zk>

                                    <zk if="${each eq 'Paid'}">
                                        <listcell sclass="temp">
                                            <headerpanel status="Paid"></headerpanel>
                                        </listcell>
                                    </zk>
                                    <zk if="${each eq 'Cancelled'}">
                                        <listcell sclass="temp">
                                            <headerpanel status="Cancelled"></headerpanel>
                                        </listcell>
                                    </zk>
                                </zk>
                            </listgroup>
                        </template>

                        <template name="model" var="accountBillFeeData">
                            <listitem width="100%">

                                <listcell>
                                    <label value="@load(accountBillFeeData.accountBillFee.feeCode)" />
                                </listcell>
                                <listcell>
                                    <label value="@load(accountBillFeeData.feeDesc)" />
                                </listcell>
                                <listcell>
                                    <label value="@load(accountBillFeeData.accountBillFee.feeComment)" />
                                </listcell>
                                <listcell>
                                    <currencybox value="@load(accountBillFeeData.accountBillFee.feeAmount)" readonly="true" />
                                </listcell>
                                <listcell>
                                    <currencybox value="@load(accountBillFeeData.dueAmount)" readonly="true" />
                                </listcell>
                                <listcell>
                                    <currencybox value="@load(accountBillFeeData.paidAmount)" readonly="true" />
                                </listcell>
                                <listcell>
                                    <zk if="${accountBillFeeData.paidInFullFlag == 'Paid'}">
                                        <x:i class="fa fa-check-circle"></x:i>
                                    </zk>
                                </listcell>
                            </listitem>
                        </template>
                        <listfoot sclass="tr-foot">
                            <listfooter></listfooter>
                            <listfooter></listfooter>
                            <listfooter></listfooter>
                            <listfooter align="center">
                                <label value="@load(c:cat('$',c:formatNumber(vm.sumTotalFeeAmount, '###,###,###,##0.00')))"
                                    style="padding:5px 10px;color: #000;font-size: 1.2em;border-top: 2px solid #ccc;">
                                </label>
                                <!-- <currencylabelbox value="@load(vm.sumTotalFeeAmount)" sclass="reset-this" /> -->
                            </listfooter>
                            <listfooter align="center">
                                <label value="@load(c:cat('$',c:formatNumber(vm.totalDueAmount, '###,###,###,##0.00')))"
                                    style="padding:5px 10px;color: #000;font-size: 1.2em;border-top: 2px solid #ccc;">
                                </label>
                                <!--    <currencylabelbox value="@load(vm.totalDueAmount)" sclass="reset-this" /> -->
                            </listfooter>
                            <listfooter align="center">
                                <label value="@load(c:cat('$',c:formatNumber(vm.totalPaidAmount, '###,###,###,##0.00')))"
                                    style="padding:5px 10px;color: #000;font-size: 1.2em;border-top: 2px solid #ccc;">
                                </label>
                                <!--    <currencylabelbox value="@load(vm.totalPaidAmount)" sclass="reset-this" /> -->
                            </listfooter>

                        </listfoot>
                    </listbox>
                </div>
            </div>
Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More