Revision history [back]

click to hide/show revision 1
initial version

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

Rish gravatar image Rish

How to change grid footer style?

Hello everybody! I need to show 8 liners 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 default grid footer style?

How to change grid footer style?

Hello everybody! everybody!

I need to show 8 liners 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 default grid footer style?

How to change grid footer style?

Hello everybody!

I need to show 8 lines in my grid footer. So it would look much nicer if there were borders to show rows and columns. columns.

Could anybody give me an idea how to change the default grid footer style?

How to change grid footer style?

Hello everybody!

I need to show 8 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 what property to change. That is

td.z-footer { padding:4px 4px 4px 6px; border: 0.1px solid #DCDCDC; border-color: #afbad5; background-color: #dfe4f0; }

How to change grid footer style?

Hello everybody!

I need to show 8 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 UPD

Well, I found what property to change. change to draw borders of every footer cell. That is

td.z-footer { padding:4px 4px 4px 6px; border: 0.1px solid #DCDCDC; border-color: #afbad5; background-color: #dfe4f0; }with border, border-color and background-color. I took the header colors, so it looks nice.

How to change grid footer style?

Hello everybody!

I need to show 8 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 what td.z-footer property to change to draw borders of every footer cell. That is td.z-footer with border, border-color and background-color. I took the header colors, so it looks nice.

How to change grid footer style?

Hello everybody!

I need to show 8 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. That is td.z-footer with border, border-color and background-color. I took the header colors, so it looks nice.

td.z-footer {
    border: 0.1px solid #DCDCDC;
    border-color: #afbad5;
    background-color: #dfe4f0;
    }

How to change grid footer style?

Hello everybody!

I need to show 8 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. That is td.z-footer with border, border-color and background-color. I took the header colors, so it looks nice.

td.z-footer {
    border: 0.1px solid #DCDCDC;
    border-color: #afbad5;
    background-color: #dfe4f0;
    }

How to change grid footer style?

Hello everybody!

I need to show 8 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 the same footer.

How to change grid footer style?

Hello everybody!

I need to show 8 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 the same footer.

UPD 2

Each footer contains a table with labels, decimallabels and rangeddecimalboxes. image description

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>

How to change grid footer style?

Hello everybody!

I need to show 8 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 lines, and I need the same footer.a footer with borders around last 3 lines.

UPD 2

Each footer contains a table with labels, decimallabels and rangeddecimalboxes. image description

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>

How to change grid footer style?

Hello everybody!

I need to show 8 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. image description

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>
Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More