[Free style grid] ノードの目的は、フォームの一部にフリー スタイル グリッドを表示することです。これは、従来のグリッドの代わりに使用することができます。GeneXus フリー スタイル グリッドを使用すると、ユーザーは任意の内容のタイプをその内部に追加できるため、このノードへのテーブル、アクション、テキストブロック、および変数の挿入がサポートされます。

[Free style grid] ノードには、次のプロパティがあります:

[FS Grid Columns] : フリー スタイル グリッド内のグリッド列数を指定します。
[FS Grid Cols. (Extra Small)]: Extra Small サイズのブラウザー用に、フリー スタイル グリッド内のグリッド列数を指定します。
[FS Grid Cols. (Small)]: Small サイズのブラウザー用に、フリー スタイル グリッド内のグリッド列数を指定します。
[FS Grid Cols. (Medium)]: Medium サイズのブラウザー用に、フリー スタイル グリッド内のグリッド列数を指定します。
[FS Grid Cols. (Large)]: Large サイズのブラウザー用に、フリー スタイル グリッド内のグリッド列数を指定します。

[Custom Render] : グリッドに設定するカスタムレンダリングを指定します。有効な値は次のとおりです:

• 空白にすると、グリッドの標準のレンダリングが割り当てられます。
• FlexGrid
• HorizontalGrid

[Table Type] : フリー スタイル グリッド内に挿入するテーブルを [Responsive]、[Regular]、[Flex] のどれにするかを指定します。

[Table Type] が [Responsive] の場合は次のプロパティのみ適用されます:

• [Num. Of Cols. (Extra Small)]
• [Num. Of Cols. (Small)]
• [Num. Of Cols. (Medium)]
• [Num. Of Cols. (Large)]

このプロパティ (Num of Cols.) では、ブラウザーの大きさに応じた、フリー スタイル グリッド内のテーブルの列数を指定します。一般にこのプロパティの値は、[Number Of Columns] プロパティの値と同じか少なくする必要があります。このプロパティの値を変更すると、WorkWithPlus はテーブル内にあるすべての子の [Cell Width] プロパティを自動的に更新します。既定値 (列数をエレメント数で割って幅を設定) に更新されますが、手動で変更することもできます。

[Table Type] プロパティが [Flex] の場合にのみ、次のプロパティが適用されます:

Table Flex

[Flex Direction] : フリー スタイル グリッド内でのアイテムの方向を指定します。つまり、グリッドのアイテムをフォーム上でどのように表示するかを指定します。利用可能なオプションは、[Row]、[Row Reverse]、[Column]、[Column Reverse] です。このプロパティの詳細な説明は、GeneXus の次のリンクに例示してあります: Flex Direction
[Flex Wrap] : グリッドのアイテムを折りたたむか、折りたたまないか、逆に折りたたむかを指定します。このプロパティの詳細な説明は、GeneXus の次のリンクに例示してあります: Flex Wrap
[Justify Content] : 主軸に沿って揃え位置を調整します。このプロパティの詳細な説明は、GeneXus の次のリンクに例示してあります: Justify Content
[Align Items] : 直交軸に沿って揃え位置を調整します。このプロパティの詳細な説明は、GeneXus の次のリンクに例示してあります: Align Items
[Align Content] : flex コンテナ内の flex 行の揃え位置を調整します。このプロパティの詳細な説明は、GeneXus の次のリンクに例示してあります: Align Content

[Descriptions As Header] : グリッド内にある項目属性のデスクリプションをグリッド上部にヘッダーとして表示するかどうかを指定します。グリッドの内容を適切に表示するには、プロパティの列幅をグリッド内の各ノードの幅にする必要があります。[Descriptions as Header] プロパティが [True] の場合、フリー スタイル グリッド内のテーブルは [Regular] です。そして、次のプロパティが表示されます:

[FS Grid Columns] : フリー スタイル グリッド内の列数を指定します。たとえば、Person を表示するフリー スタイル グリッドで、このプロパティの値を [3] に設定したとします。この場合、Person 1、2、3 が最初の行に表示され、Person 4、5、6 が 2 番目の行に表示されます。値を [0] に設定すると、すべてのレコードが一意の同じ行に表示されます。

[Include Pagination Bar] : このグリッドにページネーションバーを含めるかどうかを指定します。

[Vertical Scroll] : データグリッドに縦のスクロールを設定し、ある領域内のすべてのレコードを表示できるようにするかどうかを指定します。
[Back Color Style] : グリッドの外観を指定します: [None]、[Report]、または [Uniform]。

[Form]

[Theme class] : フリー スタイル グリッドのテーマクラスです。
[Columns Width] : グリッドの各列の幅を指定します。ピクセル単位の固定値で指定する必要があり、セミコロンで区切ります。

[Descriptions As Header] プロパティが True で、各列の幅および列数が適切に割り当てられている場合、複数行のグリッド、縦のスクロールを持つグリッド、またはその両方を実装できます:

縦のスクロールを持つグリッドの例

複数行のグリッドの例

   この例では、次のように設定されています:

     - [Free style grid] ノードのプロパティに次の値が設定されています:

•    [Descriptions as Header]: True
•    [Number Of Columns]: 7 (アクション用 2 列 + 上部の 5 列、6 番目は 2 行目に表示)
•    [Columns Width]: 30px;30px;150px;150px;150px;150px;150px
•    [Back Color Stye]: Report (Web Responsive Theme の場合、Back Color Style は None で使用することを推奨)
•    [Vertical Scroll]: False
•    6 つの項目属性があり、最後の項目属性の [Column Span] プロパティは 5、[Show Description] プロパティは False
•    [Theme Class]: FreeStyleGridWithHeaderMultiLine

     -  [Standard Action (Insert)] および [Standard Action (Delete)] の [Row Span] プロパティの値は [2] です。

     - &Description 変数の [Theme class] プロパティの値は AttributeSecondary です。

      [Table]

フリー スタイル グリッドの複数のレイアウト (WorkWithPlus for Web 15 以降で使用可能)

フリー スタイル グリッドを複数のレイアウトで作成し、それぞれのレイアウトを表示する条件を設定することができます。

WorkWithPlus は自動的に、条件を満たすレイアウトを表示し、その他のレイアウトを非表示にします。