OrderID
+10293
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Setup
+
+- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)
+
+## Running App in Visual Studio 2022
+
+NOTE: VS 2022 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2022** as an administrator
+
+- open the **BlazorClientApp.sln** solution
+
+- right click solution and select **Restore NuGet Packages** menu item
+
+- click **Debug** menu and select **Start Debugging** or press **F5** key
+
+
+## Running App in VS Code
+
+- open **VS Code** as an administrator
+
+- open this folder in **VS Code**
+
+- open a terminal window
+
+- to restore assemblies, run this command:
+```dotnet restore```
+
+- to run samples, run this command:
+```dotnet watch run```
+
+- wait for for message:
+**Now listening on: http://localhost:4200**
+
+- open **http://localhost:4200** in your browser
+
+
+## Resources
+
+- [Razor Component Models](https://www.codemag.com/article/1911052)
+- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
+- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)
diff --git a/samples/layouts/tile-manager/actions/_Imports.razor b/samples/layouts/tile-manager/actions/_Imports.razor
new file mode 100644
index 0000000000..b4bad03986
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/_Imports.razor
@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Infragistics.Samples
diff --git a/samples/layouts/tile-manager/actions/wwwroot/actions.js b/samples/layouts/tile-manager/actions/wwwroot/actions.js
new file mode 100644
index 0000000000..f3ab9492a3
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/wwwroot/actions.js
@@ -0,0 +1,64 @@
+window.customOneClick = (event) => {
+ const tile = event.target.closest('igc-tile');
+
+ if (tile) {
+ tile.maximized = !tile.maximized;
+
+ const actionsSlot = tile.querySelector('[slot="actions"]');
+ const currentBtn = event.target;
+
+ if (currentBtn) {
+ if (tile.maximized) {
+ currentBtn.setAttribute('name', 'south_west');
+ currentBtn.setAttribute('aria-label', 'collapse');
+
+ const chartBtn = document.createElement('igc-icon-button');
+ chartBtn.classList.add('additional-action');
+ chartBtn.setAttribute('slot', 'actions');
+ chartBtn.setAttribute('variant', 'flat');
+ chartBtn.setAttribute('collection', 'material');
+ chartBtn.setAttribute('name', 'chart');
+ chartBtn.setAttribute('aria-label', 'chart');
+
+ const moreBtn = document.createElement('igc-icon-button');
+ moreBtn.classList.add('additional-action');
+ moreBtn.setAttribute('slot', 'actions');
+ moreBtn.setAttribute('variant', 'flat');
+ moreBtn.setAttribute('collection', 'material');
+ moreBtn.setAttribute('name', 'more');
+ moreBtn.setAttribute('aria-label', 'more');
+
+ tile.append(chartBtn);
+ tile.append(moreBtn);
+ } else {
+ currentBtn.setAttribute('name', 'north_east');
+ currentBtn.setAttribute('aria-label', 'expand');
+
+ const additionalButtons =
+ actionsSlot.parentElement?.querySelectorAll('.additional-action');
+ additionalButtons?.forEach((btn) => btn.remove());
+ }
+ }
+ }
+};
+
+window.customTwoClick = (event) => {
+ const tile = event.target.closest('igc-tile');
+
+ if (tile) {
+ tile.maximized = !tile.maximized;
+
+ const currentBtn = event.target;
+
+ if (currentBtn) {
+ if (tile.maximized) {
+ currentBtn.setAttribute('name', 'south_west');
+ currentBtn.setAttribute('aria-label', 'collapse');
+ }
+ else {
+ currentBtn.setAttribute('name', 'north_east');
+ currentBtn.setAttribute('aria-label', 'expand');
+ }
+ }
+ }
+};
diff --git a/samples/layouts/tile-manager/actions/wwwroot/index.css b/samples/layouts/tile-manager/actions/wwwroot/index.css
new file mode 100644
index 0000000000..8da172bb87
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/wwwroot/index.css
@@ -0,0 +1,4 @@
+/*
+CSS styles are loaded from the shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/actions/wwwroot/index.html b/samples/layouts/tile-manager/actions/wwwroot/index.html
new file mode 100644
index 0000000000..79eafa30fc
--- /dev/null
+++ b/samples/layouts/tile-manager/actions/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private IgbTileManager TileManagerRef { get; set; }
+ private string GapValue = "10px";
+
+ public void OnInputChangeColumn(IgbComponentValueChangedEventArgs e)
+ {
+ double value;
+ double.TryParse(e.Detail, out value);
+ this.TileManagerRef.ColumnCount = value;
+ }
+
+ public void OnInputChangeGap(IgbComponentValueChangedEventArgs e)
+ {
+ GapValue = e.Detail;
+ }
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/columngap/BlazorClientApp.csproj b/samples/layouts/tile-manager/columngap/BlazorClientApp.csproj
new file mode 100644
index 0000000000..5af637830e
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/BlazorClientApp.csproj
@@ -0,0 +1,25 @@
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Setup
+
+- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)
+
+## Running App in Visual Studio 2022
+
+NOTE: VS 2022 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2022** as an administrator
+
+- open the **BlazorClientApp.sln** solution
+
+- right click solution and select **Restore NuGet Packages** menu item
+
+- click **Debug** menu and select **Start Debugging** or press **F5** key
+
+
+## Running App in VS Code
+
+- open **VS Code** as an administrator
+
+- open this folder in **VS Code**
+
+- open a terminal window
+
+- to restore assemblies, run this command:
+```dotnet restore```
+
+- to run samples, run this command:
+```dotnet watch run```
+
+- wait for for message:
+**Now listening on: http://localhost:4200**
+
+- open **http://localhost:4200** in your browser
+
+
+## Resources
+
+- [Razor Component Models](https://www.codemag.com/article/1911052)
+- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
+- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)
diff --git a/samples/layouts/tile-manager/columngap/_Imports.razor b/samples/layouts/tile-manager/columngap/_Imports.razor
new file mode 100644
index 0000000000..b4bad03986
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/_Imports.razor
@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Infragistics.Samples
diff --git a/samples/layouts/tile-manager/columngap/wwwroot/index.css b/samples/layouts/tile-manager/columngap/wwwroot/index.css
new file mode 100644
index 0000000000..8da172bb87
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/wwwroot/index.css
@@ -0,0 +1,4 @@
+/*
+CSS styles are loaded from the shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/columngap/wwwroot/index.html b/samples/layouts/tile-manager/columngap/wwwroot/index.html
new file mode 100644
index 0000000000..79eafa30fc
--- /dev/null
+++ b/samples/layouts/tile-manager/columngap/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Tile 1 header
+
+
+ Tile 2 header
+
+
+ Tile 3 header
+
+
+ Tile 4 header
+
+
+
+
+@code {
+ private IgbTileManager TileManagerRef { get; set; }
+ private TileManagerDragMode DragMode = TileManagerDragMode.TileHeader;
+
+ public void OnRadioButtonClick(IgbRadioChangeEventArgs e)
+ {
+ if (this.TileManagerRef != null)
+ {
+ switch (e.Detail.Value)
+ {
+ case "TileHeader":
+ this.DragMode = TileManagerDragMode.TileHeader;
+ break;
+ case "Tile":
+ this.DragMode = TileManagerDragMode.Tile;
+ break;
+ case "None":
+ this.DragMode = TileManagerDragMode.None;
+ break;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/dragndrop/BlazorClientApp.csproj b/samples/layouts/tile-manager/dragndrop/BlazorClientApp.csproj
new file mode 100644
index 0000000000..5af637830e
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/BlazorClientApp.csproj
@@ -0,0 +1,25 @@
+
+
+ Tile-header
+ Tile
+ None
+
+
+ Content for Tile 1
+Content for Tile 2
+Content for Tile 3
+Content for Tile 4
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Setup
+
+- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)
+
+## Running App in Visual Studio 2022
+
+NOTE: VS 2022 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2022** as an administrator
+
+- open the **BlazorClientApp.sln** solution
+
+- right click solution and select **Restore NuGet Packages** menu item
+
+- click **Debug** menu and select **Start Debugging** or press **F5** key
+
+
+## Running App in VS Code
+
+- open **VS Code** as an administrator
+
+- open this folder in **VS Code**
+
+- open a terminal window
+
+- to restore assemblies, run this command:
+```dotnet restore```
+
+- to run samples, run this command:
+```dotnet watch run```
+
+- wait for for message:
+**Now listening on: http://localhost:4200**
+
+- open **http://localhost:4200** in your browser
+
+
+## Resources
+
+- [Razor Component Models](https://www.codemag.com/article/1911052)
+- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
+- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)
diff --git a/samples/layouts/tile-manager/dragndrop/_Imports.razor b/samples/layouts/tile-manager/dragndrop/_Imports.razor
new file mode 100644
index 0000000000..b4bad03986
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/_Imports.razor
@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Infragistics.Samples
diff --git a/samples/layouts/tile-manager/dragndrop/wwwroot/index.css b/samples/layouts/tile-manager/dragndrop/wwwroot/index.css
new file mode 100644
index 0000000000..8da172bb87
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/wwwroot/index.css
@@ -0,0 +1,4 @@
+/*
+CSS styles are loaded from the shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/dragndrop/wwwroot/index.html b/samples/layouts/tile-manager/dragndrop/wwwroot/index.html
new file mode 100644
index 0000000000..79eafa30fc
--- /dev/null
+++ b/samples/layouts/tile-manager/dragndrop/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Tile 1 header
+
+
+ Tile 2 header
+
+
+ Tile 3 header
+
+
+ Tile 4 header
+
+
+
+
+@code {
+ private IgbTileManager TileManagerRef { get; set; }
+ private string SerializeData;
+
+ public void SaveLayout()
+ {
+ this.SerializeData = this.TileManagerRef.SaveLayout();
+ }
+
+ public void LoadLayout()
+ {
+ this.TileManagerRef.LoadLayout(SerializeData);
+ }
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/layout/BlazorClientApp.csproj b/samples/layouts/tile-manager/layout/BlazorClientApp.csproj
new file mode 100644
index 0000000000..5af637830e
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/BlazorClientApp.csproj
@@ -0,0 +1,25 @@
+
+ Save Layout
+ Load Layout
+ Add Tile
+ Remove Tile
+
+ Content for Tile 1
+Content for Tile 2
+Content for Tile 3
+Content for Tile 4
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Setup
+
+- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)
+
+## Running App in Visual Studio 2022
+
+NOTE: VS 2022 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2022** as an administrator
+
+- open the **BlazorClientApp.sln** solution
+
+- right click solution and select **Restore NuGet Packages** menu item
+
+- click **Debug** menu and select **Start Debugging** or press **F5** key
+
+
+## Running App in VS Code
+
+- open **VS Code** as an administrator
+
+- open this folder in **VS Code**
+
+- open a terminal window
+
+- to restore assemblies, run this command:
+```dotnet restore```
+
+- to run samples, run this command:
+```dotnet watch run```
+
+- wait for for message:
+**Now listening on: http://localhost:4200**
+
+- open **http://localhost:4200** in your browser
+
+
+## Resources
+
+- [Razor Component Models](https://www.codemag.com/article/1911052)
+- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
+- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)
diff --git a/samples/layouts/tile-manager/layout/_Imports.razor b/samples/layouts/tile-manager/layout/_Imports.razor
new file mode 100644
index 0000000000..b4bad03986
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/_Imports.razor
@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Infragistics.Samples
diff --git a/samples/layouts/tile-manager/layout/wwwroot/actions.js b/samples/layouts/tile-manager/layout/wwwroot/actions.js
new file mode 100644
index 0000000000..9b9137de20
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/wwwroot/actions.js
@@ -0,0 +1,26 @@
+let index = 4;
+
+window.addTile = () => {
+ const tileManager = document.querySelector('igc-tile-manager');
+ const tiles = tileManager.querySelectorAll('igc-tile');
+ const newTile = document.createElement('igc-tile');
+ const contentHeader = document.createElement('span');
+ const content = document.createElement('p');
+ index++;
+ contentHeader.textContent = `Tile ${index} header`;
+ content.textContent = `Content for Tile ${index}`;
+ contentHeader.setAttribute('slot', 'title');
+ newTile.position = 0;
+ newTile.append(contentHeader);
+ newTile.append(content);
+ tileManager.insertBefore(newTile, tiles[3]);
+};
+
+window.removeTile = () => {
+ const tileManager = document.querySelector('igc-tile-manager');
+ const firstTile = tileManager.querySelector('igc-tile:first-of-type');
+
+ if (firstTile) {
+ firstTile.remove();
+ }
+}
diff --git a/samples/layouts/tile-manager/layout/wwwroot/index.css b/samples/layouts/tile-manager/layout/wwwroot/index.css
new file mode 100644
index 0000000000..8da172bb87
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/wwwroot/index.css
@@ -0,0 +1,4 @@
+/*
+CSS styles are loaded from the shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/layout/wwwroot/index.html b/samples/layouts/tile-manager/layout/wwwroot/index.html
new file mode 100644
index 0000000000..79eafa30fc
--- /dev/null
+++ b/samples/layouts/tile-manager/layout/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private IgbIcon IconRef { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (this.IconRef != null && firstRender)
+ {
+ await this.IconRef.EnsureReady();
+ const string listIcon = "";
+ const string calendarIcon = "";
+ const string productIcon = "";
+ await this.IconRef.RegisterIconFromTextAsync("list", listIcon, "material");
+ await this.IconRef.RegisterIconFromTextAsync("calendar", calendarIcon, "material");
+ await this.IconRef.RegisterIconFromTextAsync("product", productIcon, "material");
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/overview/BlazorClientApp.csproj b/samples/layouts/tile-manager/overview/BlazorClientApp.csproj
new file mode 100644
index 0000000000..5af637830e
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/BlazorClientApp.csproj
@@ -0,0 +1,25 @@
+Order info
+
+
+
+
+ Customer Name
+Tortuga Restaurante
+
+
+ Order Date
+August 29, 1996
+
+
+ Shipped Date
+September 11, 1996
+
+
+ Product Name
+Carnavon Tigers
+
+
+ Ship Country
+Mexico
+Order Line Items
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Carnavon Tigers
+
+ Quantity 12
+
+
+ Unit Price $50
+
+
+
+
+
+
+
+
+
+
+
+ Guarana Fantastica
+
+ Quantity 10
+
+
+ Unit Price $4
+
+
+
+
+
+
+
+
+
+
+
+ Vegie-spread
+
+ Quantity 5
+
+
+ Unit Price $35
+
+
+
+
+
+
+
+
+
+
+
+ Rhonbrau Klosterbier
+
+ Quantity 7
+
+
+ Unit Price $6
+
+ Order Value
+
+
+ $8.66K
+Item quantity
+
+
+ 4
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Setup
+
+- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)
+
+## Running App in Visual Studio 2022
+
+NOTE: VS 2022 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2022** as an administrator
+
+- open the **BlazorClientApp.sln** solution
+
+- right click solution and select **Restore NuGet Packages** menu item
+
+- click **Debug** menu and select **Start Debugging** or press **F5** key
+
+
+## Running App in VS Code
+
+- open **VS Code** as an administrator
+
+- open this folder in **VS Code**
+
+- open a terminal window
+
+- to restore assemblies, run this command:
+```dotnet restore```
+
+- to run samples, run this command:
+```dotnet watch run```
+
+- wait for for message:
+**Now listening on: http://localhost:4200**
+
+- open **http://localhost:4200** in your browser
+
+
+## Resources
+
+- [Razor Component Models](https://www.codemag.com/article/1911052)
+- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
+- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)
diff --git a/samples/layouts/tile-manager/overview/_Imports.razor b/samples/layouts/tile-manager/overview/_Imports.razor
new file mode 100644
index 0000000000..b4bad03986
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/_Imports.razor
@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Infragistics.Samples
diff --git a/samples/layouts/tile-manager/overview/wwwroot/index.css b/samples/layouts/tile-manager/overview/wwwroot/index.css
new file mode 100644
index 0000000000..8da172bb87
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/wwwroot/index.css
@@ -0,0 +1,4 @@
+/*
+CSS styles are loaded from the shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/overview/wwwroot/index.html b/samples/layouts/tile-manager/overview/wwwroot/index.html
new file mode 100644
index 0000000000..79eafa30fc
--- /dev/null
+++ b/samples/layouts/tile-manager/overview/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Tile 1 header
+
+
+ Tile 2 header
+
+
+ Tile 3 header
+
+
+ Tile 4 header
+
+
+
+
+@code {
+ private IgbTileManager TileManagerRef { get; set; }
+ private TileManagerResizeMode ResizeMode = TileManagerResizeMode.Always;
+
+ public void OnRadioButtonClick(IgbRadioChangeEventArgs e)
+ {
+ if (this.TileManagerRef != null)
+ {
+ switch (e.Detail.Value)
+ {
+ case "Hover":
+ this.ResizeMode = TileManagerResizeMode.Hover;
+ break;
+ case "Always":
+ this.ResizeMode = TileManagerResizeMode.Always;
+ break;
+ case "None":
+ this.ResizeMode = TileManagerResizeMode.None;
+ break;
+ }
+ }
+ }
+
+ public void OnInputChangeColumnWidth(IgbComponentValueChangedEventArgs e)
+ {
+ if (this.TileManagerRef != null)
+ {
+ this.TileManagerRef.MinColumnWidth = e.Detail;
+ }
+ }
+
+ public void OnInputChangeRowHeight(IgbComponentValueChangedEventArgs e)
+ {
+ if (this.TileManagerRef != null)
+ {
+ this.TileManagerRef.MinRowHeight = e.Detail;
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/resize/BlazorClientApp.csproj b/samples/layouts/tile-manager/resize/BlazorClientApp.csproj
new file mode 100644
index 0000000000..5af637830e
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/BlazorClientApp.csproj
@@ -0,0 +1,25 @@
+
+
+ Always
+ Hover
+ None
+
+
+ Content for Tile 1
+Content for Tile 2
+Content for Tile 3
+Content for Tile 4
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Setup
+
+- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)
+
+## Running App in Visual Studio 2022
+
+NOTE: VS 2022 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2022** as an administrator
+
+- open the **BlazorClientApp.sln** solution
+
+- right click solution and select **Restore NuGet Packages** menu item
+
+- click **Debug** menu and select **Start Debugging** or press **F5** key
+
+
+## Running App in VS Code
+
+- open **VS Code** as an administrator
+
+- open this folder in **VS Code**
+
+- open a terminal window
+
+- to restore assemblies, run this command:
+```dotnet restore```
+
+- to run samples, run this command:
+```dotnet watch run```
+
+- wait for for message:
+**Now listening on: http://localhost:4200**
+
+- open **http://localhost:4200** in your browser
+
+
+## Resources
+
+- [Razor Component Models](https://www.codemag.com/article/1911052)
+- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
+- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)
diff --git a/samples/layouts/tile-manager/resize/_Imports.razor b/samples/layouts/tile-manager/resize/_Imports.razor
new file mode 100644
index 0000000000..b4bad03986
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/_Imports.razor
@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Infragistics.Samples
diff --git a/samples/layouts/tile-manager/resize/wwwroot/index.css b/samples/layouts/tile-manager/resize/wwwroot/index.css
new file mode 100644
index 0000000000..8da172bb87
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/wwwroot/index.css
@@ -0,0 +1,4 @@
+/*
+CSS styles are loaded from the shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/resize/wwwroot/index.html b/samples/layouts/tile-manager/resize/wwwroot/index.html
new file mode 100644
index 0000000000..79eafa30fc
--- /dev/null
+++ b/samples/layouts/tile-manager/resize/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tile 2 header
+
+
+ Tile 3 header
+
+
+ Tile 4 header
+
+
+
+
+@code {
+ private IgbIcon IconRef { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (this.IconRef != null && firstRender)
+ {
+ await this.IconRef.EnsureReady();
+ const string indicatorIcon = "";
+ await this.IconRef.RegisterIconFromTextAsync("indicator", indicatorIcon, "material");
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/styling/BlazorClientApp.csproj b/samples/layouts/tile-manager/styling/BlazorClientApp.csproj
new file mode 100644
index 0000000000..5af637830e
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/BlazorClientApp.csproj
@@ -0,0 +1,25 @@
+Content for Tile 1
+Content for Tile 2
+Content for Tile 3
+Content for Tile 4
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Setup
+
+- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)
+
+## Running App in Visual Studio 2022
+
+NOTE: VS 2022 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2022** as an administrator
+
+- open the **BlazorClientApp.sln** solution
+
+- right click solution and select **Restore NuGet Packages** menu item
+
+- click **Debug** menu and select **Start Debugging** or press **F5** key
+
+
+## Running App in VS Code
+
+- open **VS Code** as an administrator
+
+- open this folder in **VS Code**
+
+- open a terminal window
+
+- to restore assemblies, run this command:
+```dotnet restore```
+
+- to run samples, run this command:
+```dotnet watch run```
+
+- wait for for message:
+**Now listening on: http://localhost:4200**
+
+- open **http://localhost:4200** in your browser
+
+
+## Resources
+
+- [Razor Component Models](https://www.codemag.com/article/1911052)
+- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
+- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)
diff --git a/samples/layouts/tile-manager/styling/_Imports.razor b/samples/layouts/tile-manager/styling/_Imports.razor
new file mode 100644
index 0000000000..b4bad03986
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/_Imports.razor
@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Infragistics.Samples
diff --git a/samples/layouts/tile-manager/styling/wwwroot/index.css b/samples/layouts/tile-manager/styling/wwwroot/index.css
new file mode 100644
index 0000000000..8da172bb87
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/wwwroot/index.css
@@ -0,0 +1,4 @@
+/*
+CSS styles are loaded from the shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
\ No newline at end of file
diff --git a/samples/layouts/tile-manager/styling/wwwroot/index.html b/samples/layouts/tile-manager/styling/wwwroot/index.html
new file mode 100644
index 0000000000..79eafa30fc
--- /dev/null
+++ b/samples/layouts/tile-manager/styling/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+