diff --git a/samples/grids/data-grid/json-databinding/App.razor b/samples/grids/data-grid/json-databinding/App.razor
new file mode 100644
index 0000000000..aff35a3869
--- /dev/null
+++ b/samples/grids/data-grid/json-databinding/App.razor
@@ -0,0 +1,46 @@
+@using Microsoft.AspNetCore.Components
+@using Microsoft.AspNetCore.Components.Rendering
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.RenderTree
+@using Microsoft.AspNetCore.Components.Web
+
+@using IgniteUI.Blazor.Controls
+@inject IIgniteUIBlazor IgniteUIBlazor
+
+
+
+@code {
+
+ private IgbDataGrid _grid;
+ private IgbDataGrid DataGridRef
+ {
+ get { return _grid; }
+ set { _grid = value; StateHasChanged(); }
+ }
+
+ protected override void OnInitialized()
+ {
+ base.OnInitialized();
+
+ IgbDataGridModule.Register(IgniteUIBlazor);
+ IgbDataGridToolbarModule.Register(IgniteUIBlazor);
+ IgbColumnChooserModule.Register(IgniteUIBlazor);
+
+ }
+}
\ No newline at end of file
diff --git a/samples/grids/data-grid/json-databinding/BlazorClientApp.csproj b/samples/grids/data-grid/json-databinding/BlazorClientApp.csproj
new file mode 100644
index 0000000000..6662c92945
--- /dev/null
+++ b/samples/grids/data-grid/json-databinding/BlazorClientApp.csproj
@@ -0,0 +1,23 @@
+
+
+
+ net6.0
+ 3.0
+ Infragistics.Samples
+ Infragistics.Samples
+
+
+
+ 1701;1702,IDE0028,BL0005,0219
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/samples/grids/data-grid/json-databinding/BlazorClientApp.sln b/samples/grids/data-grid/json-databinding/BlazorClientApp.sln
new file mode 100644
index 0000000000..1e2eda208a
--- /dev/null
+++ b/samples/grids/data-grid/json-databinding/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/grids/data-grid/json-databinding/Program.cs b/samples/grids/data-grid/json-databinding/Program.cs
new file mode 100644
index 0000000000..8f7beb7ec3
--- /dev/null
+++ b/samples/grids/data-grid/json-databinding/Program.cs
@@ -0,0 +1,31 @@
+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;
+
+// required for registering IgniteUIBlazor
+using IgniteUI.Blazor.Controls;
+
+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 Infragistics Blazor
+ builder.Services.AddScoped(typeof(IIgniteUIBlazor), typeof(IgniteUIBlazor));
+
+ await builder.Build().RunAsync();
+ }
+ }
+}
diff --git a/samples/grids/data-grid/json-databinding/Properties/launchSettings.json b/samples/grids/data-grid/json-databinding/Properties/launchSettings.json
new file mode 100644
index 0000000000..81be214276
--- /dev/null
+++ b/samples/grids/data-grid/json-databinding/Properties/launchSettings.json
@@ -0,0 +1,27 @@
+{
+ "iisSettings": {
+ "windowsAuthentication": false,
+ "anonymousAuthentication": true,
+ "iisExpress": {
+ "applicationUrl": "http://localhost:4201",
+ "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:4201"
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/grids/data-grid/json-databinding/README.md b/samples/grids/data-grid/json-databinding/README.md
new file mode 100644
index 0000000000..bf833c0bbc
--- /dev/null
+++ b/samples/grids/data-grid/json-databinding/README.md
@@ -0,0 +1,67 @@
+
+
+
+This folder contains implementation of Blazor application with example of Overview feature using [Data Grid](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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/data-grid/json-databinding/_Imports.razor b/samples/grids/data-grid/json-databinding/_Imports.razor
new file mode 100644
index 0000000000..c51a034861
--- /dev/null
+++ b/samples/grids/data-grid/json-databinding/_Imports.razor
@@ -0,0 +1,9 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components
+@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/data-grid/json-databinding/wwwroot/index.css b/samples/grids/data-grid/json-databinding/wwwroot/index.css
new file mode 100644
index 0000000000..8da172bb87
--- /dev/null
+++ b/samples/grids/data-grid/json-databinding/wwwroot/index.css
@@ -0,0 +1,4 @@
+/*
+CSS styles are loaded from the shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
\ No newline at end of file
diff --git a/samples/grids/data-grid/json-databinding/wwwroot/index.html b/samples/grids/data-grid/json-databinding/wwwroot/index.html
new file mode 100644
index 0000000000..058283f303
--- /dev/null
+++ b/samples/grids/data-grid/json-databinding/wwwroot/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+ Samples | IgniteUI for Blazor | Infragistics
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ An unhandled error has occurred.
+
Reload
+
🗙
+
+
+
+
+
+
+
+