Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
From this zul code ...
<grid>
<rows>
<row>
<auxhead>
<auxheader label="Verband"/>
<auxheader label="Verein"/>
<auxheader label="Spieler"/>
</auxhead>
<label value="DFB"/>
<label value="BVB"/>
<label value="Wuff, Willi"/>
</row>
<row>
<auxhead>
<auxheader label="Datum"/>
<auxheader label="Verein"/>
<auxheader label="Gegner"/>
<auxheader label="Ergebnis"/>
</auxhead>
<label value="01.01.2020"/>
<label value="FCB"/>
<label value="Müller, Thomas"/>
<label value="2 : 3"/>
</row>
<row>
<label value="01.01.2020"/>
<label value="DSC"/>
<label value="Meier, Uwe"/>
<label value="2 : 3"/>
</row>
</rows>
</grid>
... ZK is generating an unnecessary row with one column containing an empty div block like ...
<tr id="jVWSz" class="z-row">
<td id="jVWS00-chdextr" class="z-row-inner">
<div id="jVWS00-cell" class="z-row-content"></div>
</td>
</tr>
... and ...
<tr id="jVWS91" class="z-row z-grid-odd">
<td id="jVWSb1-chdextr" class="z-row-inner">
<div id="jVWSb1-cell" class="z-row-content"></div>
</td>
</tr>
... above each AuxHeader. You can test this in ZK Sandbox (using web developer tools of your browser). Is there a way to prevent this?
Thanks for your reply.
What I'm trying to achieve is a table that looks like this: h t t p s : / / i.imgur.com/wmn4EeT.png
Here is the html which is legit according to w3c validator:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table with two different headers.</title>
<style>
.result {
color: black;
border: 0px;
border-collapse:collapse;
}
.result tr th, .result tr td {
text-align: center;
padding-left: 6pt;
padding-right: 6pt;
border: 1px solid #000;
}
.result tr.blank td {
border: 0px;
}
</style>
</head>
<body>
<table class="result">
<tr>
<th>Player Header 1</th>
<th>Player Header 2</th>
<th>Player Header 3</th>
</tr>
<tr>
<td>Player Data 1</td>
<td>Player Data 2</td>
<td>Player Data 3</td>
</tr>
<tr>
<th>Match Header 1</th>
<th>Match Header 2</th>
<th>Match Header 3</th>
<th>Match Header 4</th>
<th>Match Header 5</th>
</tr>
<tr>
<td>Match Data 1</td>
<td>Match Data 2</td>
<td>Match Data 3</td>
<td>Match Data 4</td>
<td>Match Data 5</td>
</tr>
<tr>
<td>Match Data 1</td>
<td>Match Data 2</td>
<td>Match Data 3</td>
<td>Match Data 4</td>
<td>Match Data 5</td>
</tr>
<tr>
<td>Match Data 1</td>
<td>Match Data 2</td>
<td>Match Data 3</td>
<td>Match Data 4</td>
<td>Match Data 5</td>
</tr>
<tr>
<th>Player Header 1</th>
<th>Player Header 2</th>
<th>Player Header 3</th>
</tr>
<tr>
<td>Player Data 1</td>
<td>Player Data 2</td>
<td>Player Data 3</td>
</tr>
<tr>
<th>Match Header 1</th>
<th>Match Header 2</th>
<th>Match Header 3</th>
<th>Match Header 4</th>
<th>Match Header 5</th>
</tr>
<tr>
<td>Match Data 1</td>
<td>Match Data 2</td>
<td>Match Data 3</td>
<td>Match Data 4</td>
<td>Match Data 5</td>
</tr>
<tr>
<td>Match Data 1</td>
<td>Match Data 2</td>
<td>Match Data 3</td>
<td>Match Data 4</td>
<td>Match Data 5</td>
</tr>
</table>
</body>
</html>
ZK generates a correct tr for the auxheader. That's why I don't think your assumption is correct, @MDuchemin. The only problem is the unnecessary tr above the auxheader-tr:
<table id="lTUA6-cave" style="table-layout:fixed;" width="100%">
<tbody id="lTUA7" class="z-rows">
<!-- unnecessary and unwanted row below -->
<tr id="lTUA21" class="result z-row">
<td id="lTUA31-chdextr" class="z-row-inner">
<div id="lTUA31-cell" class="z-row-content"/>
</td>
</tr>
<tr id="lTUA31" class="z-auxhead" style="text-align:left;">
<th id="lTUA41" class="z-auxheader">
<div id="lTUA41-cave" class="z-auxheader-content">Player Header 1</div>
</th>
<th id="lTUA51" class="z-auxheader">
<div id="lTUA51-cave" class="z-auxheader-content">Player Header 2</div>
</th>
<th id="lTUA61" class="z-auxheader">
<div id="lTUA61-cave" class="z-auxheader-content">Player Header 3</div>
</th>
<th id="lTUA71" class="z-auxheader">
<div id="lTUA71-cave" class="z-auxheader-content">Player Header 4</div>
</th>
<th id="lTUA81" class="z-auxheader">
<div id="lTUA81-cave" class="z-auxheader-content">Player Header 5</div>
</th>
</tr>
<tr>
<td id="lTUA91-chdextr" class="z-row-inner">
<div id="lTUA91-cell" class="z-row-content">
<span id="lTUA91" class="z-label">Player Data 1</span>
</div>
</td>
<td id="lTUAa1-chdextr" class="z-row-inner">
<div id="lTUAa1-cell" class="z-row-content">
<span id="lTUAa1" class="z-label">Player Data 2</span>
</div>
</td>
<td id="lTUAb1-chdextr" class="z-row-inner">
<div id="lTUAb1-cell" class="z-row-content">
<span id="lTUAb1" class="z-label">Player Data 3</span>
</div>
</td>
</tr>
<tr id="lTUAe1" class="result z-row z-grid-odd">
<td id="lTUAf1-chdextr" class="z-row-inner">
<div id="lTUAf1-cell" class="z-row-content"/>
</td>
</tr>
<tr id="lTUAf1" class="z-auxhead" style="text-align:left;">
<th id="lTUAg1" class="z-auxheader">
<div id="lTUAg1-cave" class="z-auxheader-content">Match Header 1</div>
</th>
<th id="lTUAh1" class="z-auxheader">
<div id="lTUAh1-cave" class="z-auxheader-content">Match Header 2</div>
</th>
<th id="lTUAi1" class="z-auxheader">
<div id="lTUAi1-cave" class="z-auxheader-content">Match Header 3</div>
</th>
<th id="lTUAj1" class="z-auxheader">
<div id="lTUAj1-cave" class="z-auxheader-content">Match Header 4</div>
</th>
<th id="lTUAk1" class="z-auxheader">
<div id="lTUAk1-cave" class="z-auxheader-content">Match Header 5</div>
</th>
</tr>
<tr>
<td id="lTUAo1-chdextr" class="z-row-inner">
<div id="lTUAo1-cell" class="z-row-content">
<span id="lTUAo1" class="z-label">Match Data 1</span>
</div>
</td>
<td id="lTUAp1-chdextr" class="z-row-inner">
<div id="lTUAp1-cell" class="z-row-content">
<span id="lTUAp1" class="z-label">Match Data 2</span>
</div>
</td>
<td id="lTUAq1-chdextr" class="z-row-inner">
<div id="lTUAq1-cell" class="z-row-content">
<span id="lTUAq1" class="z-label">Match Data 3</span>
</div>
</td>
<td id="lTUAr1-chdextr" class="z-row-inner">
<div id="lTUAr1-cell" class="z-row-content">
<span id="lTUAr1" class="z-label">Match Data 4</span>
</div>
</td>
<td id="lTUAs1-chdextr" class="z-row-inner">
<div id="lTUAs1-cell" class="z-row-content">
<span id="lTUAs1" class="z-label">Match Data 5</span>
</div>
</td>
</tr>
<!-- ... -->
</tbody>
<tbody class="z-grid-emptybody">
<tr>
<td id="lTUA6-empty" style="display:none">
<div id="lTUA6-empty-content"/>
</td>
</tr>
</tbody>
</table>
Hi there,
This is actually a non-standard use of the Auxheaders causing a parsing issue, which result in the extra row.
Auxheaders are "additional headers" (auxiliary headers), which are meant to be added in addition to column headers. Each Auxheaders will act as an extra row in the header block.
Regarding the parsing error:
Grid is rendering content as an html <table>
Each auxhead is a row and generates a <tr>
each auxheader is a cell in that row, and generates a <td>
By putting a auxhead in a row, the result would be:
<table [grid]>
<tr [row]>
<tr [auxhead]>
<td [auxheader]>
...
</tr>
<td [label]></td>
...
</tr>
</table>
Which doesn't make sense from the point of view of the table. Therefore, the browser automatically closes the first tr and open a new one below, causing the "empty" row above the headers. See here for a short example of how to use auxhead.
So, that's the why :)
Now for the interesting part, what are you trying to do? Using Auxheaders in a row is not the way, but there is most likely a better solution. Can you describe the type of result that you want to achieve?
Hi survivorx,
Bumped your reputation to use links and other forum tools.
If you simply want a different style for specific rows, I'd recommend going with sclass on rows. Here's a fiddle showing how to use sclass to add classes to ZK component, and help with styling. You can use sclass="" to add a css class of your choice, while maintaining other default styles for the component. You can also use zclass in order to remove the default classes and substitute your own style, but I'd only recommend that if you are going to do a full restyling of the component, since some of the default style is pretty indispensable for the general page layout. See here for more details.
Regarding the invalid html with tr:
Most browsers will automatically "correct" invalid html by closing tags that have been opened. In this case since it is not possible to have a <tr> under another <tr>, the browser assumes that the first one had been left unclosed as a mistake. That leaves the header's <tr> well formed, and the surrounding row's <tr> closed early, then reopened after the header.
(you can see that the tr above the header have the row component info (id, class, etc.) and that the automatically-reopened tr below the auxhead is only a simple <tr> element without component info, since it was automatically generated by the browser fixing the html of the page.
See the raw html below generated by this zul (before browser auto-fix):
<!-- row tr open here -->
<tr id="aW8Q2" class="z-row">
<td id="aW8Q3-chdextr" class="z-row-inner">
<div id="aW8Q3-cell" class="z-row-content">
<!-- header tr open here as a child of row tr -->
<tr id="aW8Q3" class="z-auxhead" style="text-align:left;">
<th id="aW8Q4" class="z-auxheader">
<div id="aW8Q4-cave" class="z-auxheader-content">Verband</div>
</th>
<th id="aW8Q5" class="z-auxheader">
<div id="aW8Q5-cave" class="z-auxheader-content">Verein</div>
</th>
<th id="aW8Q6" class="z-auxheader">
<div id="aW8Q6-cave" class="z-auxheader-content">Spieler</div>
</th>
<!-- header tr close here as a child of row tr -->
</tr>
</div>
</td>
<td id="aW8Q7-chdextr" class="z-row-inner">
<div id="aW8Q7-cell" class="z-row-content">
<span id="aW8Q7" class="z-label">DFB</span>
</div>
</td>
<td id="aW8Q8-chdextr" class="z-row-inner">
<div id="aW8Q8-cell" class="z-row-content">
<span id="aW8Q8" class="z-label">BVB</span>
</div>
</td>
<td id="aW8Q9-chdextr" class="z-row-inner">
<div id="aW8Q9-cell" class="z-row-content">
<span id="aW8Q9" class="z-label">Wuff, Willi</span>
</div>
</td>
<!-- row tr close here -->
</tr>
Asked: 2020-03-11 16:20:17 +0800
Seen: 10 times
Last updated: Mar 13 '20