Col

Description:

Col

Use Cols to create vertical groups of row.

Allowed Parent Components:

  1. Aggregate Card

  2. Case

  3. DataList

  4. Row

Allowed Child Components:

  1. Action Button

  2. Aggregate Card

  3. Attachment Dropzone

  4. Attachment Upload

  5. Auto Breadcrumb

  6. Badge

  7. Barcode Scanner

  8. Bing Map

  9. Breadcrumb

  10. Button

  11. Button Dropdown

  12. Button Group

  13. Calendar

  14. Calendar Heatmap

  15. Capture Image

  16. Card Table

  17. Card Wrapper

  18. Carousel

  19. Change Role

  20. Char Circle

  21. Chart

  22. CheckBox

  23. Collaboration

  24. Color Select

  25. Combination Chart

  26. DIV

  27. DataList

  28. Date

  29. Date Field

  30. Drag Source Wrapper

  31. Drop Target Wrapper

  32. EmbedPage

  33. Form

  34. Form Search

  35. Fusion Chart

  36. Gantt Chart

  37. Gauges

  38. Google Drive Attachment Dropzone

  39. Google Map

  40. Grid Personalization Menu

  41. Gridster Personalization Menu

  42. H1

  43. H2

  44. H3

  45. H4

  46. H5

  47. HTML

  48. Heat Map Chart

  49. IFrame

  50. IOT Canvas

  51. IOT Device Drag Source

  52. Icon

  53. Icon Menu

  54. Icon Select

  55. Image

  56. Image Cropper

  57. Kanban Board

  58. LOV

  59. Mirror

  60. Monaco Editor

  61. Multi Level Pie Chart

  62. Multi Select LOV

  63. Multi Series Chart

  64. Node Graph

  65. Number

  66. Number Field

  67. Page Fragment

  68. Pagination

  69. Paragraph

  70. Password Field

  71. Popover

  72. Progress Bar

  73. Pulse

  74. Query Param Indicator Icon

  75. Quick Filter

  76. RadioBox

  77. Rich Text Editor

  78. Row

  79. Saved Search Menu

  80. Scanner Field

  81. Select

  82. Signature Pad

  83. Simple Alert

  84. Slide Toggle

  85. Slider

  86. Smart Search

  87. Star Rating

  88. Switch

  89. Tab Panel

  90. Table

  91. Tags Input

  92. Text Field

  93. Thumbnail

  94. Timeline

  95. Trigger Before Render

  96. Trigger On Click

  97. Trigger On Mouse Over

  98. UIView

  99. User Picture

  100. Video

  101. Wave

  102. Wizard Steps

  103. XY Chart

  104. ZoomLine Chart

Properties

➤ Background Color

Select a color or enter the custom class to change the color of the col.

Allowed Values: Select a color or enter the custom class to change the color of the col.

➤ Class Name Expression

Allowed Values: An expression which should return string after evaluation

➤ Self Alignment

Select an option to change the alignment of col.

Allowed Values:

  1. Start

  2. Center

  3. End

  4. Default

➤ Content Text Align

Select an option to change the alignment of text content inside the col.

Allowed Values:

  1. Left

  2. Center

  3. Right

  4. Default

➤ Extra Large ≥1200px

Allowed Values: Size12

➤ Large ≥992px

Allowed Values: Size12

➤ Medium ≥768px

Allowed Values: Size12

➤ Small ≥576px

Allowed Values: Size12

➤ Base Size

Allowed Values: Size12

➤ W100

Check this if you want the columns to break to a new line

Allowed Values: Yes/No

➤ Min Height

Provide a numerical value to specify minimum height. In most cases, you can leave this blank.

Allowed Values: Any number value

➤ Max Height

Provide a numerical value to specify maximum height. In most cases, you can leave this blank.

Allowed Values: Any number value

➤ Min Width

Provide a numerical value to specify minimum width. In most cases, you can leave this blank.

Allowed Values: Any number value

➤ Max Width

Provide a numerical value to specify maximum width. In most cases, you can leave this blank.

Allowed Values: Any number value

➤ Overflow Hidden

Check this if you have a child with text overflow ellipsis enabled.

Allowed Values: Yes/No

➤ On Click

Allowed Values: Controller Function

➤ Use Existing Data Source

Choose this prop if you want to reuse a Data Source that was defined on some other component on this page or any of the parent abstract pages.

Allowed Values: Yes/No

➤ Data Source

Select a datasource from the list.

Allowed Values: Select a datasource from the list.

➤ Data Source Alias

Allowed Values: Free text field

➤ Default Where Clause

Allowed Values: Free text field

➤ Max Rows

Allowed Values: Any number value

➤ Order By Clause

e.g. #firstAttr#, #secondAttr# DESC

Allowed Values: Free text field

➤ Auto Query

Check this property to query the selected datasource on component render.

Allowed Values: Yes/No

➤ Execute Count SQL

Check this to execute count SQL to get the total number of rows in the database on a query. You can get this value by using the expression: #{DataStore.totalLength}

Allowed Values: Yes/No

➤ Execute Distinct SQL

Check this to execute distinct SQL to get the total number of distinct rows in the database on a query.

Allowed Values: Yes/No

➤ Insert Allowed

Allowed Values: Yes/No

➤ Update Allowed

Allowed Values: Yes/No

➤ Delete Allowed

Check to enable deleting the existing row.

Allowed Values: Yes/No

➤ Mask Page On Post

Check to enable page masking on save.

Allowed Values: Yes/No

➤ Do Not Monitor Query Request

Check to disable monitoring query request.

Allowed Values: Yes/No

➤ Silent Server Validate

Check to enable silent server validate.

Allowed Values: Yes/No

➤ Silent Fetch

Check to enable silent fetching.

Allowed Values: Yes/No

➤ Make New Records Dirty

Check this property to make new record dirty. If this property is checked the status of the new record will be 'Insert' else it will be 'New'

Allowed Values: Yes/No

➤ Border Top

Select this to add a border on top

Allowed Values: Yes/No

➤ Border Right

Select this to add a border on right

Allowed Values: Yes/No

➤ Border Bottom

Select this to add a border on bottom

Allowed Values: Yes/No

➤ Border Left

Select this to add a border on left

Allowed Values: Yes/No

➤ Border Width

Select an option to change the width of a border

Allowed Values:

  1. default

  2. normal

  3. thick

  4. thicker

➤ Border Type

Select an option to change the type of a border

Allowed Values:

  1. solid

  2. dashed

  3. dotted

➤ Border Color

Select a color or enter the custom class to set the color on the sides of the element's border.

Allowed Values: Select a color or enter the custom class to set the color on the sides of the element's border.

➤ Margin

Select a value to add margin on all four sides of the component. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.

Allowed Values: Any number value

➤ Margin Bottom

Select a value to add margin on the bottom of the component.

Allowed Values: Any number value

➤ Margin Left

Select a value to add margin on the left of the component.

Allowed Values: Any number value

➤ Margin Right

Select a value to add margin on the right of the component.

Allowed Values: Any number value

➤ Margin Top

Select a value to add margin on the top of the component.

Allowed Values: Any number value

➤ Padding

Select a value to add padding on all four sides of the component. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.

Allowed Values: Any number value

➤ Padding Bottom

Select a value to add padding in the bottom of the component.

Allowed Values: Any number value

➤ Padding Left

Select a value to add padding in the left of the component.

Allowed Values: Any number value

➤ Padding Right

Select a value to add padding in right of the component.

Allowed Values: Any number value

➤ Padding Top

Select a value to add padding in top of the component.

Allowed Values: Any number value

PreviousCheckbox ColumnNextCollaboration

Last updated