From f318e658484753e76ae7d04021e2b62ac77cb77e Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Mon, 24 Feb 2025 09:53:44 +0200 Subject: [PATCH 01/16] Add disabled summaries topic section --- doc/en/components/grids/_shared/summaries.md | 122 +++++++++++++++++++ 1 file changed, 122 insertions(+) diff --git a/doc/en/components/grids/_shared/summaries.md b/doc/en/components/grids/_shared/summaries.md index d74c02d5b..6083e812d 100644 --- a/doc/en/components/grids/_shared/summaries.md +++ b/doc/en/components/grids/_shared/summaries.md @@ -1009,6 +1009,128 @@ When a default summary is defined, the height of the summary area is calculated `sample="/{ComponentSample}/data-summary-template", height="650", alt="{Platform} {ComponentTitle} data summary template"` +## Disabled Summaries + + +The `disabled-summaries` property provides precise per-column control over the {Platform} {ComponentTitle} summary feature. This property enables users to customize the summaries displayed for each column in the {ComponentName}, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as `['count', 'min', 'max']` by specifying their summary keys in an array. + + + +The `disabledSummaries` property provides precise per-column control over the {Platform} {ComponentTitle} summary feature. This property enables users to customize the summaries displayed for each column in the {ComponentName}, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as `['count', 'min', 'max']` by specifying their summary keys in an array. + + + +The `DisabledSummaries` property provides precise per-column control over the {Platform} {ComponentTitle} summary feature. This property enables users to customize the summaries displayed for each column in the {ComponentName}, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as `['count', 'min', 'max']` by specifying their summary keys in an array. + + + +This property can also be modified **dynamically at runtime** through code, providing flexibility to adapt the {ComponentName}'s summaries to changing application states or user actions. + + + +The following examples illustrate how to use the `disabled-summaries` property to manage summaries for different columns and exclude specific default and custom summary types in the {Platform} {ComponentTitle}: + + + +The following examples illustrate how to use the `disabledSummaries` property to manage summaries for different columns and exclude specific default and custom summary types in the {Platform} {ComponentTitle}: + + + +The following examples illustrate how to use the `DisabledSummaries` property to manage summaries for different columns and exclude specific default and custom summary types in the {Platform} {ComponentTitle}: + + + + +```html + + + + + + + +``` + + +```tsx + + + + + +``` + + + +```razor + + + + + +``` + + + +For `UnitPrice`, default summaries like `count`, `sum`, and `average` are disabled, leaving others like `min` and `max` active. + + +For `UnitsInStock`, custom summaries such as `discontinued` and `totalDiscontinued` are excluded using the `disabled-summaries` property. + +At runtime, summaries can also be dynamically disabled using the `disabled-summaries` property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes. + + + +For `UnitsInStock`, custom summaries such as `discontinued` and `totalDiscontinued` are excluded using the `disabledSummaries` property. + +At runtime, summaries can also be dynamically disabled using the `disabledSummaries` property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes. + + + +For `UnitsInStock`, custom summaries such as `discontinued` and `totalDiscontinued` are excluded using the `DisabledSummaries` property. + +At runtime, summaries can also be dynamically disabled using the `DisabledSummaries` property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes. + + +`sample="/{ComponentSample}/disabled-summaries", height="750", alt="{Platform} {ComponentTitle} disabled summaries"` + ## Formatting summaries By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid `Locale` and column `PipeArgs`. When using custom operands, the `Locale` and `PipeArgs` are not applied. If you want to change the default appearance of the summary results, you may format them using the `SummaryFormatter` property. From 32f1707ff10435581d53498186bad15d31fb9313 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 4 Mar 2025 09:31:35 +0200 Subject: [PATCH 02/16] docs(tile-manager): additional tile manager doc changes --- doc/en/components/layouts/tile-manager.md | 207 +++++++++++----------- 1 file changed, 108 insertions(+), 99 deletions(-) diff --git a/doc/en/components/layouts/tile-manager.md b/doc/en/components/layouts/tile-manager.md index b48941218..1cba087f3 100644 --- a/doc/en/components/layouts/tile-manager.md +++ b/doc/en/components/layouts/tile-manager.md @@ -38,9 +38,9 @@ npm install {PackageWebComponents} Before using the Tile Manager, you need to import it as follows: ```ts -import { defineComponents, IgcTileManagerComponent, IgcTileComponent } from 'igniteui-webcomponents'; +import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents'; -defineComponents(IgcTileManagerComponent, IgcTileComponent); +defineComponents(IgcTileManagerComponent); ``` Now you can start with a basic configuration of the {Platform} Tile Manager. @@ -63,73 +63,11 @@ For a complete introduction to the {ProductName}, read the [*Getting Started*](. -## Resizing - -Resizing in the tile manager is a functionality that allows tiles to be resized using three different resize adorners. - -- **Side Adorner**: Adjusts the width by modifying the column span. -- **Bottom Adorner**: Adjusts the height by modifying the row span. -- **Corner Adorner**: Adjusts both width and height simultaneously. - -To ensure smooth resizing, a ghost element is used instead of directly modifying the tile’s dimensions. This element appears on top of the original tile, displaying its current dimensions when resizing begins, and it updates in real time as the user drags any of the resize handles. - -> [!Note] If the ghost element exceeds the available grid space, it will automatically adjust to the largest possible span within the grid's limits. - -We can use the `resize-mode` property to control how resizing is applied in the Tile Manager. It can be set to either `hover` or `always`, which determines when the resize adorners are visible. - -```html - - -

Tile 1

-
- -

Tile 2

-
-
-``` - -You can see the difference between the two states in the example below: - -`sample="/layouts/tile-manager/resize", height="430", alt="{Platform} Tile Manager Resize Example"` - -### Limitations - -There are several constraints and limitations in the resizing process: - -- A tile cannot be resized smaller than its defined minimum width or height (minColWidth, minRowHeight). -- A tile cannot exceed the maximum available space in the grid. If a tile starts at a specific column or row, and the user tries to resize it beyond the visible grid area, it will only expand up to the maximum available columns or rows from its starting position. - -## Reorder - -You can reorder tiles in the Tile Manager using the drag-and-drop feature. By default, tiles are not draggable. To enable this functionality, set the `drag-mode` property on the Tile Manager to either `tile` or `tile-header`. - -- With the `tile` option, you can click and hold anywhere on an individual tile to start dragging it. -- With the `tile-header` option, you can only click and hold in the tile's header section to start the dragging process. - -Similar to resizing, when you initiate the drag-and-drop process, a ghost element appears beneath the tile you’ve grabbed. As you drag the tile, the ghost element moves with it, dynamically reordering the other tiles in real time. This allows you to preview how the tile grid will look when you drop the tile. - -There are two types of transitions you can use while reordering tiles with drag-and-drop. To use them, simply set the `drag-action` property on the Tile Manager to either `slide` or `swap`. - -```html - - - Tile 1 header -

Content for Tile 1

-
- - Tile 2 header -

Content for Tile 2

-
-
-``` - -`sample="/layouts/tile-manager/dragndrop", height="430", alt="{Platform} Tile Manager Drag and drop Example"` - -## Managing Tile columns +## Layout ### Columns -We can also specify the number of grid columns for our Tile Manager. To do this, simply set the `column-count` property to the desired number of columns. If the number is less than one, the Tile Manager will create as many columns as can fit, with each column being at least 20px wide and expanding to equally share the available space. +We can specify the number of grid columns for our Tile Manager. To do this, simply set the `column-count` property to the desired number of columns. If the number is less than one, the Tile Manager will create as many columns as can fit, with each column being at least 20px wide and expanding to equally share the available space. ```html @@ -187,23 +125,15 @@ We also have properties for setting the minimum width of the columns (`min-colum `sample="/layouts/tile-manager/columngap", height="430", alt="{Platform} Tile Manager Column Example"` -## Layout - -The Tile Manager also provides methods that help manage the layout of tiles: - -- The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order and positions of all tiles, so you can later restore it to this exact configuration. -- The `loadLayout` method enables you to load a previously saved layout. When called, it restores the Tile Manager to the exact state it was in when the layout was saved, including the order and positions of the tiles. - -`sample="/layouts/tile-manager/layout", height="430", alt="{Platform} Tile Manager Layout Example"` - ## Tile component -The Tile component also has properties that can be set individually for each tile. Some of these properties include: +The Tile component has properties that can be set individually for each tile. Some of these properties include: - The `col-span` property specifies how many columns the tile will span across in the layout, allowing you to control its horizontal size. - The `row-span` property determines how many rows the tile will span vertically, adjusting the tile's height within the layout. +- The `col-start` property specifies the starting column where the tile is placed. +- The `row-start` property specifies the starting row where the tile is placed. - The `disable-resize` property prevents the tile from being resized by the user. -- The `disable-drag` property disables the ability to drag and move the tile within the layout. ```html @@ -219,9 +149,22 @@ The Tile component also has properties that can be set individually for each til ``` -## Header section actions +The Tile component also exposes several slots which you can use: + +| Slot name | Description | +| ---------|------------ | +| `title` | Content for the tile header. | +| `fullscreen-action` | Overwrite the default fullscreen action content. | +| `maximize-action` | Overwrite the default maximize action content. | +| `actions` | Custom content rendered after the default actions. | +| `side-adorner` | Overwrite the default horizontal resize adorner. | +| `corner-adorner` | Overwrite the default diagonal resize adorner. | +| `bottom-adorner` | Overwrite the default vertical resize adorner. | + + +### Header section actions -The header section also includes two action buttons: +By default, the header section includes two action buttons: - The `maximize` button enlarges the tile's content to fill the entire width of the Tile Manager, offering a wider view of the content. - The `fullscreen` button enables the tile to open in fullscreen mode in the user's browser. @@ -239,33 +182,99 @@ If you want to display just one of the two buttons, you can set it as a slot att ``` -## Styling +You also have the option to disable both action buttons and create custom ones according to your preferences. -You can also customize the appearance of the two components - `Tile Manager` and `Tile`. -Each component exposes CSS properties that can be used for styling. +`sample="/layouts/tile-manager/actions", height="430", alt="{Platform} Tile Manager Actions Example"` -`Tile Manager` CSS parts: +In this example, we created custom action buttons using the Ignite UI Icon Button component. -| Part name | Description | -| ---------|------------ | -| `base` | The base wrapper of the tile manager. | -| `maximized-tile` | Added when there is a maximized tile. | +## Resizing -`Tile` CSS parts: +Resizing in the tile manager is a functionality that allows tiles to be resized using three different resize adorners. + +- **Side Adorner**: Adjusts the width by modifying the column span. +- **Bottom Adorner**: Adjusts the height by modifying the row span. +- **Corner Adorner**: Adjusts both width and height simultaneously. + +To ensure smooth resizing, a ghost element is used instead of directly modifying the tile’s dimensions. This element appears on top of the original tile, displaying its current dimensions when resizing begins, and it updates in real time as the user drags any of the resize handles. + +> [!Note] If the ghost element exceeds the available grid space, it will automatically adjust to the largest possible span within the grid's limits. + +We can use the `resize-mode` property to control how resizing is applied in the Tile Manager. It can be set to either `hover` or `always`, which determines when the resize adorners are visible. + +```html + + +

Tile 1

+
+ +

Tile 2

+
+
+``` + +You can see the difference between the two states in the example below: + +`sample="/layouts/tile-manager/resize", height="430", alt="{Platform} Tile Manager Resize Example"` + +### Limitations + +There are several constraints and limitations in the resizing process: + +- A tile cannot be resized smaller than its defined minimum width or height (minColWidth, minRowHeight). +- A tile cannot exceed the maximum available space in the grid. If a tile starts at a specific column or row, and the user tries to resize it beyond the visible grid area, it will only expand up to the maximum available columns or rows from its starting position. + +## Reorder + +You can reorder tiles in the Tile Manager using the drag-and-drop feature. By default, tiles are not draggable. To enable this functionality, set the `drag-mode` property on the Tile Manager to either `tile` or `tile-header`. + +- With the `tile` option, you can click and hold anywhere on an individual tile to start dragging it. +- With the `tile-header` option, you can only click and hold in the tile's header section to start the dragging process. + +> [!Note] While the tile is in maximized or fullscreen state, the tile cannot be dragged. + +Similar to resizing, when you initiate the drag-and-drop process, a ghost element appears beneath the tile you’ve grabbed. As you drag the tile, the ghost element moves with it, dynamically reordering the other tiles in real time. This allows you to preview how the tile grid will look when you drop the tile. + +```html + + + Tile 1 header +

Content for Tile 1

+
+ + Tile 2 header +

Content for Tile 2

+
+
+``` + +`sample="/layouts/tile-manager/dragndrop", height="430", alt="{Platform} Tile Manager Drag and drop Example"` + +## Serialization + +The Tile Manager provides methods that help manage the layout of tiles: + +- The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order and positions of all tiles, so you can later restore it to this exact configuration. +- The `loadLayout` method enables you to load a previously saved layout. When called, it restores the Tile Manager to the exact state it was in when the layout was saved, including the order and positions of the tiles. + +`sample="/layouts/tile-manager/layout", height="430", alt="{Platform} Tile Manager Layout Example"` + +## Styling + +You can also customize the appearance of the two components - `Tile Manager` and `Tile`. +The `Tile Manager` exposes only one CSS property - `base` which can be used for styling the base wrapper of the Tile Manager. +The `Tile` component exposes several CSS properties we can use: | Part name | Description | | ---------|------------ | -| `base` | The wrapper of a tile. | -| `drag-over` | Added when a tile is dragged over the current tile. | -| `dragging` | Added when the tile is dragged. | -| `resizing` | Added when the tile is resized. | -| `draggable` | Added when disableDrag is false. | -| `resizable` | Added when disableResize is false. | -| `fullscreen` | Added to the wrapper when a tile is in fullscreen state. | -| `header` | The header wrapper of a tile. | -| `title` | The title of a tile. | -| `actions` | A section where action buttons are added. | -| `content-container` | The content wrapper of a tile. | +| `base` | The wrapping container of the tile component. | +| `header` | The header container of the tile, including title and actions parts. | +| `title` | The title container. | +| `actions` | The actions container. | +| `content-container` | The container wrapping the tile default slot. | +| `trigger-side` | The horizontal adorner. | +| `trigger` | The diagonal adorner | +| `trigger-bottom` | The vertical adorner. | Using these CSS parts you can customize the appearance of the three components as follows: From 3f57fb1f6e6fa4a98793fb006dc40428739c2f72 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 5 Mar 2025 02:13:47 +0200 Subject: [PATCH 03/16] docs(tile-manager): change samples frames --- doc/en/components/layouts/tile-manager.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/doc/en/components/layouts/tile-manager.md b/doc/en/components/layouts/tile-manager.md index 1cba087f3..0b23d5df6 100644 --- a/doc/en/components/layouts/tile-manager.md +++ b/doc/en/components/layouts/tile-manager.md @@ -13,7 +13,7 @@ The `igc-tile-manager` component enables the display of content in individual ti The following {ProductName} Tile Manager Example shows the component in action. -`sample="/layouts/tile-manager/overview", height="430", alt="{Platform} Tile Manager Example"` +`sample="/layouts/tile-manager/overview", height="750", alt="{Platform} Tile Manager Example"`
@@ -123,7 +123,7 @@ We also have properties for setting the minimum width of the columns (`min-colum ### Example -`sample="/layouts/tile-manager/columngap", height="430", alt="{Platform} Tile Manager Column Example"` +`sample="/layouts/tile-manager/columngap", height="580", alt="{Platform} Tile Manager Column Example"` ## Tile component @@ -184,7 +184,7 @@ If you want to display just one of the two buttons, you can set it as a slot att You also have the option to disable both action buttons and create custom ones according to your preferences. -`sample="/layouts/tile-manager/actions", height="430", alt="{Platform} Tile Manager Actions Example"` +`sample="/layouts/tile-manager/actions", height="680", alt="{Platform} Tile Manager Actions Example"` In this example, we created custom action buttons using the Ignite UI Icon Button component. @@ -215,7 +215,7 @@ We can use the `resize-mode` property to control how resizing is applied in the You can see the difference between the two states in the example below: -`sample="/layouts/tile-manager/resize", height="430", alt="{Platform} Tile Manager Resize Example"` +`sample="/layouts/tile-manager/resize", height="525", alt="{Platform} Tile Manager Resize Example"` ### Limitations @@ -248,7 +248,7 @@ Similar to resizing, when you initiate the drag-and-drop process, a ghost elemen ``` -`sample="/layouts/tile-manager/dragndrop", height="430", alt="{Platform} Tile Manager Drag and drop Example"` +`sample="/layouts/tile-manager/dragndrop", height="525", alt="{Platform} Tile Manager Drag and drop Example"` ## Serialization @@ -257,7 +257,7 @@ The Tile Manager provides methods that help manage the layout of tiles: - The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order and positions of all tiles, so you can later restore it to this exact configuration. - The `loadLayout` method enables you to load a previously saved layout. When called, it restores the Tile Manager to the exact state it was in when the layout was saved, including the order and positions of the tiles. -`sample="/layouts/tile-manager/layout", height="430", alt="{Platform} Tile Manager Layout Example"` +`sample="/layouts/tile-manager/layout", height="527", alt="{Platform} Tile Manager Layout Example"` ## Styling @@ -296,7 +296,7 @@ igc-tile::part(title) { } ``` -`sample="/layouts/tile-manager/styling", height="430", alt="{Platform} Tile Manager Styling Example"` +`sample="/layouts/tile-manager/styling", height="480", alt="{Platform} Tile Manager Styling Example"` ## API References From 0a2d399c91b00a5bc108ad23fbbb13a27260bc9b Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 5 Mar 2025 02:44:17 +0200 Subject: [PATCH 04/16] docs(tile-manager): post merge fixes --- doc/en/images/tile-manager-actions.png | Bin 0 -> 5559 bytes docfx/en/components/toc.json | 6 ++++++ 2 files changed, 6 insertions(+) create mode 100644 doc/en/images/tile-manager-actions.png diff --git a/doc/en/images/tile-manager-actions.png b/doc/en/images/tile-manager-actions.png new file mode 100644 index 0000000000000000000000000000000000000000..090e10c5ad2b09078e9c94644c153922ba80cb7c GIT binary patch literal 5559 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 Date: Wed, 5 Mar 2025 18:16:36 +0200 Subject: [PATCH 05/16] docs(tile-manager): fixing samples height + styling --- doc/en/components/layouts/tile-manager.md | 24 +++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/doc/en/components/layouts/tile-manager.md b/doc/en/components/layouts/tile-manager.md index 0b23d5df6..a29195e53 100644 --- a/doc/en/components/layouts/tile-manager.md +++ b/doc/en/components/layouts/tile-manager.md @@ -13,9 +13,9 @@ The `igc-tile-manager` component enables the display of content in individual ti The following {ProductName} Tile Manager Example shows the component in action. -`sample="/layouts/tile-manager/overview", height="750", alt="{Platform} Tile Manager Example"` +`sample="/layouts/tile-manager/overview", height="743", alt="{Platform} Tile Manager Example"` -
+> [!Warning] Due to the iframe permissions policy, the fullscreen button in this example will only work when the example is opened in standalone mode by clicking the 'Expand to fullscreen' button in the top-right corner. ## Usage @@ -123,7 +123,7 @@ We also have properties for setting the minimum width of the columns (`min-colum ### Example -`sample="/layouts/tile-manager/columngap", height="580", alt="{Platform} Tile Manager Column Example"` +`sample="/layouts/tile-manager/columngap", height="583", alt="{Platform} Tile Manager Column Example"` ## Tile component @@ -184,7 +184,7 @@ If you want to display just one of the two buttons, you can set it as a slot att You also have the option to disable both action buttons and create custom ones according to your preferences. -`sample="/layouts/tile-manager/actions", height="680", alt="{Platform} Tile Manager Actions Example"` +`sample="/layouts/tile-manager/actions", height="700", alt="{Platform} Tile Manager Actions Example"` In this example, we created custom action buttons using the Ignite UI Icon Button component. @@ -215,7 +215,7 @@ We can use the `resize-mode` property to control how resizing is applied in the You can see the difference between the two states in the example below: -`sample="/layouts/tile-manager/resize", height="525", alt="{Platform} Tile Manager Resize Example"` +`sample="/layouts/tile-manager/resize", height="522", alt="{Platform} Tile Manager Resize Example"` ### Limitations @@ -248,7 +248,7 @@ Similar to resizing, when you initiate the drag-and-drop process, a ghost elemen ``` -`sample="/layouts/tile-manager/dragndrop", height="525", alt="{Platform} Tile Manager Drag and drop Example"` +`sample="/layouts/tile-manager/dragndrop", height="522", alt="{Platform} Tile Manager Drag and drop Example"` ## Serialization @@ -257,7 +257,7 @@ The Tile Manager provides methods that help manage the layout of tiles: - The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order and positions of all tiles, so you can later restore it to this exact configuration. - The `loadLayout` method enables you to load a previously saved layout. When called, it restores the Tile Manager to the exact state it was in when the layout was saved, including the order and positions of the tiles. -`sample="/layouts/tile-manager/layout", height="527", alt="{Platform} Tile Manager Layout Example"` +`sample="/layouts/tile-manager/layout", height="525", alt="{Platform} Tile Manager Layout Example"` ## Styling @@ -294,9 +294,17 @@ igc-tile::part(header) { igc-tile::part(title) { color: var(--ig-primary-400); } + +igc-tile::part(trigger-side), igc-tile::part(trigger-bottom) { + background-color: var(--ig-success-500); +} + +igc-tile::part(trigger) { + background-color: var(--ig-error-500); +} ``` -`sample="/layouts/tile-manager/styling", height="480", alt="{Platform} Tile Manager Styling Example"` +`sample="/layouts/tile-manager/styling", height="479", alt="{Platform} Tile Manager Styling Example"` ## API References From aa7cfba238b9430dac200936619674b8e50c85ea Mon Sep 17 00:00:00 2001 From: Deyan Kamburov Date: Fri, 7 Mar 2025 16:02:25 +0200 Subject: [PATCH 06/16] docs(changelogs): add disabled summaries and bugs for blazor and react --- .../components/general-changelog-dv-blazor.md | 8 ++++++++ doc/en/components/general-changelog-dv-react.md | 17 +++++++++++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/doc/en/components/general-changelog-dv-blazor.md b/doc/en/components/general-changelog-dv-blazor.md index 1e82f5a13..b00c669ca 100644 --- a/doc/en/components/general-changelog-dv-blazor.md +++ b/doc/en/components/general-changelog-dv-blazor.md @@ -14,6 +14,12 @@ All notable changes for each version of {ProductName} are documented on this pag ## **{PackageVerChanges-24-2-FEB}** +### {PackageGrids} + +- **All Grids** + - Added new `DisabledSummaries` for the columns of the grid, allowing the developers to skip some of the summaries + - Encapsulate internal grid action button + ### Enhancements #### Toolbar @@ -42,11 +48,13 @@ The following table lists the bug fixes made for the {ProductName} toolset for t |34776|IgbDataChart|Repeatedly showing and hiding the IgbDataChart causes memory leakage in JS Heap| |35439|IgbGrid|CPU usage and Memory consumption are abnormally high when the app is opened in multiple tabs| |35495|Excel Library|Pictures in cells are lost when a template file is loaded| +|35497|IgbDialog|When ShowAsync and HideAsync Are Called, the Subsequent Code Is Not Executed| |35498|IgbDataChart|Tooltips for the series specified in IncludedSeries are not displayed| |36024|IgbGrid|The JS heap size never reduced when moving back and forth between two pages with IgbGrid component| |36176|Excel Library|Exception occurs when loading an Excel workbook that has a LET function| |36379|Excel Library|Colors with any alpha channel in an excel workbook fail to load| + ## **{PackageVerChanges-24-2-JAN}** - Bug Fixes diff --git a/doc/en/components/general-changelog-dv-react.md b/doc/en/components/general-changelog-dv-react.md index abd15ef96..10b003cef 100644 --- a/doc/en/components/general-changelog-dv-react.md +++ b/doc/en/components/general-changelog-dv-react.md @@ -11,13 +11,23 @@ All notable changes for each version of {ProductName} are documented on this pag ## **{PackageVerChanges-24-2-FEB}** +### {PackageGrids} + +- **All Grids** + - Added new `disabledSummaries` for the columns of the grid, allowing the developers to skip some of the summaries + - Encapsulate internal grid action button + +### {PackageCommon} +- Added new `allowSplitterDock` property for `Dockmanager` that allows docking directly in a split. +- Added new `useFixedSize` property for the `SplitPane` of `Dockmanager` that allows new resize behavior. + ### Enhancements #### Toolbar -- Added new `GroupHeaderTextStyle` property to `Toolbar` and `ToolPanel`. If set, it will apply to all `ToolActionGroupHeader` actions. +- Added new `groupHeaderTextStyle` property to `Toolbar` and `ToolPanel`. If set, it will apply to all `ToolActionGroupHeader` actions. - Added new property on `ToolAction` called `TitleHorizontalAlignment` which controls the horizontal alignment of the title text. -- Added new property on `ToolActionSubPanel` called `ItemSpacing` which controls the spacing between items inside the panel. +- Added new property on `ToolActionSubPanel` called `itemSpacing` which controls the spacing between items inside the panel. ### Bug Fixes @@ -25,12 +35,15 @@ The following table lists the bug fixes made for the {ProductName} toolset for t | Bug Number | Control | Description | |------------|---------|------------------| +|32093|IgrPivotGrid|PivotDateDimensionOptions are not applied to the PivotDateDimension| |26218|Excel Library|Chart's plot area right margin becomes narrower and fill pattern and fill foreground are gone just by loading an Excel file| |30286|IgrDataChart|Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble| |32906|IgrDataChart|IgrDataChart is showing two xAxis on the top| |33605|IgrDataChart|ScatterLineSeries is not showing the color of the line correctly in the legend| |34053|IgrRadialGauge|The position of the scale label is shifted| |34083|Excel Library|TextOperatorConditionalFormat's is not loaded/saved properly if the text contains = in a template Excel file| +|34324|IgrGrid|Column hiding through condition in the grid template is not working| +|34678|IgrGrid|Enum values coerced to strings, breaking expected numeric behavior in some grid properties| |34776|IgrDataChart|Repeatedly showing and hiding the IgrDataChart causes memory leakage in JS Heap| |35495|Excel Library|Pictures in cells are lost when a template file is loaded| |35496|IgrSpreadsheet|Error when setting styles in Excel with images| From 2672ac25967916df59d027945f260faa76ea6aa1 Mon Sep 17 00:00:00 2001 From: Deyan Kamburov Date: Fri, 7 Mar 2025 16:11:42 +0200 Subject: [PATCH 07/16] docs(changelog): Add comments for Blazor latest patch --- doc/en/components/general-changelog-dv-blazor.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/doc/en/components/general-changelog-dv-blazor.md b/doc/en/components/general-changelog-dv-blazor.md index b00c669ca..1ab10ab57 100644 --- a/doc/en/components/general-changelog-dv-blazor.md +++ b/doc/en/components/general-changelog-dv-blazor.md @@ -12,7 +12,7 @@ All notable changes for each version of {ProductName} are documented on this pag * As of version 2024.2, the Ignite UI for Blazor toolset supports .NET 9. For more information on .NET 9 please refer to [this article on Microsoft's site](https://learn.microsoft.com/en-us/dotnet/core/whats-new/dotnet-9/overview). -## **{PackageVerChanges-24-2-FEB}** +## **{PackageVerChanges-24-2-MAR}** ### {PackageGrids} @@ -20,6 +20,13 @@ All notable changes for each version of {ProductName} are documented on this pag - Added new `DisabledSummaries` for the columns of the grid, allowing the developers to skip some of the summaries - Encapsulate internal grid action button +### Bug Fixes +| Bug Number | Control | Description | +|------------|---------|------------------| +|35497|IgbDialog|When ShowAsync and HideAsync Are Called, the Subsequent Code Is Not Executed| + +## **{PackageVerChanges-24-2-FEB}** + ### Enhancements #### Toolbar @@ -48,7 +55,6 @@ The following table lists the bug fixes made for the {ProductName} toolset for t |34776|IgbDataChart|Repeatedly showing and hiding the IgbDataChart causes memory leakage in JS Heap| |35439|IgbGrid|CPU usage and Memory consumption are abnormally high when the app is opened in multiple tabs| |35495|Excel Library|Pictures in cells are lost when a template file is loaded| -|35497|IgbDialog|When ShowAsync and HideAsync Are Called, the Subsequent Code Is Not Executed| |35498|IgbDataChart|Tooltips for the series specified in IncludedSeries are not displayed| |36024|IgbGrid|The JS heap size never reduced when moving back and forth between two pages with IgbGrid component| |36176|Excel Library|Exception occurs when loading an Excel workbook that has a LET function| From aa6339df8dc96a0d1ffb5e106e67d2549f28e581 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 11 Mar 2025 13:05:39 +0200 Subject: [PATCH 08/16] docs(tile-manager): fix comments + add "row-count" property --- doc/en/components/layouts/tile-manager.md | 26 +++++++++++++---------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/doc/en/components/layouts/tile-manager.md b/doc/en/components/layouts/tile-manager.md index a29195e53..36e8de2c2 100644 --- a/doc/en/components/layouts/tile-manager.md +++ b/doc/en/components/layouts/tile-manager.md @@ -65,12 +65,14 @@ For a complete introduction to the {ProductName}, read the [*Getting Started*](. ## Layout -### Columns +### Columns and Rows -We can specify the number of grid columns for our Tile Manager. To do this, simply set the `column-count` property to the desired number of columns. If the number is less than one, the Tile Manager will create as many columns as can fit, with each column being at least 20px wide and expanding to equally share the available space. +We can specify the number of grid columns for our Tile Manager. To do this, simply set the `column-count` property to the desired number of columns. If the number is less than one or the property is not set, the Tile Manager will create as many columns as can fit, with each column being at least 200px wide and expanding to equally share the available space. When the viewport dimensions change, the tiles will also rearrange themselves to maximize the use of space. + +We can also specify the number of grid rows for our Tile Manager using the `row-count` property. Again, if the number is less than one or the property is not set, the Tile Manager will create as many rows as needed. ```html - + Tile 1 header

Content for Tile 1

@@ -83,7 +85,7 @@ We can specify the number of grid columns for our Tile Manager. To do this, simp
``` -In this code snippet, setting the `column-count` property to 2 will arrange all the tiles in the Tile Manager into 2 columns. +In this code snippet, the tiles in the Tile Manager will be arranged into 2 rows and 2 columns. ### Gap @@ -108,7 +110,7 @@ Another property that can be used in the Tile Manager is the `gap` property, whi We also have properties for setting the minimum width of the columns (`min-column-width`) and the minimum height of the rows (`min-row-height`) in the Tile Manager. Similar to the gap property, the values for these properties must be a number followed by a length unit. These values will define the minimum width for all columns and the minimum height for all rows in the Tile Manager. ```html - + Tile 1 header

Content for Tile 1

@@ -123,7 +125,7 @@ We also have properties for setting the minimum width of the columns (`min-colum ### Example -`sample="/layouts/tile-manager/columngap", height="583", alt="{Platform} Tile Manager Column Example"` +`sample="/layouts/tile-manager/columngap", height="631", alt="{Platform} Tile Manager Column Example"` ## Tile component @@ -190,7 +192,7 @@ In this example, we created custom action buttons using the Ignite UI Icon Butto ## Resizing -Resizing in the tile manager is a functionality that allows tiles to be resized using three different resize adorners. +Resizing in the Tile Manager is a functionality that allows tiles to be resized using three different resize adorners. - **Side Adorner**: Adjusts the width by modifying the column span. - **Bottom Adorner**: Adjusts the height by modifying the row span. @@ -200,6 +202,8 @@ To ensure smooth resizing, a ghost element is used instead of directly modifying > [!Note] If the ghost element exceeds the available grid space, it will automatically adjust to the largest possible span within the grid's limits. +The Tile Manager automatically rearranges itself when a tile changes size, ensuring that there is minimal empty space. That's why expanding a tile may push adjacent tiles into new positions, while shrinking creates gaps that other tiles may fill dynamically. This ensures that the Tile Manager stays as compact as possible, without any overlapping tiles, and that all movements remain within the defined grid structure. + We can use the `resize-mode` property to control how resizing is applied in the Tile Manager. It can be set to either `hover` or `always`, which determines when the resize adorners are visible. ```html @@ -222,7 +226,7 @@ You can see the difference between the two states in the example below: There are several constraints and limitations in the resizing process: - A tile cannot be resized smaller than its defined minimum width or height (minColWidth, minRowHeight). -- A tile cannot exceed the maximum available space in the grid. If a tile starts at a specific column or row, and the user tries to resize it beyond the visible grid area, it will only expand up to the maximum available columns or rows from its starting position. +- A tile cannot exceed the maximum available horizontal space in the grid. ## Reorder @@ -254,8 +258,8 @@ Similar to resizing, when you initiate the drag-and-drop process, a ghost elemen The Tile Manager provides methods that help manage the layout of tiles: -- The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order and positions of all tiles, so you can later restore it to this exact configuration. -- The `loadLayout` method enables you to load a previously saved layout. When called, it restores the Tile Manager to the exact state it was in when the layout was saved, including the order and positions of the tiles. +- The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order, size and position of all tiles, so you can later restore it to this exact configuration. +- The `loadLayout` method enables you to load a previously saved layout. When called, it restores the Tile Manager to the exact state it was in when the layout was saved, including the order, size and position of the tiles. `sample="/layouts/tile-manager/layout", height="525", alt="{Platform} Tile Manager Layout Example"` @@ -276,7 +280,7 @@ The `Tile` component exposes several CSS properties we can use: | `trigger` | The diagonal adorner | | `trigger-bottom` | The vertical adorner. | -Using these CSS parts you can customize the appearance of the three components as follows: +Using these CSS parts you can customize the appearance of the two components as follows: ```css igc-tile-manager::part(base) { From 6b76b80585247426bcee4e9977e3cbe4adc9ab9d Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Tue, 11 Mar 2025 15:01:31 -0400 Subject: [PATCH 09/16] Update chart-data-selection.md mdd-remove-flag-for-series-matcher --- doc/en/components/charts/features/chart-data-selection.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/doc/en/components/charts/features/chart-data-selection.md b/doc/en/components/charts/features/chart-data-selection.md index 1aed1f756..3a3a70ac1 100644 --- a/doc/en/components/charts/features/chart-data-selection.md +++ b/doc/en/components/charts/features/chart-data-selection.md @@ -74,12 +74,8 @@ The matcher is ideal for using in charts, such as the `CategoryChart` when you d For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to select the series bound to Solar values, you can add a ChartSelection object to the SelectedSeriesItems collection using a matcher with the following properties set. - - `sample="/charts/category-chart/selection-matcher", height="500", alt="{Platform} Selection Matcher"` - - ## API References The following is a list of API members mentioned in the above sections: From eea9188376306655e15b6fc625159e81ab3332b0 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 12 Mar 2025 02:14:19 +0200 Subject: [PATCH 10/16] docs(tile-manager): fix comments --- doc/en/components/layouts/tile-manager.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/doc/en/components/layouts/tile-manager.md b/doc/en/components/layouts/tile-manager.md index 36e8de2c2..52b14e40b 100644 --- a/doc/en/components/layouts/tile-manager.md +++ b/doc/en/components/layouts/tile-manager.md @@ -7,7 +7,7 @@ mentionedTypes: ["TileManager"] # {Platform} Tile Manager Overview -The `igc-tile-manager` component enables the display of content in individual tiles. It allows users to interact with these tiles by rearranging and resizing them, giving them the freedom to customize the layout and appearance of the content according to their preferences. This flexibility enhances the user experience by enabling a more personalized and efficient way to view and manage content. +The {Platform} Tile Manager component enables the display of content in individual tiles. It allows users to interact with these tiles by rearranging and resizing them, giving them the freedom to customize the layout and appearance of the content according to their preferences. This flexibility enhances the user experience by enabling a more personalized and efficient way to view and manage content. ## {Platform} Tile Manager Example @@ -135,6 +135,8 @@ The Tile component has properties that can be set individually for each tile. So - The `row-span` property determines how many rows the tile will span vertically, adjusting the tile's height within the layout. - The `col-start` property specifies the starting column where the tile is placed. - The `row-start` property specifies the starting row where the tile is placed. +- The `disable-fullscreen` property hides the default fullscreen action button. +- The `disable-maximize` property hides the default maximize toggle action button. - The `disable-resize` property prevents the tile from being resized by the user. ```html @@ -173,12 +175,13 @@ By default, the header section includes two action buttons: -If you want to display just one of the two buttons, you can set it as a slot attribute within the Tile component. Use the `maximize-action` value to show only the maximize button, or the `fullscreen-action` value to show only the fullscreen button. +If you want to display just one of the two buttons, you can set either `disable-maximize` or `disable-fullscreen` property. To customize the appearance you can use the `maximize-action` slot for the maximize button, or the `fullscreen-action` slot for the fullscreen button. ```html - -
+ + +

Content for Tile 1

@@ -204,7 +207,7 @@ To ensure smooth resizing, a ghost element is used instead of directly modifying The Tile Manager automatically rearranges itself when a tile changes size, ensuring that there is minimal empty space. That's why expanding a tile may push adjacent tiles into new positions, while shrinking creates gaps that other tiles may fill dynamically. This ensures that the Tile Manager stays as compact as possible, without any overlapping tiles, and that all movements remain within the defined grid structure. -We can use the `resize-mode` property to control how resizing is applied in the Tile Manager. It can be set to either `hover` or `always`, which determines when the resize adorners are visible. +We can use the `resize-mode` property to control how resizing is applied in the Tile Manager. It can be set to `none`, `hover` or `always`, which determines when the resize adorners are visible. The default value is `none` and the tile could not be resized. ```html @@ -217,7 +220,7 @@ We can use the `resize-mode` property to control how resizing is applied in the ``` -You can see the difference between the two states in the example below: +You can see the difference between the three states in the example below: `sample="/layouts/tile-manager/resize", height="522", alt="{Platform} Tile Manager Resize Example"` @@ -259,7 +262,7 @@ Similar to resizing, when you initiate the drag-and-drop process, a ghost elemen The Tile Manager provides methods that help manage the layout of tiles: - The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order, size and position of all tiles, so you can later restore it to this exact configuration. -- The `loadLayout` method enables you to load a previously saved layout. When called, it restores the Tile Manager to the exact state it was in when the layout was saved, including the order, size and position of the tiles. +- The `loadLayout` method enables you to load a previously saved layout. When called, it restores the tiles to the exact state they were in when the layout was saved, including their order, size and position. `sample="/layouts/tile-manager/layout", height="525", alt="{Platform} Tile Manager Layout Example"` From ec3b52b6c33a0ceb83332edac9a908644aafbede Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 12 Mar 2025 12:59:11 +0200 Subject: [PATCH 11/16] docs(tile-manager): added text about the adorner icons to the styling topic --- doc/en/components/layouts/tile-manager.md | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/doc/en/components/layouts/tile-manager.md b/doc/en/components/layouts/tile-manager.md index 52b14e40b..15880a7d7 100644 --- a/doc/en/components/layouts/tile-manager.md +++ b/doc/en/components/layouts/tile-manager.md @@ -264,7 +264,7 @@ The Tile Manager provides methods that help manage the layout of tiles: - The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order, size and position of all tiles, so you can later restore it to this exact configuration. - The `loadLayout` method enables you to load a previously saved layout. When called, it restores the tiles to the exact state they were in when the layout was saved, including their order, size and position. -`sample="/layouts/tile-manager/layout", height="525", alt="{Platform} Tile Manager Layout Example"` +`sample="/layouts/tile-manager/layout", height="527", alt="{Platform} Tile Manager Layout Example"` ## Styling @@ -302,16 +302,28 @@ igc-tile::part(title) { color: var(--ig-primary-400); } -igc-tile::part(trigger-side), igc-tile::part(trigger-bottom) { +igc-tile:nth-child(n+2)::part(trigger-side), +igc-tile:nth-child(n+2)::part(trigger-bottom) { background-color: var(--ig-success-500); } -igc-tile::part(trigger) { +igc-tile:nth-child(n+2)::part(trigger) { background-color: var(--ig-error-500); } ``` -`sample="/layouts/tile-manager/styling", height="479", alt="{Platform} Tile Manager Styling Example"` +You can also change the icon of the adorners to a custom one using the `side-adorner`, `corner-adorner`, and `bottom-adorner` slots. To do this, create an `igc-icon` element inside the tile element. Then, set its slot to one of the three adorners and specify the name of the icon you want to use. + +```html + + + + + Tile header + +``` + +`sample="/layouts/tile-manager/styling", height="481", alt="{Platform} Tile Manager Styling Example"` ## API References From e8dce57aec7e5474cf773b07ad568216f85eec4b Mon Sep 17 00:00:00 2001 From: Andrew Goldenbaum Date: Wed, 12 Mar 2025 10:36:04 -0400 Subject: [PATCH 12/16] Update docConfig.json --- docConfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docConfig.json b/docConfig.json index 80859a912..72af2977a 100644 --- a/docConfig.json +++ b/docConfig.json @@ -50,7 +50,7 @@ { "name": "{PackageVerChanges-24-1-SEP}", "value": "18.1.0 (September 2024)" }, { "name": "{PackageVerChanges-24-2-DEC}", "value": "18.2.0 (December 2024)" }, { "name": "{PackageVerChanges-24-2-JAN}", "value": "19.0.0 (January 2025)" }, - { "name": "{PackageVerChanges-24-2-FEB", "value": "19.0.1 (February 2025)"}, + { "name": "{PackageVerChanges-24-2-FEB}", "value": "19.0.1 (February 2025)"}, { "name": "{PackageVerLatest}", "value": "19.0.1"}, { "name": "{PackageAngularComponents}", "value": "igniteui-angular"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-angular-examples/tree/master/samples"}, From f924441a9d8493326116f831a0c18cd13e46f2e9 Mon Sep 17 00:00:00 2001 From: Andrew Goldenbaum Date: Wed, 12 Mar 2025 10:38:59 -0400 Subject: [PATCH 13/16] Update docConfig.json --- docConfig.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docConfig.json b/docConfig.json index 72af2977a..f0726989c 100644 --- a/docConfig.json +++ b/docConfig.json @@ -318,7 +318,7 @@ { "name": "{PackageVerChanges-24-1-SEP}", "value": "5.0.0 (September 2024)" }, { "name": "{PackageVerChanges-24-2-DEC}", "value": "5.1.1 (December 2024)" }, { "name": "{PackageVerChanges-24-2-JAN}", "value": "5.2.0 (January 2025)" }, - { "name": "{PackageVerChanges-24-2-FEB", "value": "5.3.0 (February 2025)"}, + { "name": "{PackageVerChanges-24-2-FEB}", "value": "5.3.0 (February 2025)"}, { "name": "{PackageCommonVerChanges-1.0.0}", "value": "1.0.0 (November 2021)"}, { "name": "{PackageCommonVerChanges-2.0.0}", "value": "2.0.0 (February 2022)"}, { "name": "{PackageCommonVerChanges-2.1.0}", "value": "2.1.0 (March 2022)"}, @@ -611,7 +611,7 @@ { "name": "{PackageVerChanges-24-2-NOV}", "value": "24.2.19 (November 2024)" }, { "name": "{PackageVerChanges-24-2-DEC}", "value": "24.2.52 (December 2024)" }, { "name": "{PackageVerChanges-24-2-JAN}", "value": "24.2.71 (January 2025)" }, - { "name": "{PackageVerChanges-24-2-FEB", "value": "24.2.85 (February 2025)"}, + { "name": "{PackageVerChanges-24-2-FEB}", "value": "24.2.85 (February 2025)"}, { "name": "{PackageVerLatest}", "value": "24.2.85"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-blazor-examples/tree/master/samples"}, From 11354e764d38aa1eb6955c3f05d4e6999a653808 Mon Sep 17 00:00:00 2001 From: mtrela Date: Wed, 12 Mar 2025 11:06:14 -0400 Subject: [PATCH 14/16] skip auto-PR targeting master branch in angular docs --- azure-pipelines/build-pipeline-make-pr-jp+kr.yml | 2 +- azure-pipelines/build-pipeline-make-pr.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/azure-pipelines/build-pipeline-make-pr-jp+kr.yml b/azure-pipelines/build-pipeline-make-pr-jp+kr.yml index 7f71ed268..9a9c6c001 100644 --- a/azure-pipelines/build-pipeline-make-pr-jp+kr.yml +++ b/azure-pipelines/build-pipeline-make-pr-jp+kr.yml @@ -8,7 +8,7 @@ schedules: displayName: 'Weekly build with automated PR creation' branches: include: - - master +# - master # MT: prevent generating auto PRs targeting master branch in angular docs - vnext always: true diff --git a/azure-pipelines/build-pipeline-make-pr.yml b/azure-pipelines/build-pipeline-make-pr.yml index a7e990572..1e55bece8 100644 --- a/azure-pipelines/build-pipeline-make-pr.yml +++ b/azure-pipelines/build-pipeline-make-pr.yml @@ -8,7 +8,7 @@ schedules: displayName: 'Weekly build with automated PR creation' branches: include: - - master +# - master # MT: prevent generating auto PRs targeting master branch in angular docs - vnext always: true From e0194c73ca0e4d566eca0491ce70ef6849528fee Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 12 Mar 2025 18:49:18 +0200 Subject: [PATCH 15/16] docs(tile-manager): fix comment - made overview sample scrollable --- doc/en/components/layouts/tile-manager.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/en/components/layouts/tile-manager.md b/doc/en/components/layouts/tile-manager.md index 15880a7d7..8945c014b 100644 --- a/doc/en/components/layouts/tile-manager.md +++ b/doc/en/components/layouts/tile-manager.md @@ -13,7 +13,7 @@ The {Platform} Tile Manager component enables the display of content in individu The following {ProductName} Tile Manager Example shows the component in action. -`sample="/layouts/tile-manager/overview", height="743", alt="{Platform} Tile Manager Example"` +`sample="/layouts/tile-manager/overview", height="752", scrollable, alt="{Platform} Tile Manager Example"` > [!Warning] Due to the iframe permissions policy, the fullscreen button in this example will only work when the example is opened in standalone mode by clicking the 'Expand to fullscreen' button in the top-right corner. From db0cedbf0c0c9697bd45bffb506f72fe038769e4 Mon Sep 17 00:00:00 2001 From: Galina Edinakova Date: Thu, 13 Mar 2025 17:18:39 +0200 Subject: [PATCH 16/16] Merge pull request #1472 from IgniteUI/gedinakova/remove-row-count-tile-manager fix(*): Removed the row-count prop --- doc/en/components/layouts/tile-manager.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/doc/en/components/layouts/tile-manager.md b/doc/en/components/layouts/tile-manager.md index 8945c014b..022cf20cd 100644 --- a/doc/en/components/layouts/tile-manager.md +++ b/doc/en/components/layouts/tile-manager.md @@ -69,10 +69,8 @@ For a complete introduction to the {ProductName}, read the [*Getting Started*](. We can specify the number of grid columns for our Tile Manager. To do this, simply set the `column-count` property to the desired number of columns. If the number is less than one or the property is not set, the Tile Manager will create as many columns as can fit, with each column being at least 200px wide and expanding to equally share the available space. When the viewport dimensions change, the tiles will also rearrange themselves to maximize the use of space. -We can also specify the number of grid rows for our Tile Manager using the `row-count` property. Again, if the number is less than one or the property is not set, the Tile Manager will create as many rows as needed. - ```html - + Tile 1 header

Content for Tile 1

@@ -81,11 +79,15 @@ We can also specify the number of grid rows for our Tile Manager using the `row- Tile 2 header

Content for Tile 2

+ + Tile 3 header +

Content for Tile 3

+
...
``` -In this code snippet, the tiles in the Tile Manager will be arranged into 2 rows and 2 columns. +In this code snippet, the three tiles in the Tile Manager will be arranged into 2 rows and 2 columns. ### Gap