Frozen"

From Documentation
m ((via JWB))
(3 intermediate revisions by the same user not shown)
Line 10: Line 10:
 
= Employment/Purpose =
 
= Employment/Purpose =
  
A frozen component to represent frozen "columns" in grid, like MS Excel.
+
A frozen component to represent frozen "columns" in a Grid, like MS Excel. Specify the <code>start</code> attribute to define the horizontal scroll starting position.
Using the "start"-attribute the horizontal scroll position can be defined.
 
  
 
= Example =
 
= Example =
Line 60: Line 59:
 
</grid>
 
</grid>
 
</source>
 
</source>
 +
 +
= Scroll to Hide Columns =
 +
By default, Grid will render extra space (larger width) after the last column. So that you can drag to hide all columns except the last one.
 +
[[File:hide-columns.png | center]]
  
 
=Supported Events=
 
=Supported Events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 78: Line 81:
 
=Use Cases=
 
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 89: Line 92:
 
{{LastUpdated}}
 
{{LastUpdated}}
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Revision as of 14:09, 12 January 2022

Frozen

Employment/Purpose

A frozen component to represent frozen "columns" in a Grid, like MS Excel. Specify the start attribute to define the horizontal scroll starting position.

Example

ZKComRef Frozen Example.png
<grid width="600px">
	<frozen columns="2" start="1"/>
	<columns>
		<column width="50px">ID</column>
		<column width="50px">Priority</column>
		<column width="50px">Status</column>
		<column width="150px">Summary</column>
		<column width="250px">Detail</column>
		<column width="100px">Group</column>
		<column width="50px">Assign</column>
	</columns>
	<rows>
		<row>
			<cell>0001</cell>
			<cell>1</cell>
			<cell>closed</cell>
			<cell>Fix login issue</cell>
			<cell>Login does not work at all</cell>
			<cell>Account</cell>
			<cell>Bob</cell>
		</row>
		<row>
			<cell>0002</cell>
			<cell>3</cell>
			<cell>open</cell>
			<cell>Button style broken</cell>
			<cell>Check main.css</cell>
			<cell>Styling</cell>
			<cell>Alice</cell>
		</row>
		<row>
			<cell>0003</cell>
			<cell>2</cell>
			<cell>open</cell>
			<cell>Client search result</cell>
			<cell>Search service returns incomplete result</cell>
			<cell>Service</cell>
			<cell>Bob</cell>
		</row>
	</rows>
</grid>

Scroll to Hide Columns

By default, Grid will render extra space (larger width) after the last column. So that you can drag to hide all columns except the last one.

Hide-columns.png

Supported Events

Name
Event Type
None None

Supported Children

*ALL

Use Cases

Version Description Example Location
     

Version History

Last Update : 2022/01/12


Version Date Content
     


Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.