piListColSpan - cWebColumnButton
Determines the column's width by defining that the column should span multiple columns
Type: Property
Access: Read/Write
Data Type: Integer
Parameters: None
Syntax
{ WebProperty=Client }
Property Integer piListColSpan
| Access Type | Syntax |
|---|---|
| Read Access: | WebGet piListColSpan to IntegerVariable |
| Write Access: | WebSet piListColSpan to IntegerVariable/Value |
Description
This determines the column's width by defining that the column should span multiple columns.
The column width of a single-line row is determined by the piWidth web property, where each column value is a ratio of the sum of all the column widths.
When a row contains multiple lines, generally one of those lines should have their columns all defined via piWidth - let's call this the main line. The other lines in the row, must have their width determined by defining how many columns it spans of the main line. In these lines, piWidth is ignored and you use piListColSpan to set the width. The default value of piListColSpan is 1.
Multi-Line Support in Lists and Grids
The various combinations of piWidth, pbFixedWidth, pbNewLine, piListColSpan, piListRowSpan and peAlign can create a variety of grid layouts. The best way to see how these all interact is to experiment with the Studio's Web Designer.
Example 1
Field 1 - piWidth = 20 Field 2 - piWidth = 20 Field 3 - piWidth = 20 Field 4 - pbNewLine = True, piListColSpan =2 Field 5 - piListColSpan =1
a b c
+--------------+--------------+----------------+
| 1 | 2 | 3 |
+--------------+--------------+----------------+
| 4 | 5 |
+-----------------------------+----------------+
Code:
Object oField1 is a cWebColumn
Set psCaption to "1"
Set piWidth to 20
End_Object
Object oField2 is a cWebColumn
Set psCaption to "2"
Set piWidth to 20
End_Object
Object oField3 is a cWebColumn
Set psCaption to "3"
Set piWidth to 20
End_Object
Object oField4 is a cWebColumn
Set psCaption to "4"
Set pbNewLine to True
Set piListColSpan to 2
End_Object
Object oField5 is a cWebColumn
Set psCaption to "5"
// Set piListColSpan to 1 is the default
End_Object
Example 2
Field 1 - piWidth = 20, piListRowSpan =2 Field 2 - piWidth = 20 Field 3 - piWidth = 20 Field 4 - pbNewLine = True, piListColSpan =1 Field 5 - piListColSpan =1
a b c
+--------------+--------------+----------------+
| 1 | 2 | 3 |
+ +--------------+----------------+
| | 4 | 5 |
+-----------------------------+----------------+
Code:
Object oField1 is a cWebColumn
Set psCaption to "1"
Set piWidth to 20
Set piListRowSpan to 2
End_Object
Object oField2 is a cWebColumn
Set psCaption to "2"
Set piWidth to 20
End_Object
Object oField3 is a cWebColumn
Set psCaption to "3"
Set piWidth to 20
End_Object
Object oField4 is a cWebColumn
Set psCaption to "4"
Set pbNewLine to True
// Set piListColSpan to 1 is the default
End_Object
Object oField5 is a cWebColumn
Set psCaption to "5"
// Set piListColSpan to 1 is the default
End_Object
Example 3
Field 1 - piWidth = 20, piListRowSpan =2 Field 2 - piWidth = 20 Field 3 - piWidth = 20, piListRowSpan =2 Field 4 - pbNewLine = True, piListColSpan =1
a b c
+--------------+--------------+----------------+
| 1 | 2 | 3 |
+ +--------------+ +
| | 4 | |
+-----------------------------+----------------+
Code:
Object oField1 is a cWebColumn
Set psCaption to "1"
Set piWidth to 20
Set piListRowSpan to 2
End_Object
Object oField2 is a cWebColumn
Set psCaption to "2"
Set piWidth to 20
End_Object
Object oField3 is a cWebColumn
Set psCaption to "3"
Set piWidth to 20
Set piListRowSpan to 2
End_Object
Object oField4 is a cWebColumn
Set psCaption to "4"
Set pbNewLine to True
// Set piListColSpan to 1 is the default
End_Object
Example 4
The peAlign property can also be used to good effect with multi line rows, particularly with mobile devices.
Field 1 - piWidth = 20, piListRowSpan =2 Field 2 - piWidth = 20 Field 3 - piWidth = 20, piListRowSpan =2, peAlign = alignRight Field 4 - pbNewLine = True, piListColSpan =1
a b c
+--------------+--------------+----------------+
| 1 | 2 | 3|
+ +--------------+ +
| | 4 | |
+-----------------------------+----------------+
Code:
Object oField1 is a cWebColumn
Set psCaption to "1"
Set piWidth to 20
Set piListRowSpan to 2
End_Object
Object oField2 is a cWebColumn
Set psCaption to "2"
Set piWidth to 20
End_Object
Object oField3 is a cWebColumn
Set psCaption to "3"
Set piWidth to 20
Set piListRowSpan to 2
Set peAlign to alignRight
End_Object
Object oField4 is a cWebColumn
Set psCaption to "4"
Set pbNewLine to True
// Set piListColSpan to 1 is the default
End_Object
About Web Properties
Each web property maintains two values: The regular property value is set during object creation and should not be changed during the lifetime of that object. To access that value, use the standard property Get and Set syntax.
The web property value is the local value stored at each client. This is synchronized to the client's local value whenever a server call is being processed. To access the web property value, use the WebGet and WebSet syntax above instead of the standard Get and Set syntax.
About Web Properties
Each web property maintains two values: The regular property value is set during object creation and should not be changed during the lifetime of that object. To access that value, use the standard property Get and Set syntax.
The web property value is the local value stored at each client. This is synchronized to the client's local value whenever a server call is being processed. To access the web property value, use the WebGet and WebSet syntax above instead of the standard Get and Set syntax.