How to change grid footer style?

asked 2017-11-22 00:35:09 +0800

Rish
101 ● 2

updated 2017-11-22 19:08:02 +0800

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>