diff --git a/en/components/grids_templates/multi_row_layout.md b/en/components/grids_templates/multi_row_layout.md new file mode 100644 index 0000000000..f0a127e8b3 --- /dev/null +++ b/en/components/grids_templates/multi_row_layout.md @@ -0,0 +1,102 @@ +--- +title: Grid - Multi Row Layout - Native Angular | Ignite UI for Angular +_description: Multi row layout allow positioning and sizing the columns in a more powerful and flexible way. Every single column layout is a representation of a complete grid layout which consists of column fields. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Grid, Angular Table, Angular Data Grid component, Angular Data Table component, Angular Data Grid control, Angular Data Table control, Angular Grid component, Angular Table component, Angular Grid control, Angular Table control, Angular High Performance Grid, Angular High Performance Data Table, Multi Row Layout, Angular Multi Row Layout, Angular Data Table Multi Row Layout, Grid Layout, Angular Grid Layout, Column Layout, ColumnLayout, igxColumnLayout +--- + +### Multi Row Layout + +Multi Row Layout extends the rendering capabilities of the `igxGridComponent`. The feature allows splitting a single data record into multiple visible rows. + +#### Demo + +
+ +
+
+
+ +
+ +The declaration of Multi Row Layout is achieved through [`igx-column-layout`]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) component. Each `igx-column-layout` component should be considered as a block, containing one or multiple `igx-column` components. Some of the grid features work on block level (those are listed in the "Feature Integration" section below). For example the virtualization will use the block to determine the virtual chunks, so for better performance split the columns into more `igx-column-layout` blocks if the layout allows it. There should be no columns outside of those blocks and no usage of `IgxColumnGroupComponent` when configuring a multi row layout. Multi Row Layout is implemented on top of the [grid layout](https://www.w3.org/TR/css-grid-1/) specification and should conform to its requirements. + +`IgxColumnComponent` exposes four `@Input` properties to determine the location and span of each cell: +* [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) - column index from which the field is starting. This property is **mandatory**. +* [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) - row index from which the field is starting. This property is **mandatory**. +* [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colend) - column index where the current field should end. The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field. This property is **optional**. If not set defaults to `colStart + 1`. +* [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowend) - row index where the current field should end. The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field. This property is **optional**. If not set defaults to `rowStart + 1`. + + +```html + + + + + + + + + + + + + + + + + + + +``` + +The result of the above configuration can be seen on the screenshot below: + + + + +> [!Note] +> [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) and [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) properties must be set for each `igx-column` into `igx-column-layout`. The `igxColumnLayout` component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies. + +### Feature Integration +Due to the completly different rendering approach of Multi Row Layout, some of the column features will work only on `igx-column-layout` component. Such features are Column Pinning and Column Hiding. Othes like - Sorting and Grouping will work in the same way - on `igx-column` component. +- Filtering - only Excel Style Filtering is supported. Setting `filterMode` explicitly to `FilterMode.quickFilter` has no effect. +- Paging - works on records, not visual rows. +- Group By - `hideGroupedColumns` option has no effect in Multi Row Layout. The grouped columns are always visible. + +The following features are currently **not** supported: +- Column Moving +- Multi Column Headers +- Export to Excel +- Summaries + +### Keyboard Navigation + +* TAB move to the next cell from left to right in the row (unaffected by the column blocks that are defined). +* Shift + TAB move to the previous cell from right to left in the row (unaffected by the column blocks that are defined). +* Arrow left and Arrow right move to the adjacent cell on the left/right within the current row (unaffected by the column blocks that are defined). +* Arrow up and Arrow down move to the cell above/below with which it shares common border. If it shares border with multiple cells the most left takes precedence. + +### API References +
+ +* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-igx-grid-theme) +* [IgxColumnLayoutComponent]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) +* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +
+ +### Additional Resources +
+ +* [@@igComponent overview](@@igMainTopic.md) +* [Virtualization and Performance](virtualization.md) +* [Paging](paging.md) +* [Sorting](sorting.md) +* [Column Resizing](column_resizing.md) +* [Selection](selection.md) + +
+Our community is active and always welcoming to new ideas. + +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file diff --git a/en/components/toc.yml b/en/components/toc.yml index 82fabe9370..9b7314c02e 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -82,6 +82,9 @@ - name: Conditional Cell Styling href: grid/conditional_cell_styling.md new: false + - name: Multi Row Layout + href: grid/multi_row_layout.md + new: true - name: Tree Grid href: treegrid/tree_grid.md new: true diff --git a/en/images/multi-row-layout-1.png b/en/images/multi-row-layout-1.png new file mode 100644 index 0000000000..f854e844b7 Binary files /dev/null and b/en/images/multi-row-layout-1.png differ diff --git a/jp/components/grids_templates/multi_row_layout.md b/jp/components/grids_templates/multi_row_layout.md new file mode 100644 index 0000000000..f0a127e8b3 --- /dev/null +++ b/jp/components/grids_templates/multi_row_layout.md @@ -0,0 +1,102 @@ +--- +title: Grid - Multi Row Layout - Native Angular | Ignite UI for Angular +_description: Multi row layout allow positioning and sizing the columns in a more powerful and flexible way. Every single column layout is a representation of a complete grid layout which consists of column fields. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Grid, Angular Table, Angular Data Grid component, Angular Data Table component, Angular Data Grid control, Angular Data Table control, Angular Grid component, Angular Table component, Angular Grid control, Angular Table control, Angular High Performance Grid, Angular High Performance Data Table, Multi Row Layout, Angular Multi Row Layout, Angular Data Table Multi Row Layout, Grid Layout, Angular Grid Layout, Column Layout, ColumnLayout, igxColumnLayout +--- + +### Multi Row Layout + +Multi Row Layout extends the rendering capabilities of the `igxGridComponent`. The feature allows splitting a single data record into multiple visible rows. + +#### Demo + +
+ +
+
+
+ +
+ +The declaration of Multi Row Layout is achieved through [`igx-column-layout`]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) component. Each `igx-column-layout` component should be considered as a block, containing one or multiple `igx-column` components. Some of the grid features work on block level (those are listed in the "Feature Integration" section below). For example the virtualization will use the block to determine the virtual chunks, so for better performance split the columns into more `igx-column-layout` blocks if the layout allows it. There should be no columns outside of those blocks and no usage of `IgxColumnGroupComponent` when configuring a multi row layout. Multi Row Layout is implemented on top of the [grid layout](https://www.w3.org/TR/css-grid-1/) specification and should conform to its requirements. + +`IgxColumnComponent` exposes four `@Input` properties to determine the location and span of each cell: +* [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) - column index from which the field is starting. This property is **mandatory**. +* [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) - row index from which the field is starting. This property is **mandatory**. +* [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colend) - column index where the current field should end. The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field. This property is **optional**. If not set defaults to `colStart + 1`. +* [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowend) - row index where the current field should end. The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field. This property is **optional**. If not set defaults to `rowStart + 1`. + + +```html + + + + + + + + + + + + + + + + + + + +``` + +The result of the above configuration can be seen on the screenshot below: + + + + +> [!Note] +> [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) and [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) properties must be set for each `igx-column` into `igx-column-layout`. The `igxColumnLayout` component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies. + +### Feature Integration +Due to the completly different rendering approach of Multi Row Layout, some of the column features will work only on `igx-column-layout` component. Such features are Column Pinning and Column Hiding. Othes like - Sorting and Grouping will work in the same way - on `igx-column` component. +- Filtering - only Excel Style Filtering is supported. Setting `filterMode` explicitly to `FilterMode.quickFilter` has no effect. +- Paging - works on records, not visual rows. +- Group By - `hideGroupedColumns` option has no effect in Multi Row Layout. The grouped columns are always visible. + +The following features are currently **not** supported: +- Column Moving +- Multi Column Headers +- Export to Excel +- Summaries + +### Keyboard Navigation + +* TAB move to the next cell from left to right in the row (unaffected by the column blocks that are defined). +* Shift + TAB move to the previous cell from right to left in the row (unaffected by the column blocks that are defined). +* Arrow left and Arrow right move to the adjacent cell on the left/right within the current row (unaffected by the column blocks that are defined). +* Arrow up and Arrow down move to the cell above/below with which it shares common border. If it shares border with multiple cells the most left takes precedence. + +### API References +
+ +* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-igx-grid-theme) +* [IgxColumnLayoutComponent]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) +* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +
+ +### Additional Resources +
+ +* [@@igComponent overview](@@igMainTopic.md) +* [Virtualization and Performance](virtualization.md) +* [Paging](paging.md) +* [Sorting](sorting.md) +* [Column Resizing](column_resizing.md) +* [Selection](selection.md) + +
+Our community is active and always welcoming to new ideas. + +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file diff --git a/jp/components/toc.yml b/jp/components/toc.yml index 0cd0a78eaa..718511ebb8 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -82,6 +82,9 @@ - name: 条件付きセルのスタイル設定 href: grid/conditional_cell_styling.md new: false + - name: Multi Row Layout + href: grid/multi_row_layout.md + new: true - name: Tree Grid href: treegrid/tree_grid.md new: true diff --git a/jp/images/multi-row-layout-1.png b/jp/images/multi-row-layout-1.png new file mode 100644 index 0000000000..f854e844b7 Binary files /dev/null and b/jp/images/multi-row-layout-1.png differ diff --git a/kr/components/grids_templates/multi_row_layout.md b/kr/components/grids_templates/multi_row_layout.md new file mode 100644 index 0000000000..f0a127e8b3 --- /dev/null +++ b/kr/components/grids_templates/multi_row_layout.md @@ -0,0 +1,102 @@ +--- +title: Grid - Multi Row Layout - Native Angular | Ignite UI for Angular +_description: Multi row layout allow positioning and sizing the columns in a more powerful and flexible way. Every single column layout is a representation of a complete grid layout which consists of column fields. +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Grid, Angular Table, Angular Data Grid component, Angular Data Table component, Angular Data Grid control, Angular Data Table control, Angular Grid component, Angular Table component, Angular Grid control, Angular Table control, Angular High Performance Grid, Angular High Performance Data Table, Multi Row Layout, Angular Multi Row Layout, Angular Data Table Multi Row Layout, Grid Layout, Angular Grid Layout, Column Layout, ColumnLayout, igxColumnLayout +--- + +### Multi Row Layout + +Multi Row Layout extends the rendering capabilities of the `igxGridComponent`. The feature allows splitting a single data record into multiple visible rows. + +#### Demo + +
+ +
+
+
+ +
+ +The declaration of Multi Row Layout is achieved through [`igx-column-layout`]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) component. Each `igx-column-layout` component should be considered as a block, containing one or multiple `igx-column` components. Some of the grid features work on block level (those are listed in the "Feature Integration" section below). For example the virtualization will use the block to determine the virtual chunks, so for better performance split the columns into more `igx-column-layout` blocks if the layout allows it. There should be no columns outside of those blocks and no usage of `IgxColumnGroupComponent` when configuring a multi row layout. Multi Row Layout is implemented on top of the [grid layout](https://www.w3.org/TR/css-grid-1/) specification and should conform to its requirements. + +`IgxColumnComponent` exposes four `@Input` properties to determine the location and span of each cell: +* [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) - column index from which the field is starting. This property is **mandatory**. +* [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) - row index from which the field is starting. This property is **mandatory**. +* [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colend) - column index where the current field should end. The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field. This property is **optional**. If not set defaults to `colStart + 1`. +* [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowend) - row index where the current field should end. The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field. This property is **optional**. If not set defaults to `rowStart + 1`. + + +```html + + + + + + + + + + + + + + + + + + + +``` + +The result of the above configuration can be seen on the screenshot below: + + + + +> [!Note] +> [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowstart) and [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colstart) properties must be set for each `igx-column` into `igx-column-layout`. The `igxColumnLayout` component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies. + +### Feature Integration +Due to the completly different rendering approach of Multi Row Layout, some of the column features will work only on `igx-column-layout` component. Such features are Column Pinning and Column Hiding. Othes like - Sorting and Grouping will work in the same way - on `igx-column` component. +- Filtering - only Excel Style Filtering is supported. Setting `filterMode` explicitly to `FilterMode.quickFilter` has no effect. +- Paging - works on records, not visual rows. +- Group By - `hideGroupedColumns` option has no effect in Multi Row Layout. The grouped columns are always visible. + +The following features are currently **not** supported: +- Column Moving +- Multi Column Headers +- Export to Excel +- Summaries + +### Keyboard Navigation + +* TAB move to the next cell from left to right in the row (unaffected by the column blocks that are defined). +* Shift + TAB move to the previous cell from right to left in the row (unaffected by the column blocks that are defined). +* Arrow left and Arrow right move to the adjacent cell on the left/right within the current row (unaffected by the column blocks that are defined). +* Arrow up and Arrow down move to the cell above/below with which it shares common border. If it shares border with multiple cells the most left takes precedence. + +### API References +
+ +* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-igx-grid-theme) +* [IgxColumnLayoutComponent]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) +* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) +
+ +### Additional Resources +
+ +* [@@igComponent overview](@@igMainTopic.md) +* [Virtualization and Performance](virtualization.md) +* [Paging](paging.md) +* [Sorting](sorting.md) +* [Column Resizing](column_resizing.md) +* [Selection](selection.md) + +
+Our community is active and always welcoming to new ideas. + +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file diff --git a/kr/components/toc.yml b/kr/components/toc.yml index 1142585cb5..ff068a19fa 100644 --- a/kr/components/toc.yml +++ b/kr/components/toc.yml @@ -82,6 +82,9 @@ - name: 조건부 셀 스타일 href: grid/conditional_cell_styling.md new: false + - name: Multi Row Layout + href: grid/multi_row_layout.md + new: true - name: Tree Grid href: treegrid/tree_grid.md new: true diff --git a/kr/images/multi-row-layout-1.png b/kr/images/multi-row-layout-1.png new file mode 100644 index 0000000000..f854e844b7 Binary files /dev/null and b/kr/images/multi-row-layout-1.png differ