diff --git a/browser/IgBlazorSamples.Gulp/package-lock.json b/browser/IgBlazorSamples.Gulp/package-lock.json index 60ebc32bc0..f04d0625e8 100644 --- a/browser/IgBlazorSamples.Gulp/package-lock.json +++ b/browser/IgBlazorSamples.Gulp/package-lock.json @@ -346,6 +346,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.7.1.tgz", "integrity": "sha512-W4QV/gXvfIsccN8225784LNOorcm7ch68Fi3V4Wg7gmkWSQRKevO4RrRqWo6N/Z/myK1QAiGgeaXN57m+R/8iQ==", "dev": true, + "peer": true, "dependencies": { "@types/eslint-visitor-keys": "^1.0.0", "@typescript-eslint/experimental-utils": "3.7.1", @@ -447,6 +448,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz", "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1730,6 +1732,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz", "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "^7.0.0", "ajv": "^6.10.0", @@ -6237,6 +6240,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz", "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==", "dev": true, + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -6887,6 +6891,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.7.1.tgz", "integrity": "sha512-W4QV/gXvfIsccN8225784LNOorcm7ch68Fi3V4Wg7gmkWSQRKevO4RrRqWo6N/Z/myK1QAiGgeaXN57m+R/8iQ==", "dev": true, + "peer": true, "requires": { "@types/eslint-visitor-keys": "^1.0.0", "@typescript-eslint/experimental-utils": "3.7.1", @@ -6947,7 +6952,8 @@ "version": "7.4.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz", "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==", - "dev": true + "dev": true, + "peer": true }, "acorn-jsx": { "version": "5.2.0", @@ -7980,6 +7986,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz", "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==", "dev": true, + "peer": true, "requires": { "@babel/code-frame": "^7.0.0", "ajv": "^6.10.0", @@ -11593,7 +11600,8 @@ "version": "3.7.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz", "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==", - "dev": true + "dev": true, + "peer": true }, "uglify-js": { "version": "3.10.1", diff --git a/samples/grids/grid/grid-theming-overview/App.razor b/samples/grids/grid/grid-theming-overview/App.razor new file mode 100644 index 0000000000..70c1b3a8c1 --- /dev/null +++ b/samples/grids/grid/grid-theming-overview/App.razor @@ -0,0 +1,124 @@ +@using IgniteUI.Blazor.Controls + +@inject IJSRuntime JS + +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private record ThemeOption(string Value, string Label, string CssPath, bool Dark); + + private static readonly ThemeOption[] Themes = new[] + { + new ThemeOption("light-bootstrap", "Bootstrap (Light)", "_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css", false), + new ThemeOption("light-material", "Material (Light)", "_content/IgniteUI.Blazor/themes/grid/light/material.css", false), + new ThemeOption("light-fluent", "Fluent (Light)", "_content/IgniteUI.Blazor/themes/grid/light/fluent.css", false), + new ThemeOption("light-indigo", "Indigo (Light)", "_content/IgniteUI.Blazor/themes/grid/light/indigo.css", false), + new ThemeOption("dark-bootstrap", "Bootstrap (Dark)", "_content/IgniteUI.Blazor/themes/grid/dark/bootstrap.css", true), + new ThemeOption("dark-material", "Material (Dark)", "_content/IgniteUI.Blazor/themes/grid/dark/material.css", true), + new ThemeOption("dark-fluent", "Fluent (Dark)", "_content/IgniteUI.Blazor/themes/grid/dark/fluent.css", true), + new ThemeOption("dark-indigo", "Indigo (Dark)", "_content/IgniteUI.Blazor/themes/grid/dark/indigo.css", true), + }; + + private string SelectedTheme = "light-bootstrap"; + private bool IsDark => Themes.FirstOrDefault(t => t.Value == SelectedTheme)?.Dark ?? false; + + private IgbGrid grid; + private IgbColumn column1; + + private async Task OnThemeChanged(ChangeEventArgs e) + { + SelectedTheme = e.Value?.ToString() ?? "light-bootstrap"; + var theme = Themes.FirstOrDefault(t => t.Value == SelectedTheme); + if (theme != null) + { + await JS.InvokeVoidAsync("eval", $"document.getElementById('grid-theme').href = '{theme.CssPath}'"); + } + } + + private NwindData _nwindData = null; + public NwindData NwindData + { + get + { + if (_nwindData == null) + { + _nwindData = new NwindData(); + } + return _nwindData; + } + } + +} diff --git a/samples/grids/grid/grid-theming-overview/BlazorClientApp.csproj b/samples/grids/grid/grid-theming-overview/BlazorClientApp.csproj new file mode 100644 index 0000000000..c2ceadfad7 --- /dev/null +++ b/samples/grids/grid/grid-theming-overview/BlazorClientApp.csproj @@ -0,0 +1,21 @@ + + + + net10.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + diff --git a/samples/grids/grid/grid-theming-overview/BlazorClientApp.sln b/samples/grids/grid/grid-theming-overview/BlazorClientApp.sln new file mode 100644 index 0000000000..1e2eda208a --- /dev/null +++ b/samples/grids/grid/grid-theming-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/grids/grid/grid-theming-overview/NwindData.cs b/samples/grids/grid/grid-theming-overview/NwindData.cs new file mode 100644 index 0000000000..25e092c72a --- /dev/null +++ b/samples/grids/grid/grid-theming-overview/NwindData.cs @@ -0,0 +1,125 @@ +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/grid-theming-overview/Program.cs b/samples/grids/grid/grid-theming-overview/Program.cs new file mode 100644 index 0000000000..88d624addd --- /dev/null +++ b/samples/grids/grid/grid-theming-overview/Program.cs @@ -0,0 +1,28 @@ +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(IgbGridModule) + ); + await builder.Build().RunAsync(); + } + } +} diff --git a/samples/grids/grid/grid-theming-overview/Properties/launchSettings.json b/samples/grids/grid/grid-theming-overview/Properties/launchSettings.json new file mode 100644 index 0000000000..18bd6fb5bc --- /dev/null +++ b/samples/grids/grid/grid-theming-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/grids/grid/grid-theming-overview/ReadMe.md b/samples/grids/grid/grid-theming-overview/ReadMe.md new file mode 100644 index 0000000000..b24fa32caa --- /dev/null +++ b/samples/grids/grid/grid-theming-overview/ReadMe.md @@ -0,0 +1,68 @@ + + + +This folder contains implementation of Blazor application with example of Grid Theming Overview feature using [Grid](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2022 + +NOTE: VS 2022 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2022** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/grids/grid/grid-theming-overview/_Imports.razor b/samples/grids/grid/grid-theming-overview/_Imports.razor new file mode 100644 index 0000000000..d27d337cb1 --- /dev/null +++ b/samples/grids/grid/grid-theming-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/grids/grid/grid-theming-overview/wwwroot/events.js b/samples/grids/grid/grid-theming-overview/wwwroot/events.js new file mode 100644 index 0000000000..4ccc66ebbb --- /dev/null +++ b/samples/grids/grid/grid-theming-overview/wwwroot/events.js @@ -0,0 +1,8 @@ +igRegisterScript("WebGridBooleanCellTemplate", (ctx) => { + var html = window.igTemplating.html; + if (ctx.cell.value) { + return html`Continued` + } else { + return html`Discontinued`; + } +}, false); diff --git a/samples/grids/grid/grid-theming-overview/wwwroot/index.css b/samples/grids/grid/grid-theming-overview/wwwroot/index.css new file mode 100644 index 0000000000..e1daadfe69 --- /dev/null +++ b/samples/grids/grid/grid-theming-overview/wwwroot/index.css @@ -0,0 +1,37 @@ +/* +CSS styles are loaded from the shared CSS file located at: +https://dl.infragistics.com/x/css/samples/shared.v6.css +*/ + +.container { + background-color: #fff; + color: #333; + transition: background-color 0.3s, color 0.3s; +} + +.container--dark { + background-color: #1a1a2e; + color: #e0e0e0; +} + +.theme-select { + padding: 8px 12px; + font-size: 14px; + border: 1px solid #ccc; + border-radius: 4px; + background: #fff; + color: #333; + cursor: pointer; + min-width: 200px; + transition: background-color 0.3s, color 0.3s, border-color 0.3s; +} + +.theme-select--dark { + background: #2a2a3e; + color: #e0e0e0; + border-color: #555; +} + +.label--dark { + color: #e0e0e0; +} diff --git a/samples/grids/grid/grid-theming-overview/wwwroot/index.html b/samples/grids/grid/grid-theming-overview/wwwroot/index.html new file mode 100644 index 0000000000..ab9cbbbf7d --- /dev/null +++ b/samples/grids/grid/grid-theming-overview/wwwroot/index.html @@ -0,0 +1,33 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + + +