-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hello everybody!
I need to show 7 lines in my grid footer. So it would look much nicer if there were borders to show rows and columns.
Could anybody give me an idea how to change the default grid footer style?
UPD
Well, I found td.z-footer property to draw borders of every footer cell. I took the header colors, so it looks nice.
td.z-footer {
border: 0.1px solid #DCDCDC;
border-color: #afbad5;
background-color: #dfe4f0;
}
But that does not draw lines. The header consists of several lines, and I need a footer with borders around last 3 lines.
UPD 2
Each footer contains a table with labels, decimallabels and rangeddecimalboxes.
Here's the zul
<style>
.documentGrid .z-grid-body {
background: none repeat scroll 0 0 white;
border: 0 none;
overflow-x: auto;
overflow-y: scroll;
width: 100%;
}
.part-cell {
font-weight: 700;
}
.programm-cell {
font-weight: 500;
}
td.z-footer {
padding:4px 4px 4px 6px;
border: 0.1px solid #DCDCDC;
border-color: #afbad5;
background-color: #dfe4f0;
}
</style>
<footer>
<h:table cellpadding="0" cellspacing="0" width="100%">
<h:tr style="height:23px;">
<h:td width="100%" align="right">
<decimallabel sclass="part-cell" value="@load(vm.editableValue.nirWas0)"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td width="100%" align="right">
<decimallabel sclass="part-cell" value="@load(vm.editableValue.okrWas0)"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td width="100%" align="right">
<decimallabel sclass="part-cell" value="@load(vm.editableValue.niokrWas0)"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td width="100%" align="right">
<decimallabel sclass="part-cell" value="@load(vm.editableValue.otherWas0)"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td>
<rangeddecimalbox sclass="decimalbox-cell" hflex="1" minValue="0" maxValue="999999999" value="@bind(vm.editableValue.limitNiokrWas0)"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td>
<rangeddecimalbox hflex="1" minValue="0" maxValue="999999999" value="@bind(vm.editableValue.limitOthersWas0)"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td align="right">
<decimallabel sclass="part-cell" value="@load(vm.editableValue.totalWas0 - (vm.editableValue.limitNiokrWas0 + vm.editableValue.limitOthersWas0))"/>
</h:td>
</h:tr>
</h:table>
</footer>
<footer>
<h:table cellpadding="0" cellspacing="0" width="100%">
<h:tr style="height:23px;">
<h:td width="100%" align="right">
<decimallabel sclass="part-cell" value="@load(vm.getDifference(vm.editableValue.nirWas0,vm.editableValue.nirBecome0))"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td width="100%" align="right">
<decimallabel sclass="part-cell" value="@load(vm.getDifference(vm.editableValue.okrWas0,vm.editableValue.okrBecome0)))"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td width="100%" align="right">
<decimallabel sclass="part-cell" value="@load(vm.getDifference(vm.editableValue.niokrWas0,vm.editableValue.niokrBecome0))"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td width="100%" align="right">
<decimallabel sclass="part-cell" value="@load(vm.getDifference(vm.editableValue.otherWas0,vm.editableValue.otherBecome0))"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td align="right">
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td align="right">
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td align="right">
</h:td>
</h:tr>
</h:table>
</footer>
Here is an example:
td.z-footer div{
border-bottom: 0.5px solid #afbad5;
}
<foot>
<footer>footer1</footer>
<footer>
<div>line 1 </div>
<div>line 2 </div>
<div>line 3 </div>
</footer>
</foot>
The way to add borders depends on what your <footer> contains. Please post a screenshot (you have enough karma now to upload) and zul.
Well, I've changed some styling to draw lines. Now tables inside a footer's td take whole place, so I just added border-top to some table cells.
<style>
td.z-footer {
padding:0px 0px 0px 0px;
border: 0.1px solid #afbad5;
background-color: #dfe4f0;
}
div.z-footer-cnt table tr td{
padding:0px 4px 0px 6px;
}
div.z-footer-cnt table {
padding-top: 4px;
padding-bottom: 4px;
}
</style>
<h:tr style="height:23px;">
<h:td style="border-top: 0.1px solid #afbad5;">
<label value="Лимиты Минфина НИОКР"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td style="border-top: 0.1px solid #afbad5;">
<label value="Лимиты Минфина Прочие"/>
</h:td>
</h:tr>
<h:tr style="height:23px;">
<h:td style="border-top: 0.1px solid #afbad5;">
<label value="Разница (Факт - Лимиты)"/>
</h:td>
</h:tr>
</h:table>
</footer>
Since all <tr>
s look similar you can reduce its complexity by using a template like:
Define:
<template name="footerRow" >
<h:tr style="height:23px;">
<h:td width="100%" align="right">
<label sclass="part-cell" value="@init(value)"/>
</h:td>
</h:tr>
</template>
apply:
<apply template="footerRow" value="@init(vm.editableValue.otherWas0)">
<apply template="footerRow" value="@init(vm.editableValue.nirWas0)">
Asked: 2017-11-22 00:35:09 +0800
Seen: 19 times
Last updated: Nov 23 '17