+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var legend = this.legend;
+ var chart = this.chart;
+
+ this.BindElements = () => {
+ chart.Legend = this.legend;
+ };
+ this.BindElements();
+
+ if (firstRender) {
+ this.SelectionMatcherOnViewInit();
+ }
+ }
+
+ private IgbLegend legend;
+ private IgbCategoryChart chart;
+
+ private System.Threading.Timer _timer;
+
+ private void SelectionMatcherOnViewInit()
+ {
+ _timer = new System.Threading.Timer((_) =>
+ {
+ addSelection();
+ }, null, 100, 0);
+ }
+
+ private void addSelection()
+ {
+ var chart = this.chart;
+
+ IgbChartSelection selection = new IgbChartSelection();
+ selection.Item = EnergyRenewableConsumption[1];
+ IgbSeriesMatcher matcher = new IgbSeriesMatcher();
+ matcher.MemberPath = "Solar";
+ matcher.MemberPathType = "ValueMemberPath";
+ selection.Matcher = matcher;
+
+ chart.SelectedSeriesItems.Add(selection);
+
+ selection = new IgbChartSelection();
+ selection.Item = EnergyRenewableConsumption[1];
+ matcher = new IgbSeriesMatcher();
+ matcher.MemberPath = "Hydro";
+ matcher.MemberPathType = "ValueMemberPath";
+
+ selection.Matcher = matcher;
+
+ chart.SelectedSeriesItems.Add(selection);
+ }
+
+ private EnergyRenewableConsumption _energyRenewableConsumption = null;
+ public EnergyRenewableConsumption EnergyRenewableConsumption
+ {
+ get
+ {
+ if (_energyRenewableConsumption == null)
+ {
+ _energyRenewableConsumption = new EnergyRenewableConsumption();
+ }
+ return _energyRenewableConsumption;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/category-chart/selection-matcher/BlazorClientApp.csproj b/samples/charts/category-chart/selection-matcher/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/category-chart/selection-matcher/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Renewable Electricity Generated
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/category-chart/selection-matcher/_Imports.razor b/samples/charts/category-chart/selection-matcher/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/category-chart/selection-matcher/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/category-chart/selection-matcher/wwwroot/index.css b/samples/charts/category-chart/selection-matcher/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/category-chart/selection-matcher/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/
+*/
diff --git a/samples/charts/category-chart/selection-matcher/wwwroot/index.html b/samples/charts/category-chart/selection-matcher/wwwroot/index.html
new file mode 100644
index 0000000000..8833030d8e
--- /dev/null
+++ b/samples/charts/category-chart/selection-matcher/wwwroot/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+@code {
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var chart = this.chart;
+
+ }
+
+ private IgbCategoryChart chart;
+
+ private TemperatureAverageData _temperatureAverageData = null;
+ public TemperatureAverageData TemperatureAverageData
+ {
+ get
+ {
+ if (_temperatureAverageData == null)
+ {
+ _temperatureAverageData = new TemperatureAverageData();
+ }
+ return _temperatureAverageData;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/category-chart/selection-modes/BlazorClientApp.csproj b/samples/charts/category-chart/selection-modes/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/category-chart/selection-modes/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Average Temperature Range in New York
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/category-chart/selection-modes/TemperatureAverageData.cs b/samples/charts/category-chart/selection-modes/TemperatureAverageData.cs
new file mode 100644
index 0000000000..7ea0b1edf7
--- /dev/null
+++ b/samples/charts/category-chart/selection-modes/TemperatureAverageData.cs
@@ -0,0 +1,75 @@
+using System;
+using System.Collections.Generic;
+public class TemperatureAverageDataItem
+{
+ public string Month { get; set; }
+ public double Temperature { get; set; }
+}
+
+public class TemperatureAverageData
+ : List
+
+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var legend = this.legend;
+ var propertyEditor = this.propertyEditor;
+ var selectionModeEditor = this.selectionModeEditor;
+ var selectionBehaviorEditor = this.selectionBehaviorEditor;
+ var chart = this.chart;
+
+ this.BindElements = () => {
+ propertyEditor.Target = this.chart;
+ chart.Legend = this.legend;
+ };
+ this.BindElements();
+
+ }
+
+ private IgbLegend legend;
+ private IgbPropertyEditorPanel propertyEditor;
+ private IgbPropertyEditorPropertyDescription selectionModeEditor;
+ private IgbPropertyEditorPropertyDescription selectionBehaviorEditor;
+ private IgbCategoryChart chart;
+
+ private EnergyRenewableConsumption _energyRenewableConsumption = null;
+ public EnergyRenewableConsumption EnergyRenewableConsumption
+ {
+ get
+ {
+ if (_energyRenewableConsumption == null)
+ {
+ _energyRenewableConsumption = new EnergyRenewableConsumption();
+ }
+ return _energyRenewableConsumption;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/category-chart/selection-multiple-modes/BlazorClientApp.csproj b/samples/charts/category-chart/selection-multiple-modes/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/category-chart/selection-multiple-modes/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Highest Grossing Movie Franchises
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/category-chart/selection-multiple-modes/_Imports.razor b/samples/charts/category-chart/selection-multiple-modes/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/category-chart/selection-multiple-modes/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/category-chart/selection-multiple-modes/wwwroot/index.css b/samples/charts/category-chart/selection-multiple-modes/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/category-chart/selection-multiple-modes/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/
+*/
diff --git a/samples/charts/category-chart/selection-multiple-modes/wwwroot/index.html b/samples/charts/category-chart/selection-multiple-modes/wwwroot/index.html
new file mode 100644
index 0000000000..fcfbabf8c3
--- /dev/null
+++ b/samples/charts/category-chart/selection-multiple-modes/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var legend = this.legend;
+ var chart = this.chart;
+ var angleAxis = this.angleAxis;
+ var radiusAxis = this.radiusAxis;
+ var radialColumnSeries1 = this.radialColumnSeries1;
+ var radialColumnSeries2 = this.radialColumnSeries2;
+
+ this.BindElements = () => {
+ chart.Legend = this.legend;
+ };
+ this.BindElements();
+
+ }
+
+ private IgbLegend legend;
+ private IgbDataChart chart;
+ private IgbCategoryAngleAxis angleAxis;
+ private IgbNumericRadiusAxis radiusAxis;
+ private IgbRadialColumnSeries radialColumnSeries1;
+ private IgbRadialColumnSeries radialColumnSeries2;
+
+ private FootballPlayerStats _footballPlayerStats = null;
+ public FootballPlayerStats FootballPlayerStats
+ {
+ get
+ {
+ if (_footballPlayerStats == null)
+ {
+ _footballPlayerStats = new FootballPlayerStats();
+ }
+ return _footballPlayerStats;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-column-chart-selection/BlazorClientApp.csproj b/samples/charts/data-chart/radial-column-chart-selection/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-chart/radial-column-chart-selection/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Ronaldo vs Messi Player Stats
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/data-chart/radial-column-chart-selection/_Imports.razor b/samples/charts/data-chart/radial-column-chart-selection/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-chart/radial-column-chart-selection/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-chart/radial-column-chart-selection/wwwroot/index.css b/samples/charts/data-chart/radial-column-chart-selection/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-chart/radial-column-chart-selection/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/
+*/
diff --git a/samples/charts/data-chart/radial-column-chart-selection/wwwroot/index.html b/samples/charts/data-chart/radial-column-chart-selection/wwwroot/index.html
new file mode 100644
index 0000000000..8833030d8e
--- /dev/null
+++ b/samples/charts/data-chart/radial-column-chart-selection/wwwroot/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var propertyEditorPanel1 = this.propertyEditorPanel1;
+ var labelExtent = this.labelExtent;
+ var labelMode = this.labelMode;
+ var legend = this.legend;
+ var chart = this.chart;
+ var angleAxis = this.angleAxis;
+ var radiusAxis = this.radiusAxis;
+ var radialColumnSeries1 = this.radialColumnSeries1;
+ var radialColumnSeries2 = this.radialColumnSeries2;
+ var dataToolTipLayer = this.dataToolTipLayer;
+
+ this.BindElements = () => {
+ propertyEditorPanel1.Target = this.angleAxis;
+ chart.Legend = this.legend;
+ };
+ this.BindElements();
+
+ }
+
+ private IgbPropertyEditorPanel propertyEditorPanel1;
+ private IgbPropertyEditorPropertyDescription labelExtent;
+ private IgbPropertyEditorPropertyDescription labelMode;
+ private IgbLegend legend;
+ private IgbDataChart chart;
+ private IgbCategoryAngleAxis angleAxis;
+ private IgbNumericRadiusAxis radiusAxis;
+ private IgbRadialColumnSeries radialColumnSeries1;
+ private IgbRadialColumnSeries radialColumnSeries2;
+ private IgbDataToolTipLayer dataToolTipLayer;
+
+ private FootballPlayerStats _footballPlayerStats = null;
+ public FootballPlayerStats FootballPlayerStats
+ {
+ get
+ {
+ if (_footballPlayerStats == null)
+ {
+ _footballPlayerStats = new FootballPlayerStats();
+ }
+ return _footballPlayerStats;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-label-mode/BlazorClientApp.csproj b/samples/charts/data-chart/radial-label-mode/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-chart/radial-label-mode/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Ronaldo vs Messi Player Stats
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/data-chart/radial-label-mode/_Imports.razor b/samples/charts/data-chart/radial-label-mode/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-chart/radial-label-mode/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-chart/radial-label-mode/wwwroot/index.css b/samples/charts/data-chart/radial-label-mode/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-chart/radial-label-mode/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/
+*/
diff --git a/samples/charts/data-chart/radial-label-mode/wwwroot/index.html b/samples/charts/data-chart/radial-label-mode/wwwroot/index.html
new file mode 100644
index 0000000000..fcfbabf8c3
--- /dev/null
+++ b/samples/charts/data-chart/radial-label-mode/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var chart = this.chart;
+ var angleAxis = this.angleAxis;
+ var radiusAxis = this.radiusAxis;
+ var radialPieSeries1 = this.radialPieSeries1;
+
+ }
+
+ private IgbDataChart chart;
+ private IgbProportionalCategoryAngleAxis angleAxis;
+ private IgbNumericRadiusAxis radiusAxis;
+ private IgbRadialPieSeries radialPieSeries1;
+
+ private RadialProportionalData _radialProportionalData = null;
+ public RadialProportionalData RadialProportionalData
+ {
+ get
+ {
+ if (_radialProportionalData == null)
+ {
+ _radialProportionalData = new RadialProportionalData();
+ }
+ return _radialProportionalData;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/BlazorClientApp.csproj b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/data-chart/radial-pie-proportional-category-angle-axis/_Imports.razor b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-chart/radial-pie-proportional-category-angle-axis/wwwroot/index.css b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/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/
+*/
diff --git a/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/wwwroot/index.html b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/wwwroot/index.html
new file mode 100644
index 0000000000..8833030d8e
--- /dev/null
+++ b/samples/charts/data-chart/radial-pie-proportional-category-angle-axis/wwwroot/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var legend = this.legend;
+ var chart = this.chart;
+ var angleAxis = this.angleAxis;
+ var radiusAxis = this.radiusAxis;
+ var radialPieSeries1 = this.radialPieSeries1;
+ var dataToolTipLayer = this.dataToolTipLayer;
+
+ this.BindElements = () => {
+ chart.Legend = this.legend;
+ };
+ this.BindElements();
+
+ }
+
+ private IgbLegend legend;
+ private IgbDataChart chart;
+ private IgbProportionalCategoryAngleAxis angleAxis;
+ private IgbNumericRadiusAxis radiusAxis;
+ private IgbRadialPieSeries radialPieSeries1;
+ private IgbDataToolTipLayer dataToolTipLayer;
+
+ private EnergyRenewableConsumption _energyRenewableConsumption = null;
+ public EnergyRenewableConsumption EnergyRenewableConsumption
+ {
+ get
+ {
+ if (_energyRenewableConsumption == null)
+ {
+ _energyRenewableConsumption = new EnergyRenewableConsumption();
+ }
+ return _energyRenewableConsumption;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/BlazorClientApp.csproj b/samples/charts/data-chart/radial-proportional-radial-angle-axis/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Hydro Consumption in 2019
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/data-chart/radial-proportional-radial-angle-axis/_Imports.razor b/samples/charts/data-chart/radial-proportional-radial-angle-axis/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-chart/radial-proportional-radial-angle-axis/wwwroot/index.css b/samples/charts/data-chart/radial-proportional-radial-angle-axis/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/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/
+*/
diff --git a/samples/charts/data-chart/radial-proportional-radial-angle-axis/wwwroot/index.html b/samples/charts/data-chart/radial-proportional-radial-angle-axis/wwwroot/index.html
new file mode 100644
index 0000000000..8833030d8e
--- /dev/null
+++ b/samples/charts/data-chart/radial-proportional-radial-angle-axis/wwwroot/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var propertyEditorPanel1 = this.propertyEditorPanel1;
+ var chart = this.chart;
+
+ this.BindElements = () => {
+ propertyEditorPanel1.Target = this.chart;
+ };
+ this.BindElements();
+
+ }
+
+ private IgbPropertyEditorPanel propertyEditorPanel1;
+ private IgbDataPieChart chart;
+
+ private EnergyGlobalDemand _energyGlobalDemand = null;
+ public EnergyGlobalDemand EnergyGlobalDemand
+ {
+ get
+ {
+ if (_energyGlobalDemand == null)
+ {
+ _energyGlobalDemand = new EnergyGlobalDemand();
+ }
+ return _energyGlobalDemand;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/animation/BlazorClientApp.csproj b/samples/charts/data-pie-chart/animation/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-pie-chart/animation/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Global Electricity Demand by Energy Use
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/data-pie-chart/animation/_Imports.razor b/samples/charts/data-pie-chart/animation/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-pie-chart/animation/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-pie-chart/animation/wwwroot/index.css b/samples/charts/data-pie-chart/animation/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-pie-chart/animation/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/
+*/
diff --git a/samples/charts/data-pie-chart/animation/wwwroot/index.html b/samples/charts/data-pie-chart/animation/wwwroot/index.html
new file mode 100644
index 0000000000..fcfbabf8c3
--- /dev/null
+++ b/samples/charts/data-pie-chart/animation/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var chart = this.chart;
+
+ }
+
+ private IgbDataPieChart chart;
+
+ private OnlineTrafficHighlightTotals _onlineTrafficHighlightTotals = null;
+ public OnlineTrafficHighlightTotals OnlineTrafficHighlightTotals
+ {
+ get
+ {
+ if (_onlineTrafficHighlightTotals == null)
+ {
+ _onlineTrafficHighlightTotals = new OnlineTrafficHighlightTotals();
+ }
+ return _onlineTrafficHighlightTotals;
+ }
+ }
+
+ private OnlineTrafficHighlightDesktopOnly _onlineTrafficHighlightDesktopOnly = null;
+ public OnlineTrafficHighlightDesktopOnly OnlineTrafficHighlightDesktopOnly
+ {
+ get
+ {
+ if (_onlineTrafficHighlightDesktopOnly == null)
+ {
+ _onlineTrafficHighlightDesktopOnly = new OnlineTrafficHighlightDesktopOnly();
+ }
+ return _onlineTrafficHighlightDesktopOnly;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/highlight-filter/BlazorClientApp.csproj b/samples/charts/data-pie-chart/highlight-filter/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-pie-chart/highlight-filter/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/data-pie-chart/highlight-filter/_Imports.razor b/samples/charts/data-pie-chart/highlight-filter/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-pie-chart/highlight-filter/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-pie-chart/highlight-filter/wwwroot/index.css b/samples/charts/data-pie-chart/highlight-filter/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-pie-chart/highlight-filter/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/
+*/
diff --git a/samples/charts/data-pie-chart/highlight-filter/wwwroot/index.html b/samples/charts/data-pie-chart/highlight-filter/wwwroot/index.html
new file mode 100644
index 0000000000..8833030d8e
--- /dev/null
+++ b/samples/charts/data-pie-chart/highlight-filter/wwwroot/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var propertyEditorPanel1 = this.propertyEditorPanel1;
+ var chart = this.chart;
+
+ this.BindElements = () => {
+ propertyEditorPanel1.Target = this.chart;
+ };
+ this.BindElements();
+
+ }
+
+ private IgbPropertyEditorPanel propertyEditorPanel1;
+ private IgbDataPieChart chart;
+
+ private EnergyGlobalDemand _energyGlobalDemand = null;
+ public EnergyGlobalDemand EnergyGlobalDemand
+ {
+ get
+ {
+ if (_energyGlobalDemand == null)
+ {
+ _energyGlobalDemand = new EnergyGlobalDemand();
+ }
+ return _energyGlobalDemand;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/highlighting/BlazorClientApp.csproj b/samples/charts/data-pie-chart/highlighting/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-pie-chart/highlighting/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Global Electricity Demand by Energy Use
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/data-pie-chart/highlighting/_Imports.razor b/samples/charts/data-pie-chart/highlighting/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-pie-chart/highlighting/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-pie-chart/highlighting/wwwroot/index.css b/samples/charts/data-pie-chart/highlighting/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-pie-chart/highlighting/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/
+*/
diff --git a/samples/charts/data-pie-chart/highlighting/wwwroot/index.html b/samples/charts/data-pie-chart/highlighting/wwwroot/index.html
new file mode 100644
index 0000000000..fcfbabf8c3
--- /dev/null
+++ b/samples/charts/data-pie-chart/highlighting/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var legend = this.legend;
+ var chart = this.chart;
+
+ this.BindElements = () => {
+ chart.Legend = this.legend;
+ };
+ this.BindElements();
+
+ }
+
+ private IgbItemLegend legend;
+ private IgbDataPieChart chart;
+
+ private EnergyGlobalDemand _energyGlobalDemand = null;
+ public EnergyGlobalDemand EnergyGlobalDemand
+ {
+ get
+ {
+ if (_energyGlobalDemand == null)
+ {
+ _energyGlobalDemand = new EnergyGlobalDemand();
+ }
+ return _energyGlobalDemand;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/legend/BlazorClientApp.csproj b/samples/charts/data-pie-chart/legend/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-pie-chart/legend/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Global Electricity Demand by Energy Use
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/data-pie-chart/legend/_Imports.razor b/samples/charts/data-pie-chart/legend/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-pie-chart/legend/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-pie-chart/legend/wwwroot/index.css b/samples/charts/data-pie-chart/legend/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-pie-chart/legend/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/
+*/
diff --git a/samples/charts/data-pie-chart/legend/wwwroot/index.html b/samples/charts/data-pie-chart/legend/wwwroot/index.html
new file mode 100644
index 0000000000..8833030d8e
--- /dev/null
+++ b/samples/charts/data-pie-chart/legend/wwwroot/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var propertyEditorPanel1 = this.propertyEditorPanel1;
+ var chart = this.chart;
+
+ this.BindElements = () => {
+ propertyEditorPanel1.Target = this.chart;
+ };
+ this.BindElements();
+
+ }
+
+ private IgbPropertyEditorPanel propertyEditorPanel1;
+ private IgbDataPieChart chart;
+
+ private EnergyGlobalDemand _energyGlobalDemand = null;
+ public EnergyGlobalDemand EnergyGlobalDemand
+ {
+ get
+ {
+ if (_energyGlobalDemand == null)
+ {
+ _energyGlobalDemand = new EnergyGlobalDemand();
+ }
+ return _energyGlobalDemand;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/others/BlazorClientApp.csproj b/samples/charts/data-pie-chart/others/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-pie-chart/others/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Global Electricity Demand by Energy Use
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/data-pie-chart/others/_Imports.razor b/samples/charts/data-pie-chart/others/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-pie-chart/others/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-pie-chart/others/wwwroot/index.css b/samples/charts/data-pie-chart/others/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-pie-chart/others/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/
+*/
diff --git a/samples/charts/data-pie-chart/others/wwwroot/index.html b/samples/charts/data-pie-chart/others/wwwroot/index.html
new file mode 100644
index 0000000000..fcfbabf8c3
--- /dev/null
+++ b/samples/charts/data-pie-chart/others/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var chart = this.chart;
+
+ }
+
+ private IgbDataPieChart chart;
+
+ private EnergyGlobalDemand _energyGlobalDemand = null;
+ public EnergyGlobalDemand EnergyGlobalDemand
+ {
+ get
+ {
+ if (_energyGlobalDemand == null)
+ {
+ _energyGlobalDemand = new EnergyGlobalDemand();
+ }
+ return _energyGlobalDemand;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/overview/BlazorClientApp.csproj b/samples/charts/data-pie-chart/overview/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-pie-chart/overview/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Global Electricity Demand by Energy Use
+
+
+
+
+
+
+
-
+
-
diff --git a/samples/charts/data-pie-chart/overview/_Imports.razor b/samples/charts/data-pie-chart/overview/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-pie-chart/overview/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-pie-chart/overview/wwwroot/index.css b/samples/charts/data-pie-chart/overview/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-pie-chart/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/
+*/
diff --git a/samples/charts/data-pie-chart/overview/wwwroot/index.html b/samples/charts/data-pie-chart/overview/wwwroot/index.html
new file mode 100644
index 0000000000..8833030d8e
--- /dev/null
+++ b/samples/charts/data-pie-chart/overview/wwwroot/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var propertyEditorPanel1 = this.propertyEditorPanel1;
+ var chart = this.chart;
+
+ this.BindElements = () => {
+ propertyEditorPanel1.Target = this.chart;
+ };
+ this.BindElements();
+
+ }
+
+ private IgbPropertyEditorPanel propertyEditorPanel1;
+ private IgbDataPieChart chart;
+
+ private EnergyGlobalDemand _energyGlobalDemand = null;
+ public EnergyGlobalDemand EnergyGlobalDemand
+ {
+ get
+ {
+ if (_energyGlobalDemand == null)
+ {
+ _energyGlobalDemand = new EnergyGlobalDemand();
+ }
+ return _energyGlobalDemand;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/data-pie-chart/selection/BlazorClientApp.csproj b/samples/charts/data-pie-chart/selection/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/data-pie-chart/selection/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Global Electricity Demand by Energy Use
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/data-pie-chart/selection/_Imports.razor b/samples/charts/data-pie-chart/selection/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/data-pie-chart/selection/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/data-pie-chart/selection/wwwroot/index.css b/samples/charts/data-pie-chart/selection/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/data-pie-chart/selection/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/
+*/
diff --git a/samples/charts/data-pie-chart/selection/wwwroot/index.html b/samples/charts/data-pie-chart/selection/wwwroot/index.html
new file mode 100644
index 0000000000..fcfbabf8c3
--- /dev/null
+++ b/samples/charts/data-pie-chart/selection/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
@code {
+ private Action BindElements { get; set; }
+
protected override async Task OnAfterRenderAsync(bool firstRender)
{
+ var legend = this.legend;
var toolbar = this.toolbar;
+ var chart = this.chart;
+
+ this.BindElements = () => {
+ toolbar.Target = this.chart;
+ chart.Legend = this.legend;
+ };
+ this.BindElements();
if (firstRender) {
this.ToolbarCustomIconOnViewInit();
}
}
+ private IgbLegend legend;
private IgbToolbar toolbar;
+ private IgbCategoryChart chart;
public void ToolbarCustomIconOnViewInit()
{
- this.toolbar.EnsureReady().ContinueWith(new Action
+ Renewable Electricity Generated
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+@code {
+
+ private Action BindElements { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var propertyEditor = this.propertyEditor;
+ var highlightedModeEditor = this.highlightedModeEditor;
+ var treemap = this.treemap;
+
+ this.BindElements = () => {
+ propertyEditor.Target = this.treemap;
+ };
+ this.BindElements();
+
+ }
+
+ private IgbPropertyEditorPanel propertyEditor;
+ private IgbPropertyEditorPropertyDescription highlightedModeEditor;
+ private IgbTreemap treemap;
+
+ private CountyHierarchicalData _countyHierarchicalData = null;
+ public CountyHierarchicalData CountyHierarchicalData
+ {
+ get
+ {
+ if (_countyHierarchicalData == null)
+ {
+ _countyHierarchicalData = new CountyHierarchicalData();
+ }
+ return _countyHierarchicalData;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/charts/tree-map/highlighting/BlazorClientApp.csproj b/samples/charts/tree-map/highlighting/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/charts/tree-map/highlighting/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+ Comparing Population of Countries
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/charts/tree-map/highlighting/_Imports.razor b/samples/charts/tree-map/highlighting/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/charts/tree-map/highlighting/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/charts/tree-map/highlighting/wwwroot/index.css b/samples/charts/tree-map/highlighting/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/charts/tree-map/highlighting/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/
+*/
diff --git a/samples/charts/tree-map/highlighting/wwwroot/index.html b/samples/charts/tree-map/highlighting/wwwroot/index.html
new file mode 100644
index 0000000000..fcfbabf8c3
--- /dev/null
+++ b/samples/charts/tree-map/highlighting/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
-
+
+
+ net8.0
+ 3.0
+ Infragistics.Samples
+ Infragistics.Samples
+
+
+
+ 1701;1702,IDE0028,BL0005,0219,CS1998
+
+
+
+
+
+
diff --git a/samples/editors/x-date-picker/date-limits/BlazorClientApp.sln b/samples/editors/x-date-picker/date-limits/BlazorClientApp.sln
new file mode 100644
index 0000000000..1e2eda208a
--- /dev/null
+++ b/samples/editors/x-date-picker/date-limits/BlazorClientApp.sln
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.29613.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}"
+EndProject
+Global
+ GlobalSection(SolutionConfigurationPlatforms) = preSolution
+ Debug|Any CPU = Debug|Any CPU
+ Release|Any CPU = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(ProjectConfigurationPlatforms) = postSolution
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(SolutionProperties) = preSolution
+ HideSolutionNode = FALSE
+ EndGlobalSection
+ GlobalSection(ExtensibilityGlobals) = postSolution
+ SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18}
+ EndGlobalSection
+EndGlobal
diff --git a/samples/editors/x-date-picker/date-limits/Program.cs b/samples/editors/x-date-picker/date-limits/Program.cs
new file mode 100644
index 0000000000..a01bcd2f66
--- /dev/null
+++ b/samples/editors/x-date-picker/date-limits/Program.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Net.Http;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Text;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
+
+namespace Infragistics.Samples
+{
+ public class Program
+ {
+ public static async Task Main(string[] args)
+ {
+ var builder = WebAssemblyHostBuilder.CreateDefault(args);
+ builder.RootComponents.Add("app");
+ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+ // registering Ignite UI modules
+ builder.Services.AddIgniteUIBlazor(typeof(IgbXDatePickerModule));
+ await builder.Build().RunAsync();
+ }
+ }
+}
diff --git a/samples/editors/x-date-picker/date-limits/Properties/launchSettings.json b/samples/editors/x-date-picker/date-limits/Properties/launchSettings.json
new file mode 100644
index 0000000000..18bd6fb5bc
--- /dev/null
+++ b/samples/editors/x-date-picker/date-limits/Properties/launchSettings.json
@@ -0,0 +1,27 @@
+{
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http://localhost:4200",
+ "sslPort": 44385
+ }
+ },
+ "profiles": {
+ "IIS Express": {
+ "commandName": "IISExpress",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "BlazorSamples": {
+ "commandName": "Project",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ },
+ "applicationUrl": "https://localhost:5001;http://localhost:4200"
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/editors/x-date-picker/date-limits/README.md b/samples/editors/x-date-picker/date-limits/README.md
new file mode 100644
index 0000000000..bed41cad53
--- /dev/null
+++ b/samples/editors/x-date-picker/date-limits/README.md
@@ -0,0 +1,70 @@
+
+
+
+This folder contains implementation of Blazor application with example of Date Limits feature using [X Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/editors/date-picker/date-limits/_Imports.razor b/samples/editors/x-date-picker/date-limits/_Imports.razor
similarity index 100%
rename from samples/editors/date-picker/date-limits/_Imports.razor
rename to samples/editors/x-date-picker/date-limits/_Imports.razor
diff --git a/samples/editors/date-picker/date-limits/wwwroot/index.html b/samples/editors/x-date-picker/date-limits/wwwroot/index.html
similarity index 100%
rename from samples/editors/date-picker/date-limits/wwwroot/index.html
rename to samples/editors/x-date-picker/date-limits/wwwroot/index.html
diff --git a/samples/editors/date-picker/editing/App.razor b/samples/editors/x-date-picker/editing/App.razor
similarity index 75%
rename from samples/editors/date-picker/editing/App.razor
rename to samples/editors/x-date-picker/editing/App.razor
index 2809d6a481..5365ed3b09 100644
--- a/samples/editors/date-picker/editing/App.razor
+++ b/samples/editors/x-date-picker/editing/App.razor
@@ -3,7 +3,7 @@
+
+
+ net8.0
+ 3.0
+ Infragistics.Samples
+ Infragistics.Samples
+
+
+
+ 1701;1702,IDE0028,BL0005,0219,CS1998
+
+
+
+
+
+
diff --git a/samples/editors/x-date-picker/editing/BlazorClientApp.sln b/samples/editors/x-date-picker/editing/BlazorClientApp.sln
new file mode 100644
index 0000000000..1e2eda208a
--- /dev/null
+++ b/samples/editors/x-date-picker/editing/BlazorClientApp.sln
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.29613.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}"
+EndProject
+Global
+ GlobalSection(SolutionConfigurationPlatforms) = preSolution
+ Debug|Any CPU = Debug|Any CPU
+ Release|Any CPU = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(ProjectConfigurationPlatforms) = postSolution
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(SolutionProperties) = preSolution
+ HideSolutionNode = FALSE
+ EndGlobalSection
+ GlobalSection(ExtensibilityGlobals) = postSolution
+ SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18}
+ EndGlobalSection
+EndGlobal
diff --git a/samples/editors/x-date-picker/editing/Program.cs b/samples/editors/x-date-picker/editing/Program.cs
new file mode 100644
index 0000000000..a01bcd2f66
--- /dev/null
+++ b/samples/editors/x-date-picker/editing/Program.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Net.Http;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Text;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
+
+namespace Infragistics.Samples
+{
+ public class Program
+ {
+ public static async Task Main(string[] args)
+ {
+ var builder = WebAssemblyHostBuilder.CreateDefault(args);
+ builder.RootComponents.Add("app");
+ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+ // registering Ignite UI modules
+ builder.Services.AddIgniteUIBlazor(typeof(IgbXDatePickerModule));
+ await builder.Build().RunAsync();
+ }
+ }
+}
diff --git a/samples/editors/x-date-picker/editing/Properties/launchSettings.json b/samples/editors/x-date-picker/editing/Properties/launchSettings.json
new file mode 100644
index 0000000000..18bd6fb5bc
--- /dev/null
+++ b/samples/editors/x-date-picker/editing/Properties/launchSettings.json
@@ -0,0 +1,27 @@
+{
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http://localhost:4200",
+ "sslPort": 44385
+ }
+ },
+ "profiles": {
+ "IIS Express": {
+ "commandName": "IISExpress",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "BlazorSamples": {
+ "commandName": "Project",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ },
+ "applicationUrl": "https://localhost:5001;http://localhost:4200"
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/editors/x-date-picker/editing/README.md b/samples/editors/x-date-picker/editing/README.md
new file mode 100644
index 0000000000..830c82835a
--- /dev/null
+++ b/samples/editors/x-date-picker/editing/README.md
@@ -0,0 +1,70 @@
+
+
+
+This folder contains implementation of Blazor application with example of Editing feature using [X Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/editors/date-picker/editing/_Imports.razor b/samples/editors/x-date-picker/editing/_Imports.razor
similarity index 100%
rename from samples/editors/date-picker/editing/_Imports.razor
rename to samples/editors/x-date-picker/editing/_Imports.razor
diff --git a/samples/editors/date-picker/editing/wwwroot/index.html b/samples/editors/x-date-picker/editing/wwwroot/index.html
similarity index 100%
rename from samples/editors/date-picker/editing/wwwroot/index.html
rename to samples/editors/x-date-picker/editing/wwwroot/index.html
diff --git a/samples/editors/date-picker/format/App.razor b/samples/editors/x-date-picker/format/App.razor
similarity index 86%
rename from samples/editors/date-picker/format/App.razor
rename to samples/editors/x-date-picker/format/App.razor
index 5296b2e912..a250a1e220 100644
--- a/samples/editors/date-picker/format/App.razor
+++ b/samples/editors/x-date-picker/format/App.razor
@@ -12,7 +12,7 @@
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/editors/date-picker/date-limits/_Imports.razor b/samples/editors/x-date-picker/date-limits/_Imports.razor
similarity index 100%
rename from samples/editors/date-picker/date-limits/_Imports.razor
rename to samples/editors/x-date-picker/date-limits/_Imports.razor
diff --git a/samples/editors/date-picker/date-limits/wwwroot/index.html b/samples/editors/x-date-picker/date-limits/wwwroot/index.html
similarity index 100%
rename from samples/editors/date-picker/date-limits/wwwroot/index.html
rename to samples/editors/x-date-picker/date-limits/wwwroot/index.html
diff --git a/samples/editors/date-picker/editing/App.razor b/samples/editors/x-date-picker/editing/App.razor
similarity index 75%
rename from samples/editors/date-picker/editing/App.razor
rename to samples/editors/x-date-picker/editing/App.razor
index 2809d6a481..5365ed3b09 100644
--- a/samples/editors/date-picker/editing/App.razor
+++ b/samples/editors/x-date-picker/editing/App.razor
@@ -3,7 +3,7 @@
-
@@ -12,7 +12,7 @@
@code {
public DateTime SelectedDate { get; set; }
- public IgbDatePicker DatePicker { get; set; }
+ public IgbXDatePicker DatePicker { get; set; }
protected override void OnInitialized()
{
this.SelectedDate = DateTime.Today;
diff --git a/samples/editors/x-date-picker/editing/BlazorClientApp.csproj b/samples/editors/x-date-picker/editing/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/editors/x-date-picker/editing/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/editors/date-picker/editing/_Imports.razor b/samples/editors/x-date-picker/editing/_Imports.razor
similarity index 100%
rename from samples/editors/date-picker/editing/_Imports.razor
rename to samples/editors/x-date-picker/editing/_Imports.razor
diff --git a/samples/editors/date-picker/editing/wwwroot/index.html b/samples/editors/x-date-picker/editing/wwwroot/index.html
similarity index 100%
rename from samples/editors/date-picker/editing/wwwroot/index.html
rename to samples/editors/x-date-picker/editing/wwwroot/index.html
diff --git a/samples/editors/date-picker/format/App.razor b/samples/editors/x-date-picker/format/App.razor
similarity index 86%
rename from samples/editors/date-picker/format/App.razor
rename to samples/editors/x-date-picker/format/App.razor
index 5296b2e912..a250a1e220 100644
--- a/samples/editors/date-picker/format/App.razor
+++ b/samples/editors/x-date-picker/format/App.razor
@@ -12,7 +12,7 @@
-
+
+
+ net8.0
+ 3.0
+ Infragistics.Samples
+ Infragistics.Samples
+
+
+
+ 1701;1702,IDE0028,BL0005,0219,CS1998
+
+
+
+
+
+
diff --git a/samples/editors/x-date-picker/format/BlazorClientApp.sln b/samples/editors/x-date-picker/format/BlazorClientApp.sln
new file mode 100644
index 0000000000..1e2eda208a
--- /dev/null
+++ b/samples/editors/x-date-picker/format/BlazorClientApp.sln
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.29613.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}"
+EndProject
+Global
+ GlobalSection(SolutionConfigurationPlatforms) = preSolution
+ Debug|Any CPU = Debug|Any CPU
+ Release|Any CPU = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(ProjectConfigurationPlatforms) = postSolution
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(SolutionProperties) = preSolution
+ HideSolutionNode = FALSE
+ EndGlobalSection
+ GlobalSection(ExtensibilityGlobals) = postSolution
+ SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18}
+ EndGlobalSection
+EndGlobal
diff --git a/samples/editors/x-date-picker/format/Program.cs b/samples/editors/x-date-picker/format/Program.cs
new file mode 100644
index 0000000000..a01bcd2f66
--- /dev/null
+++ b/samples/editors/x-date-picker/format/Program.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Net.Http;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Text;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
+
+namespace Infragistics.Samples
+{
+ public class Program
+ {
+ public static async Task Main(string[] args)
+ {
+ var builder = WebAssemblyHostBuilder.CreateDefault(args);
+ builder.RootComponents.Add("app");
+ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+ // registering Ignite UI modules
+ builder.Services.AddIgniteUIBlazor(typeof(IgbXDatePickerModule));
+ await builder.Build().RunAsync();
+ }
+ }
+}
diff --git a/samples/editors/x-date-picker/format/Properties/launchSettings.json b/samples/editors/x-date-picker/format/Properties/launchSettings.json
new file mode 100644
index 0000000000..18bd6fb5bc
--- /dev/null
+++ b/samples/editors/x-date-picker/format/Properties/launchSettings.json
@@ -0,0 +1,27 @@
+{
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http://localhost:4200",
+ "sslPort": 44385
+ }
+ },
+ "profiles": {
+ "IIS Express": {
+ "commandName": "IISExpress",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "BlazorSamples": {
+ "commandName": "Project",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ },
+ "applicationUrl": "https://localhost:5001;http://localhost:4200"
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/editors/date-picker/overview/README.md b/samples/editors/x-date-picker/format/README.md
similarity index 94%
rename from samples/editors/date-picker/overview/README.md
rename to samples/editors/x-date-picker/format/README.md
index 3a25fa609e..eaa280e214 100644
--- a/samples/editors/date-picker/overview/README.md
+++ b/samples/editors/x-date-picker/format/README.md
@@ -1,7 +1,7 @@
-This folder contains implementation of Blazor application with example of Overview feature using [Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.
+This folder contains implementation of Blazor application with example of Format feature using [X Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.
@@ -13,10 +13,10 @@ This folder contains implementation of Blazor application with example of Overvi
-
+
-
diff --git a/samples/editors/date-picker/format/_Imports.razor b/samples/editors/x-date-picker/format/_Imports.razor
similarity index 100%
rename from samples/editors/date-picker/format/_Imports.razor
rename to samples/editors/x-date-picker/format/_Imports.razor
diff --git a/samples/editors/date-picker/format/wwwroot/index.html b/samples/editors/x-date-picker/format/wwwroot/index.html
similarity index 100%
rename from samples/editors/date-picker/format/wwwroot/index.html
rename to samples/editors/x-date-picker/format/wwwroot/index.html
diff --git a/samples/editors/date-picker/overview/App.razor b/samples/editors/x-date-picker/overview/App.razor
similarity index 77%
rename from samples/editors/date-picker/overview/App.razor
rename to samples/editors/x-date-picker/overview/App.razor
index 435c958cd3..259a5dcd4b 100644
--- a/samples/editors/date-picker/overview/App.razor
+++ b/samples/editors/x-date-picker/overview/App.razor
@@ -3,7 +3,7 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ @ref="grid1"
+ Data="RoleplayDataStats"
+ PrimaryKey="Name">
- ctx.cell.editValue = e.detail.value}>
+ ctx.cell.editValue = e.detail.value}>
${cellValues}
`
diff --git a/samples/grids/grid/cell-editing-styling/App.razor b/samples/grids/grid/cell-editing-styling/App.razor
index 856f3b42c3..860dd1e3bc 100644
--- a/samples/grids/grid/cell-editing-styling/App.razor
+++ b/samples/grids/grid/cell-editing-styling/App.razor
@@ -9,7 +9,6 @@
@ref="grid"
Data="NwindData"
PrimaryKey="ProductID"
- DisplayDensity="DisplayDensity.Cosy"
AllowFiltering="true">
diff --git a/samples/grids/grid/cell-editing-styling/BlazorClientApp.csproj b/samples/grids/grid/cell-editing-styling/BlazorClientApp.csproj
index 59eeefe5e9..577a5da6f6 100644
--- a/samples/grids/grid/cell-editing-styling/BlazorClientApp.csproj
+++ b/samples/grids/grid/cell-editing-styling/BlazorClientApp.csproj
@@ -12,7 +12,7 @@
-
-
- ((e) =>
+ {
+ this.RegisterAwesomeIcons();
+ }));
+ }
+
+ }
+
+ public async void ButtonSelectionChange(IgbComponentValueChangedEventArgs evt)
+ {
+ await this.ChangeRefs(evt.Detail);
+ }
+ private void RegisterAwesomeIcons()
+ {
+ this.icon.RegisterIconFromText("filter_list", filter, "fontAwesome");
+ this.icon.RegisterIconFromText("arrow_upward", arrowUp, "fontAwesome");
+ this.icon.RegisterIconFromText("arrow_downward", arrowDown, "fontAwesome");
+ this.icon.RegisterIconFromText("more_vert", ellipsisRight, "fontAwesome");
+ this.icon.RegisterIconFromText("unpin-left", thumbtackSlash, "fontAwesome");
+ this.icon.RegisterIconFromText("pin-left", thumbtack, "fontAwesome");
+ this.icon.RegisterIconFromText("visibility", eye, "fontAwesome");
+ this.icon.RegisterIconFromText("visibility_off", eyeSlash, "fontAwesome");
+ this.icon.RegisterIconFromText("search", magnifyGlass, "fontAwesome");
+ this.icon.RegisterIconFromText("chevron_right", chevronRight, "fontAwesome");
+ this.icon.RegisterIconFromText("clear", xMark, "fontAwesome");
+ this.icon.RegisterIconFromText("file_download", fileExport, "fontAwesome");
+ this.icon.RegisterIconFromText("arrow_drop_down", caretDown, "fontAwesome");
+ }
+
+ private async Task ChangeRefs(string collectionName)
+ {
+ await this.icon.SetIconRefAsync("input_expand", "default", new IgbIconMeta()
+ {
+ Name = "arrow_drop_down",
+ Collection = collectionName,
+ });
+ await this.icon.SetIconRefAsync("file_download", "default", new IgbIconMeta()
+ {
+ Name = "file_download",
+ Collection = collectionName,
+ });
+ await this.icon.SetIconRefAsync("clear", "default", new IgbIconMeta()
+ {
+ Name = "clear",
+ Collection = collectionName,
+ });
+ await this.icon.SetIconRefAsync("arrow_next", "default", new IgbIconMeta()
+ {
+ Name = "chevron_right",
+ Collection = collectionName,
+ });
+
+ await this.icon.SetIconRefAsync("search", "default", new IgbIconMeta()
+ {
+ Name = "search",
+ Collection = collectionName,
+ });
+
+ await this.icon.SetIconRefAsync("hide", "default", new IgbIconMeta()
+ {
+ Name = "visibility_off",
+ Collection = collectionName,
+ });
+
+ await this.icon.SetIconRefAsync("show", "default", new IgbIconMeta()
+ {
+ Name = "visibility",
+ Collection = collectionName,
+ });
+
+ await this.icon.SetIconRefAsync("unpin", "default", new IgbIconMeta()
+ {
+ Name = "unpin-left",
+ Collection = collectionName == "material" ? "imx-icons" : collectionName,
+ });
+
+ await this.icon.SetIconRefAsync("pin", "default", new IgbIconMeta()
+ {
+ Name = "pin-left",
+ Collection = collectionName == "material" ? "imx-icons" : collectionName,
+ });
+ await this.icon.SetIconRefAsync("filter_list", "default", new IgbIconMeta()
+ {
+ Name = "filter_list",
+ Collection = collectionName,
+ });
+
+ await this.icon.SetIconRefAsync("sort_asc", "default", new IgbIconMeta()
+ {
+ Name = "arrow_upward",
+ Collection = collectionName,
+ });
+
+ await this.icon.SetIconRefAsync("sort_desc", "default", new IgbIconMeta()
+ {
+ Name = "arrow_downward",
+ Collection = collectionName,
+ });
+
+ await this.icon.SetIconRefAsync("more_vert", "default", new IgbIconMeta()
+ {
+ Name = "more_vert",
+ Collection = collectionName,
+ });
+
+
+
+ }
+
+ private NwindData _nwindData = null;
+ public NwindData NwindData
+ {
+ get
+ {
+ if (_nwindData == null)
+ {
+ _nwindData = new NwindData();
+ }
+ return _nwindData;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/samples/grids/grid/change-icons-custom/BlazorClientApp.csproj b/samples/grids/grid/change-icons-custom/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+
+
+ net8.0
+ 3.0
+ Infragistics.Samples
+ Infragistics.Samples
+
+
+
+ 1701;1702,IDE0028,BL0005,0219,CS1998
+
+
+
+
+
+
diff --git a/samples/grids/grid/change-icons-custom/BlazorClientApp.sln b/samples/grids/grid/change-icons-custom/BlazorClientApp.sln
new file mode 100644
index 0000000000..a0baf7fdc9
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/BlazorClientApp.sln
@@ -0,0 +1,24 @@
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.8.34525.116
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}"
+EndProject
+Global
+ GlobalSection(SolutionConfigurationPlatforms) = preSolution
+ Debug|Any CPU = Debug|Any CPU
+ Release|Any CPU = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(ProjectConfigurationPlatforms) = postSolution
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(SolutionProperties) = preSolution
+ HideSolutionNode = FALSE
+ EndGlobalSection
+ GlobalSection(ExtensibilityGlobals) = postSolution
+ SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18}
+ EndGlobalSection
+EndGlobal
diff --git a/samples/grids/grid/change-icons-custom/NwindData.cs b/samples/grids/grid/change-icons-custom/NwindData.cs
new file mode 100644
index 0000000000..919d8bd1b5
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/NwindData.cs
@@ -0,0 +1,561 @@
+using System;
+using System.Collections.Generic;
+public class NwindDataItem
+{
+ public double ProductID { get; set; }
+ public string ProductName { get; set; }
+ public double SupplierID { get; set; }
+ public double CategoryID { get; set; }
+ public string QuantityPerUnit { get; set; }
+ public double UnitPrice { get; set; }
+ public double UnitsInStock { get; set; }
+ public double UnitsOnOrder { get; set; }
+ public double ReorderLevel { get; set; }
+ public bool Discontinued { get; set; }
+ public string OrderDate { get; set; }
+ public double Rating { get; set; }
+ public List Locations { get; set; }
+}
+public class NwindDataItem_LocationsItem
+{
+ public string Shop { get; set; }
+ public string LastInventory { get; set; }
+}
+
+public class NwindData
+ : List
+{
+ public NwindData()
+ {
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 1,
+ ProductName = @"Chai",
+ SupplierID = 1,
+ CategoryID = 1,
+ QuantityPerUnit = @"10 boxes x 20 bags",
+ UnitPrice = 18,
+ UnitsInStock = 39,
+ UnitsOnOrder = 30,
+ ReorderLevel = 10,
+ Discontinued = false,
+ OrderDate = @"2012-02-12",
+ Rating = 5,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Fun-Tasty Co.",
+ LastInventory = @"2018-06-12"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 2,
+ ProductName = @"Chang",
+ SupplierID = 1,
+ CategoryID = 1,
+ QuantityPerUnit = @"24 - 12 oz bottles",
+ UnitPrice = 19,
+ UnitsInStock = 17,
+ UnitsOnOrder = 40,
+ ReorderLevel = 25,
+ Discontinued = true,
+ OrderDate = @"2003-03-17",
+ Rating = 5,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Super Market",
+ LastInventory = @"2018-09-09"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 3,
+ ProductName = @"Aniseed Syrup",
+ SupplierID = 1,
+ CategoryID = 2,
+ QuantityPerUnit = @"12 - 550 ml bottles",
+ UnitPrice = 10,
+ UnitsInStock = 13,
+ UnitsOnOrder = 70,
+ ReorderLevel = 25,
+ Discontinued = false,
+ OrderDate = @"2006-03-17",
+ Rating = 3,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Street Market",
+ LastInventory = @"2018-12-12"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"24/7 Market",
+ LastInventory = @"2018-11-11"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 4,
+ ProductName = @"Chef Antons Cajun Seasoning",
+ SupplierID = 2,
+ CategoryID = 2,
+ QuantityPerUnit = @"48 - 6 oz jars",
+ UnitPrice = 22,
+ UnitsInStock = 53,
+ UnitsOnOrder = 30,
+ ReorderLevel = 0,
+ Discontinued = false,
+ OrderDate = @"2016-03-17",
+ Rating = 3,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Fun-Tasty Co.",
+ LastInventory = @"2018-06-12"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Street Market",
+ LastInventory = @"2018-12-12"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 5,
+ ProductName = @"Chef Antons Gumbo Mix",
+ SupplierID = 2,
+ CategoryID = 2,
+ QuantityPerUnit = @"36 boxes",
+ UnitPrice = 21.35,
+ UnitsInStock = 0,
+ UnitsOnOrder = 30,
+ ReorderLevel = 0,
+ Discontinued = true,
+ OrderDate = @"2011-11-11",
+ Rating = 5,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Super Market",
+ LastInventory = @"2018-09-09"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 6,
+ ProductName = @"Grandmas Boysenberry Spread",
+ SupplierID = 3,
+ CategoryID = 2,
+ QuantityPerUnit = @"12 - 8 oz jars",
+ UnitPrice = 25,
+ UnitsInStock = 0,
+ UnitsOnOrder = 30,
+ ReorderLevel = 25,
+ Discontinued = false,
+ OrderDate = @"2017-12-17",
+ Rating = 4,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Super Market",
+ LastInventory = @"2018-09-09"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 7,
+ ProductName = @"Uncle Bobs Organic Dried Pears",
+ SupplierID = 3,
+ CategoryID = 7,
+ QuantityPerUnit = @"12 - 1 lb pkgs.",
+ UnitPrice = 30,
+ UnitsInStock = 150,
+ UnitsOnOrder = 30,
+ ReorderLevel = 10,
+ Discontinued = false,
+ OrderDate = @"2016-07-17",
+ Rating = 5,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Fun-Tasty Co.",
+ LastInventory = @"2018-06-12"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Street Market",
+ LastInventory = @"2018-12-12"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 8,
+ ProductName = @"Northwoods Cranberry Sauce",
+ SupplierID = 3,
+ CategoryID = 2,
+ QuantityPerUnit = @"12 - 12 oz jars",
+ UnitPrice = 40,
+ UnitsInStock = 6,
+ UnitsOnOrder = 30,
+ ReorderLevel = 0,
+ Discontinued = false,
+ OrderDate = @"2018-01-17",
+ Rating = 4,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Fun-Tasty Co.",
+ LastInventory = @"2018-06-12"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 9,
+ ProductName = @"Mishi Kobe Niku",
+ SupplierID = 4,
+ CategoryID = 6,
+ QuantityPerUnit = @"18 - 500 g pkgs.",
+ UnitPrice = 97,
+ UnitsInStock = 29,
+ UnitsOnOrder = 30,
+ ReorderLevel = 0,
+ Discontinued = true,
+ OrderDate = @"2010-02-17",
+ Rating = 4,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 10,
+ ProductName = @"Ikura",
+ SupplierID = 4,
+ CategoryID = 8,
+ QuantityPerUnit = @"12 - 200 ml jars",
+ UnitPrice = 31,
+ UnitsInStock = 31,
+ UnitsOnOrder = 30,
+ ReorderLevel = 0,
+ Discontinued = false,
+ OrderDate = @"2008-05-17",
+ Rating = 3,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Wall Market",
+ LastInventory = @"2018-12-06"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 11,
+ ProductName = @"Queso Cabrales",
+ SupplierID = 5,
+ CategoryID = 4,
+ QuantityPerUnit = @"1 kg pkg.",
+ UnitPrice = 21,
+ UnitsInStock = 22,
+ UnitsOnOrder = 30,
+ ReorderLevel = 30,
+ Discontinued = false,
+ OrderDate = @"2009-01-17",
+ Rating = 5,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Fun-Tasty Co.",
+ LastInventory = @"2018-06-12"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 12,
+ ProductName = @"Queso Manchego La Pastora",
+ SupplierID = 5,
+ CategoryID = 4,
+ QuantityPerUnit = @"10 - 500 g pkgs.",
+ UnitPrice = 38,
+ UnitsInStock = 86,
+ UnitsOnOrder = 30,
+ ReorderLevel = 0,
+ Discontinued = false,
+ OrderDate = @"2015-11-17",
+ Rating = 3,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 13,
+ ProductName = @"Konbu",
+ SupplierID = 6,
+ CategoryID = 8,
+ QuantityPerUnit = @"2 kg box",
+ UnitPrice = 6,
+ UnitsInStock = 24,
+ UnitsOnOrder = 30,
+ ReorderLevel = 5,
+ Discontinued = false,
+ OrderDate = @"2015-03-17",
+ Rating = 2,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Super Market",
+ LastInventory = @"2018-09-09"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 14,
+ ProductName = @"Tofu",
+ SupplierID = 6,
+ CategoryID = 7,
+ QuantityPerUnit = @"40 - 100 g pkgs.",
+ UnitPrice = 23.25,
+ UnitsInStock = 35,
+ UnitsOnOrder = 30,
+ ReorderLevel = 0,
+ Discontinued = false,
+ OrderDate = @"2017-06-17",
+ Rating = 4,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Street Market",
+ LastInventory = @"2018-12-12"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 15,
+ ProductName = @"Genen Shouyu",
+ SupplierID = 6,
+ CategoryID = 2,
+ QuantityPerUnit = @"24 - 250 ml bottles",
+ UnitPrice = 15.5,
+ UnitsInStock = 39,
+ UnitsOnOrder = 30,
+ ReorderLevel = 5,
+ Discontinued = false,
+ OrderDate = @"2014-03-17",
+ Rating = 4,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Local Market",
+ LastInventory = @"2018-07-03"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Wall Market",
+ LastInventory = @"2018-12-06"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 16,
+ ProductName = @"Pavlova",
+ SupplierID = 7,
+ CategoryID = 3,
+ QuantityPerUnit = @"32 - 500 g boxes",
+ UnitPrice = 17.45,
+ UnitsInStock = 29,
+ UnitsOnOrder = 30,
+ ReorderLevel = 10,
+ Discontinued = false,
+ OrderDate = @"2018-03-28",
+ Rating = 2,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Street Market",
+ LastInventory = @"2018-12-12"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"24/7 Market",
+ LastInventory = @"2018-11-11"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 17,
+ ProductName = @"Alice Mutton",
+ SupplierID = 7,
+ CategoryID = 6,
+ QuantityPerUnit = @"20 - 1 kg tins",
+ UnitPrice = 39,
+ UnitsInStock = 0,
+ UnitsOnOrder = 30,
+ ReorderLevel = 0,
+ Discontinued = true,
+ OrderDate = @"2015-08-17",
+ Rating = 2,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Farmer Market",
+ LastInventory = @"2018-04-04"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 18,
+ ProductName = @"Carnarvon Tigers",
+ SupplierID = 7,
+ CategoryID = 8,
+ QuantityPerUnit = @"16 kg pkg.",
+ UnitPrice = 62.5,
+ UnitsInStock = 42,
+ UnitsOnOrder = 30,
+ ReorderLevel = 0,
+ Discontinued = false,
+ OrderDate = @"2005-09-27",
+ Rating = 2,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"24/7 Market",
+ LastInventory = @"2018-11-11"
+ },
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Super Market",
+ LastInventory = @"2018-09-09"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 19,
+ ProductName = @"Teatime Chocolate Biscuits",
+ SupplierID = 8,
+ CategoryID = 3,
+ QuantityPerUnit = @"",
+ UnitPrice = 9.2,
+ UnitsInStock = 25,
+ UnitsOnOrder = 30,
+ ReorderLevel = 5,
+ Discontinued = false,
+ OrderDate = @"2001-03-17",
+ Rating = 2,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Local Market",
+ LastInventory = @"2018-07-03"
+ }}
+
+ });
+ this.Add(new NwindDataItem()
+ {
+ ProductID = 20,
+ ProductName = @"Sir Rodneys Marmalade",
+ SupplierID = 8,
+ CategoryID = 3,
+ QuantityPerUnit = @"4 - 100 ml jars",
+ UnitPrice = 4.5,
+ UnitsInStock = 40,
+ UnitsOnOrder = 30,
+ ReorderLevel = 0,
+ Discontinued = false,
+ OrderDate = @"2005-03-17",
+ Rating = 5,
+ Locations = new List()
+ {
+ new NwindDataItem_LocationsItem()
+ {
+ Shop = @"Super Market",
+ LastInventory = @"2018-09-09"
+ }}
+
+ });
+ }
+}
diff --git a/samples/grids/grid/change-icons-custom/Program.cs b/samples/grids/grid/change-icons-custom/Program.cs
new file mode 100644
index 0000000000..009d58a6d8
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/Program.cs
@@ -0,0 +1,30 @@
+using System;
+using System.Net.Http;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Text;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
+
+namespace Infragistics.Samples
+{
+ public class Program
+ {
+ public static async Task Main(string[] args)
+ {
+ var builder = WebAssemblyHostBuilder.CreateDefault(args);
+ builder.RootComponents.Add("app");
+ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+ // registering Ignite UI modules
+ builder.Services.AddIgniteUIBlazor(
+ typeof(IgbInputModule),
+ typeof(IgbPropertyEditorPanelModule),
+ typeof(IgbGridModule)
+ );
+ await builder.Build().RunAsync();
+ }
+ }
+}
diff --git a/samples/grids/grid/change-icons-custom/Properties/launchSettings.json b/samples/grids/grid/change-icons-custom/Properties/launchSettings.json
new file mode 100644
index 0000000000..18bd6fb5bc
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/Properties/launchSettings.json
@@ -0,0 +1,27 @@
+{
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http://localhost:4200",
+ "sslPort": 44385
+ }
+ },
+ "profiles": {
+ "IIS Express": {
+ "commandName": "IISExpress",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "BlazorSamples": {
+ "commandName": "Project",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ },
+ "applicationUrl": "https://localhost:5001;http://localhost:4200"
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/grids/grid/change-icons-custom/ReadMe.md b/samples/grids/grid/change-icons-custom/ReadMe.md
new file mode 100644
index 0000000000..09e10de356
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/ReadMe.md
@@ -0,0 +1,70 @@
+
+
+
+This folder contains implementation of Blazor application with example of Change Icons Custom feature using [Grid](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/grids/grid/change-icons-custom/_Imports.razor b/samples/grids/grid/change-icons-custom/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/grids/grid/change-icons-custom/wwwroot/index.css b/samples/grids/grid/change-icons-custom/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/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/
+*/
diff --git a/samples/grids/grid/change-icons-custom/wwwroot/index.html b/samples/grids/grid/change-icons-custom/wwwroot/index.html
new file mode 100644
index 0000000000..dde85b4e54
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+ Samples | IgniteUI for Blazor | Infragistics
+
-
-
+ Collapsible="true"
+ Expanded="false">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
diff --git a/samples/editors/date-picker/format/_Imports.razor b/samples/editors/x-date-picker/format/_Imports.razor
similarity index 100%
rename from samples/editors/date-picker/format/_Imports.razor
rename to samples/editors/x-date-picker/format/_Imports.razor
diff --git a/samples/editors/date-picker/format/wwwroot/index.html b/samples/editors/x-date-picker/format/wwwroot/index.html
similarity index 100%
rename from samples/editors/date-picker/format/wwwroot/index.html
rename to samples/editors/x-date-picker/format/wwwroot/index.html
diff --git a/samples/editors/date-picker/overview/App.razor b/samples/editors/x-date-picker/overview/App.razor
similarity index 77%
rename from samples/editors/date-picker/overview/App.razor
rename to samples/editors/x-date-picker/overview/App.razor
index 435c958cd3..259a5dcd4b 100644
--- a/samples/editors/date-picker/overview/App.razor
+++ b/samples/editors/x-date-picker/overview/App.razor
@@ -3,7 +3,7 @@
-
+
+
+ net8.0
+ 3.0
+ Infragistics.Samples
+ Infragistics.Samples
+
+
+
+ 1701;1702,IDE0028,BL0005,0219,CS1998
+
+
+
+
+
+
diff --git a/samples/editors/x-date-picker/overview/BlazorClientApp.sln b/samples/editors/x-date-picker/overview/BlazorClientApp.sln
new file mode 100644
index 0000000000..1e2eda208a
--- /dev/null
+++ b/samples/editors/x-date-picker/overview/BlazorClientApp.sln
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.29613.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}"
+EndProject
+Global
+ GlobalSection(SolutionConfigurationPlatforms) = preSolution
+ Debug|Any CPU = Debug|Any CPU
+ Release|Any CPU = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(ProjectConfigurationPlatforms) = postSolution
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(SolutionProperties) = preSolution
+ HideSolutionNode = FALSE
+ EndGlobalSection
+ GlobalSection(ExtensibilityGlobals) = postSolution
+ SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18}
+ EndGlobalSection
+EndGlobal
diff --git a/samples/editors/x-date-picker/overview/Program.cs b/samples/editors/x-date-picker/overview/Program.cs
new file mode 100644
index 0000000000..a01bcd2f66
--- /dev/null
+++ b/samples/editors/x-date-picker/overview/Program.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Net.Http;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Text;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
+
+namespace Infragistics.Samples
+{
+ public class Program
+ {
+ public static async Task Main(string[] args)
+ {
+ var builder = WebAssemblyHostBuilder.CreateDefault(args);
+ builder.RootComponents.Add("app");
+ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+ // registering Ignite UI modules
+ builder.Services.AddIgniteUIBlazor(typeof(IgbXDatePickerModule));
+ await builder.Build().RunAsync();
+ }
+ }
+}
diff --git a/samples/editors/x-date-picker/overview/Properties/launchSettings.json b/samples/editors/x-date-picker/overview/Properties/launchSettings.json
new file mode 100644
index 0000000000..18bd6fb5bc
--- /dev/null
+++ b/samples/editors/x-date-picker/overview/Properties/launchSettings.json
@@ -0,0 +1,27 @@
+{
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http://localhost:4200",
+ "sslPort": 44385
+ }
+ },
+ "profiles": {
+ "IIS Express": {
+ "commandName": "IISExpress",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "BlazorSamples": {
+ "commandName": "Project",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ },
+ "applicationUrl": "https://localhost:5001;http://localhost:4200"
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/editors/x-date-picker/overview/README.md b/samples/editors/x-date-picker/overview/README.md
new file mode 100644
index 0000000000..6aab853a68
--- /dev/null
+++ b/samples/editors/x-date-picker/overview/README.md
@@ -0,0 +1,70 @@
+
+
+
+This folder contains implementation of Blazor application with example of Overview feature using [X Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/editors/date-picker/overview/_Imports.razor b/samples/editors/x-date-picker/overview/_Imports.razor
similarity index 100%
rename from samples/editors/date-picker/overview/_Imports.razor
rename to samples/editors/x-date-picker/overview/_Imports.razor
diff --git a/samples/editors/date-picker/overview/wwwroot/index.html b/samples/editors/x-date-picker/overview/wwwroot/index.html
similarity index 100%
rename from samples/editors/date-picker/overview/wwwroot/index.html
rename to samples/editors/x-date-picker/overview/wwwroot/index.html
diff --git a/samples/editors/date-picker/range/App.razor b/samples/editors/x-date-picker/range/App.razor
similarity index 84%
rename from samples/editors/date-picker/range/App.razor
rename to samples/editors/x-date-picker/range/App.razor
index 65be521799..2e011d4e5b 100644
--- a/samples/editors/date-picker/range/App.razor
+++ b/samples/editors/x-date-picker/range/App.razor
@@ -3,9 +3,9 @@
diff --git a/samples/editors/x-date-picker/range/BlazorClientApp.csproj b/samples/editors/x-date-picker/range/BlazorClientApp.csproj
new file mode 100644
index 0000000000..577a5da6f6
--- /dev/null
+++ b/samples/editors/x-date-picker/range/BlazorClientApp.csproj
@@ -0,0 +1,21 @@
+
+
+
+ net8.0
+ 3.0
+ Infragistics.Samples
+ Infragistics.Samples
+
+
+
+ 1701;1702,IDE0028,BL0005,0219,CS1998
+
+
+
+
+
+
diff --git a/samples/editors/x-date-picker/range/BlazorClientApp.sln b/samples/editors/x-date-picker/range/BlazorClientApp.sln
new file mode 100644
index 0000000000..1e2eda208a
--- /dev/null
+++ b/samples/editors/x-date-picker/range/BlazorClientApp.sln
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.29613.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}"
+EndProject
+Global
+ GlobalSection(SolutionConfigurationPlatforms) = preSolution
+ Debug|Any CPU = Debug|Any CPU
+ Release|Any CPU = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(ProjectConfigurationPlatforms) = postSolution
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU
+ {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU
+ EndGlobalSection
+ GlobalSection(SolutionProperties) = preSolution
+ HideSolutionNode = FALSE
+ EndGlobalSection
+ GlobalSection(ExtensibilityGlobals) = postSolution
+ SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18}
+ EndGlobalSection
+EndGlobal
diff --git a/samples/editors/x-date-picker/range/Program.cs b/samples/editors/x-date-picker/range/Program.cs
new file mode 100644
index 0000000000..a01bcd2f66
--- /dev/null
+++ b/samples/editors/x-date-picker/range/Program.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Net.Http;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Text;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
+
+namespace Infragistics.Samples
+{
+ public class Program
+ {
+ public static async Task Main(string[] args)
+ {
+ var builder = WebAssemblyHostBuilder.CreateDefault(args);
+ builder.RootComponents.Add("app");
+ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+ // registering Ignite UI modules
+ builder.Services.AddIgniteUIBlazor(typeof(IgbXDatePickerModule));
+ await builder.Build().RunAsync();
+ }
+ }
+}
diff --git a/samples/editors/x-date-picker/range/Properties/launchSettings.json b/samples/editors/x-date-picker/range/Properties/launchSettings.json
new file mode 100644
index 0000000000..18bd6fb5bc
--- /dev/null
+++ b/samples/editors/x-date-picker/range/Properties/launchSettings.json
@@ -0,0 +1,27 @@
+{
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http://localhost:4200",
+ "sslPort": 44385
+ }
+ },
+ "profiles": {
+ "IIS Express": {
+ "commandName": "IISExpress",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ }
+ },
+ "BlazorSamples": {
+ "commandName": "Project",
+ "launchBrowser": true,
+ "environmentVariables": {
+ "ASPNETCORE_ENVIRONMENT": "Development"
+ },
+ "applicationUrl": "https://localhost:5001;http://localhost:4200"
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/editors/date-picker/editing/README.md b/samples/editors/x-date-picker/range/README.md
similarity index 94%
rename from samples/editors/date-picker/editing/README.md
rename to samples/editors/x-date-picker/range/README.md
index 1a9fbc49db..4878979c76 100644
--- a/samples/editors/date-picker/editing/README.md
+++ b/samples/editors/x-date-picker/range/README.md
@@ -1,7 +1,7 @@
-This folder contains implementation of Blazor application with example of Editing feature using [Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.
+This folder contains implementation of Blazor application with example of Range feature using [X Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.
@@ -13,10 +13,10 @@ This folder contains implementation of Blazor application with example of Editin
-
+
-
diff --git a/samples/editors/date-picker/range/_Imports.razor b/samples/editors/x-date-picker/range/_Imports.razor
similarity index 100%
rename from samples/editors/date-picker/range/_Imports.razor
rename to samples/editors/x-date-picker/range/_Imports.razor
diff --git a/samples/editors/date-picker/range/wwwroot/index.html b/samples/editors/x-date-picker/range/wwwroot/index.html
similarity index 100%
rename from samples/editors/date-picker/range/wwwroot/index.html
rename to samples/editors/x-date-picker/range/wwwroot/index.html
diff --git a/samples/excel/excel-library/operations-on-workbooks/BlazorClientApp.csproj b/samples/excel/excel-library/operations-on-workbooks/BlazorClientApp.csproj
index 37d4574d34..60e647ee61 100644
--- a/samples/excel/excel-library/operations-on-workbooks/BlazorClientApp.csproj
+++ b/samples/excel/excel-library/operations-on-workbooks/BlazorClientApp.csproj
@@ -12,8 +12,8 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ HighlightLabelDisplaysValue=true
+ HighlightLabelSnapsToNeedlePivot=true
+ IsHighlightNeedleDraggingEnabled=true>
+
diff --git a/samples/gauges/radial-gauge/highlight-needle/BlazorClientApp.csproj b/samples/gauges/radial-gauge/highlight-needle/BlazorClientApp.csproj
index 59eeefe5e9..577a5da6f6 100644
--- a/samples/gauges/radial-gauge/highlight-needle/BlazorClientApp.csproj
+++ b/samples/gauges/radial-gauge/highlight-needle/BlazorClientApp.csproj
@@ -12,7 +12,7 @@
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/editors/date-picker/overview/_Imports.razor b/samples/editors/x-date-picker/overview/_Imports.razor
similarity index 100%
rename from samples/editors/date-picker/overview/_Imports.razor
rename to samples/editors/x-date-picker/overview/_Imports.razor
diff --git a/samples/editors/date-picker/overview/wwwroot/index.html b/samples/editors/x-date-picker/overview/wwwroot/index.html
similarity index 100%
rename from samples/editors/date-picker/overview/wwwroot/index.html
rename to samples/editors/x-date-picker/overview/wwwroot/index.html
diff --git a/samples/editors/date-picker/range/App.razor b/samples/editors/x-date-picker/range/App.razor
similarity index 84%
rename from samples/editors/date-picker/range/App.razor
rename to samples/editors/x-date-picker/range/App.razor
index 65be521799..2e011d4e5b 100644
--- a/samples/editors/date-picker/range/App.razor
+++ b/samples/editors/x-date-picker/range/App.razor
@@ -3,9 +3,9 @@
From:
-
-
+
-
diff --git a/samples/editors/date-picker/range/_Imports.razor b/samples/editors/x-date-picker/range/_Imports.razor
similarity index 100%
rename from samples/editors/date-picker/range/_Imports.razor
rename to samples/editors/x-date-picker/range/_Imports.razor
diff --git a/samples/editors/date-picker/range/wwwroot/index.html b/samples/editors/x-date-picker/range/wwwroot/index.html
similarity index 100%
rename from samples/editors/date-picker/range/wwwroot/index.html
rename to samples/editors/x-date-picker/range/wwwroot/index.html
diff --git a/samples/excel/excel-library/operations-on-workbooks/BlazorClientApp.csproj b/samples/excel/excel-library/operations-on-workbooks/BlazorClientApp.csproj
index 37d4574d34..60e647ee61 100644
--- a/samples/excel/excel-library/operations-on-workbooks/BlazorClientApp.csproj
+++ b/samples/excel/excel-library/operations-on-workbooks/BlazorClientApp.csproj
@@ -12,8 +12,8 @@
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/grids/grid/binding-composite-data/BlazorClientApp.csproj b/samples/grids/grid/binding-composite-data/BlazorClientApp.csproj
index 59eeefe5e9..577a5da6f6 100644
--- a/samples/grids/grid/binding-composite-data/BlazorClientApp.csproj
+++ b/samples/grids/grid/binding-composite-data/BlazorClientApp.csproj
@@ -12,7 +12,7 @@
+
+
+@code {
+ private IgbGrid grid;
+ private IgbIcon icon;
+ private string arrowDown = @"";
+ private string arrowUp = @"";
+ private string caretDown = @"";
+ private string chevronRight = @"";
+ private string ellipsisRight = @"";
+ private string eyeSlash = @"";
+ private string eye = @"";
+ private string fileExport = @"";
+ private string magnifyGlass = @"";
+ private string filter = @"";
+ private string thumbtack = @"";
+ private string thumbtackSlash = @"";
+ private string xMark = @"";
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (this.icon != null && firstRender)
+ {
+ this.icon.EnsureReady().ContinueWith(new Action
+
+ Material Icons
+ Font Awesome Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/grids/grid/change-icons-custom/_Imports.razor b/samples/grids/grid/change-icons-custom/_Imports.razor
new file mode 100644
index 0000000000..d27d337cb1
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/_Imports.razor
@@ -0,0 +1,9 @@
+// these namespaces are global to the app
+@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/grids/grid/change-icons-custom/wwwroot/index.css b/samples/grids/grid/change-icons-custom/wwwroot/index.css
new file mode 100644
index 0000000000..50ca13caa6
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/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/
+*/
diff --git a/samples/grids/grid/change-icons-custom/wwwroot/index.html b/samples/grids/grid/change-icons-custom/wwwroot/index.html
new file mode 100644
index 0000000000..dde85b4e54
--- /dev/null
+++ b/samples/grids/grid/change-icons-custom/wwwroot/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/grids/grid/column-pinning-options/BlazorClientApp.csproj b/samples/grids/grid/column-pinning-options/BlazorClientApp.csproj
index 59eeefe5e9..577a5da6f6 100644
--- a/samples/grids/grid/column-pinning-options/BlazorClientApp.csproj
+++ b/samples/grids/grid/column-pinning-options/BlazorClientApp.csproj
@@ -12,7 +12,7 @@
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/grids/grid/column-pinning/BlazorClientApp.csproj b/samples/grids/grid/column-pinning/BlazorClientApp.csproj
index 59eeefe5e9..577a5da6f6 100644
--- a/samples/grids/grid/column-pinning/BlazorClientApp.csproj
+++ b/samples/grids/grid/column-pinning/BlazorClientApp.csproj
@@ -12,7 +12,7 @@
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/grids/grid/column-resizing/BlazorClientApp.csproj b/samples/grids/grid/column-resizing/BlazorClientApp.csproj
index 59eeefe5e9..577a5da6f6 100644
--- a/samples/grids/grid/column-resizing/BlazorClientApp.csproj
+++ b/samples/grids/grid/column-resizing/BlazorClientApp.csproj
@@ -12,7 +12,7 @@
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/grids/grid/column-sorting-indicators/BlazorClientApp.csproj b/samples/grids/grid/column-sorting-indicators/BlazorClientApp.csproj
index 59eeefe5e9..577a5da6f6 100644
--- a/samples/grids/grid/column-sorting-indicators/BlazorClientApp.csproj
+++ b/samples/grids/grid/column-sorting-indicators/BlazorClientApp.csproj
@@ -12,7 +12,7 @@
+
+
+
+
+
+
+
+
+
+
+
+## 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 2019
+
+NOTE: VS 2019 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2019** 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/grids/grid/conditional-cell-style-2/wwwroot/events.js b/samples/grids/grid/conditional-cell-style-2/wwwroot/events.js
index 65853b8ea0..52dd34e58a 100644
--- a/samples/grids/grid/conditional-cell-style-2/wwwroot/events.js
+++ b/samples/grids/grid/conditional-cell-style-2/wwwroot/events.js
@@ -1,4 +1,5 @@
+
igRegisterScript("WebGridCellStylesHandler", () => {
return {
background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
diff --git a/samples/grids/grid/conditional-row-selectors/BlazorClientApp.csproj b/samples/grids/grid/conditional-row-selectors/BlazorClientApp.csproj
index 59eeefe5e9..577a5da6f6 100644
--- a/samples/grids/grid/conditional-row-selectors/BlazorClientApp.csproj
+++ b/samples/grids/grid/conditional-row-selectors/BlazorClientApp.csproj
@@ -12,7 +12,7 @@
-
+
}
@@ -95,6 +94,7 @@
public void OnValueChanging(string newValue)
{
this.searchText = newValue;
+ this.grid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
}
public void PrevSearch()
diff --git a/samples/grids/grid/data-searching/BlazorClientApp.csproj b/samples/grids/grid/data-searching/BlazorClientApp.csproj
index 59eeefe5e9..577a5da6f6 100644
--- a/samples/grids/grid/data-searching/BlazorClientApp.csproj
+++ b/samples/grids/grid/data-searching/BlazorClientApp.csproj
@@ -12,7 +12,7 @@