0

How to change grid footer style?

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

Rish gravatar image 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. 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>
delete flag offensive retag edit

3 Answers

Sort by » oldest newest most voted
1

answered 2017-11-23 11:44:01 +0800

hawk gravatar image hawk
2028 1 5
http://hawkphoenix.blogsp... ZK Team

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)">
link publish delete flag offensive edit

Comments

Useful advise, thank you.

Rish ( 2017-11-24 20:22:01 +0800 )edit
1

answered 2017-11-22 11:43:55 +0800

hawk gravatar image hawk
2028 1 5
http://hawkphoenix.blogsp... ZK Team

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>

image description

The way to add borders depends on what your <footer> contains. Please post a screenshot (you have enough karma now to upload) and zul.

link publish delete flag offensive edit

Comments

Thank you for your answer! My footer contains a table so I'll try to tune its styling. I've updated the post.

Rish ( 2017-11-22 19:02:58 +0800 )edit
0

answered 2017-11-22 20:18:21 +0800

Rish gravatar image Rish
101 2

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>

image description

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

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

Seen: 10 times

Last updated: Nov 23