diff --git a/samples/grids/grid/state-persistence-main/App.razor b/samples/grids/grid/state-persistence-main/App.razor index a6a257ad03..ef6704f0c4 100644 --- a/samples/grids/grid/state-persistence-main/App.razor +++ b/samples/grids/grid/state-persistence-main/App.razor @@ -69,7 +69,7 @@ FilterMode="FilterMode.ExcelStyleFilter" ColumnSelection="GridSelectionMode.Multiple" RowSelection="GridSelectionMode.Multiple"> - + @@ -120,7 +120,8 @@ Columns = true, Expansion = true, RowPinning = true, - ColumnSelection= true + ColumnSelection= true, + Moving = true }; private string stateKey = "grid-state"; private IgbIcon IconRef; @@ -209,26 +210,57 @@ if (action == "AllFeatures") { var newOptions = new IgbGridStateOptions() - { - CellSelection = eventArgs.Detail, - RowSelection = eventArgs.Detail, - Filtering = eventArgs.Detail, - AdvancedFiltering = eventArgs.Detail, - Paging = eventArgs.Detail, - Sorting = eventArgs.Detail, - GroupBy = eventArgs.Detail, - Columns = eventArgs.Detail, - Expansion = eventArgs.Detail, - RowPinning = eventArgs.Detail, - ColumnSelection = eventArgs.Detail - }; + { + CellSelection = eventArgs.Detail, + RowSelection = eventArgs.Detail, + Filtering = eventArgs.Detail, + AdvancedFiltering = eventArgs.Detail, + Paging = eventArgs.Detail, + Sorting = eventArgs.Detail, + GroupBy = eventArgs.Detail, + Columns = eventArgs.Detail, + Expansion = eventArgs.Detail, + RowPinning = eventArgs.Detail, + ColumnSelection = eventArgs.Detail, + Moving = eventArgs.Detail + }; + allOptions = eventArgs.Detail; options = newOptions; - gridState.Options = newOptions; } else { - options.GetType().GetProperty(action).SetValue(options, eventArgs.Detail); - gridState.Options = options; + var newOptions = new IgbGridStateOptions() + { + CellSelection = options.CellSelection, + RowSelection = options.RowSelection, + Filtering = options.Filtering, + AdvancedFiltering = options.AdvancedFiltering, + Paging = options.Paging, + Sorting = options.Sorting, + GroupBy = options.GroupBy, + Columns = options.Columns, + Expansion = options.Expansion, + RowPinning = options.RowPinning, + ColumnSelection = options.ColumnSelection, + Moving = options.Moving + }; + newOptions.GetType().GetProperty(action).SetValue(newOptions, eventArgs.Detail); + options = newOptions; + + allOptions = !eventArgs.Detail ? false : options.GetType().GetProperties().All(prop => + { + if (prop.Name == "CellSelection" || prop.Name == "RowSelection" || prop.Name == "Filtering" + || prop.Name == "AdvancedFiltering" || prop.Name == "Paging" || prop.Name == "Sorting" + || prop.Name == "GroupBy" || prop.Name == "Columns" || prop.Name == "Expansion" + || prop.Name == "RowPinning" || prop.Name == "ColumnSelection" || prop.Name == "Moving") + { + bool testParse = false; + bool.TryParse(prop.GetValue(options).ToString(), out testParse); + return testParse; + } + return true; + } + ); } } diff --git a/samples/grids/tree-grid/state-persistence-about/App.razor b/samples/grids/tree-grid/state-persistence-about/App.razor new file mode 100644 index 0000000000..ee24e4f635 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-about/App.razor @@ -0,0 +1,22 @@ +@using IgniteUI.Blazor.Controls + +@inject IJSRuntime JS + +
+
+
+
+ By default navigating to the previous page, components will reinitialize as per their initial configuration, therefore the IgbTreeGrid will lose its state. +
+ What our Sample App does is reading the state from the window.localStorage object and applying the corresponding state on the Tree Grid's Rendered event.
+ Go Back +
+
+
+ +@code { + public async void LeavePage() + { + await JS.InvokeVoidAsync("window.location.replace", "./grids/tree-grid/state-persistence-main"); + } +} \ No newline at end of file diff --git a/samples/grids/tree-grid/state-persistence-about/BlazorClientApp.csproj b/samples/grids/tree-grid/state-persistence-about/BlazorClientApp.csproj new file mode 100644 index 0000000000..5a30935fe5 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-about/BlazorClientApp.csproj @@ -0,0 +1,21 @@ + + + + net6.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + diff --git a/samples/grids/tree-grid/state-persistence-about/BlazorClientApp.sln b/samples/grids/tree-grid/state-persistence-about/BlazorClientApp.sln new file mode 100644 index 0000000000..719093d5ff --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-about/BlazorClientApp.sln @@ -0,0 +1,24 @@ +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 17 +VisualStudioVersion = 17.4.33213.308 +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/tree-grid/state-persistence-about/Program.cs b/samples/grids/tree-grid/state-persistence-about/Program.cs new file mode 100644 index 0000000000..88d624addd --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-about/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/tree-grid/state-persistence-about/Properties/launchSettings.json b/samples/grids/tree-grid/state-persistence-about/Properties/launchSettings.json new file mode 100644 index 0000000000..18bd6fb5bc --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-about/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/tree-grid/state-persistence-about/ReadMe.md b/samples/grids/tree-grid/state-persistence-about/ReadMe.md new file mode 100644 index 0000000000..146ddefae1 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-about/ReadMe.md @@ -0,0 +1,67 @@ + + + +This folder contains implementation of Blazor application with example of State Persistence About feature using [Grid](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## 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/tree-grid/state-persistence-about/_Imports.razor b/samples/grids/tree-grid/state-persistence-about/_Imports.razor new file mode 100644 index 0000000000..d27d337cb1 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-about/_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/tree-grid/state-persistence-about/wwwroot/index.css b/samples/grids/tree-grid/state-persistence-about/wwwroot/index.css new file mode 100644 index 0000000000..5e83983c96 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-about/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/tree-grid/state-persistence-about/wwwroot/index.html b/samples/grids/tree-grid/state-persistence-about/wwwroot/index.html new file mode 100644 index 0000000000..5b6033dff3 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-about/wwwroot/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + diff --git a/samples/grids/tree-grid/state-persistence-main/App.razor b/samples/grids/tree-grid/state-persistence-main/App.razor new file mode 100644 index 0000000000..864660f7d5 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-main/App.razor @@ -0,0 +1,281 @@ +@using IgniteUI.Blazor.Controls +@using Newtonsoft.Json +@implements IDisposable + +@inject IJSRuntime JS +@inject NavigationManager Navigation + +
+ +
+
+ + + Restore + + + + Save + + + + Reset + + + + Leave + + + + Clear + + + + Reload + +
+
+
    +
  • Clicking the SAVE button or leaving the page here will save grid state to localStorage.
    • +
  • Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.
    • +
  • Select/Deselect checkboxes to control saving / restoring feature state.
    • +
+
+
+ All Features + Adv.Filtering + Cell Selection + Columns + Col Selection + Expansion + Filtering + Paging + Row Pinning + Row Selection + Sorting + Group By + Moving +
+ + + + + + + + + + + + + + + + + + + + + +
+
+ +@code { + + private string restoreIcon = ""; + private string saveIcon = ""; + private string clearIcon = ""; + private string forwardIcon = ""; + private string deleteIcon = ""; + private string refreshIcon = ""; + + private IgbGrid grid; + private IgbGridState gridState; + private IgbPaginator paginator; + private bool allOptions = true; + private IgbGridStateOptions options = new IgbGridStateOptions() + { + CellSelection = true, + RowSelection = true, + Filtering = true, + AdvancedFiltering = true, + Paging = true, + Sorting = true, + GroupBy = true, + Columns = true, + Expansion = true, + RowPinning = true, + ColumnSelection= true, + Moving = true + }; + private string stateKey = "tree-grid-state"; + private IgbIcon IconRef; + + private EmployeesNestedTreeData _employeesNestedTreeData = null; + public EmployeesNestedTreeData EmployeesNestedTreeData + { + get + { + if (_employeesNestedTreeData == null) + { + _employeesNestedTreeData = new EmployeesNestedTreeData(); + } + return _employeesNestedTreeData; + } + } + + protected override void OnInitialized() + { + Navigation.LocationChanged += OnLocationChanged; + base.OnInitialized(); + } + + protected override void OnAfterRender(bool firstRender) + { + var grid = this.grid; + if (this.IconRef != null && firstRender) + { + this.IconRef.EnsureReady().ContinueWith(new Action((e) => + { + this.IconRef.RegisterIconFromText("restore", restoreIcon, "material"); + this.IconRef.RegisterIconFromText("save", saveIcon, "material"); + this.IconRef.RegisterIconFromText("clear", clearIcon, "material"); + this.IconRef.RegisterIconFromText("forward", forwardIcon, "material"); + this.IconRef.RegisterIconFromText("delete", deleteIcon, "material"); + this.IconRef.RegisterIconFromText("refresh", refreshIcon, "material"); + })); + } + } + + void OnLocationChanged(object sender, LocationChangedEventArgs e) + { + SaveGridState(); + } + + public void Dispose() + { + Navigation.LocationChanged -= OnLocationChanged; + } + + void OnGridRendered() + { + RestoreGridState(); + } + + async void SaveGridState() + { + string state = await gridState.GetStateAsStringAsync(new string[0]); + await JS.InvokeVoidAsync("window.localStorage.setItem", stateKey, state); + } + + async void RestoreGridState() + { + string state = await JS.InvokeAsync("window.localStorage.getItem", stateKey); + if (state != null) + { + await gridState.ApplyStateFromStringAsync(state, new string[0]); + } + } + + void ResetGridState() + { + paginator.PerPage = 15; + paginator.TotalRecords = EmployeesNestedTreeData.Count; + paginator.Paginate(0); + grid.ClearFilter(""); + grid.SortingExpressions = new IgbSortingExpression[0]; + grid.GroupingExpressions = new IgbGroupingExpression[0]; + grid.DeselectAllColumns(); + grid.DeselectAllRows(); + grid.ClearCellSelection(); + } + + void OnChange(IgbComponentBoolValueChangedEventArgs eventArgs, string action) + { + if (action == "AllFeatures") + { + var newOptions = new IgbGridStateOptions() + { + CellSelection = eventArgs.Detail, + RowSelection = eventArgs.Detail, + Filtering = eventArgs.Detail, + AdvancedFiltering = eventArgs.Detail, + Paging = eventArgs.Detail, + Sorting = eventArgs.Detail, + GroupBy = eventArgs.Detail, + Columns = eventArgs.Detail, + Expansion = eventArgs.Detail, + RowPinning = eventArgs.Detail, + ColumnSelection = eventArgs.Detail, + Moving = eventArgs.Detail + }; + allOptions = eventArgs.Detail; + options = newOptions; + } + else + { + var newOptions = new IgbGridStateOptions() + { + CellSelection = options.CellSelection, + RowSelection = options.RowSelection, + Filtering = options.Filtering, + AdvancedFiltering = options.AdvancedFiltering, + Paging = options.Paging, + Sorting = options.Sorting, + GroupBy = options.GroupBy, + Columns = options.Columns, + Expansion = options.Expansion, + RowPinning = options.RowPinning, + ColumnSelection = options.ColumnSelection, + Moving = options.Moving + }; + newOptions.GetType().GetProperty(action).SetValue(newOptions, eventArgs.Detail); + options = newOptions; + + allOptions = !eventArgs.Detail ? false : options.GetType().GetProperties().All(prop => + { + if (prop.Name == "CellSelection" || prop.Name == "RowSelection" || prop.Name == "Filtering" + || prop.Name == "AdvancedFiltering" || prop.Name == "Paging" || prop.Name == "Sorting" + || prop.Name == "GroupBy" || prop.Name == "Columns" || prop.Name == "Expansion" + || prop.Name == "RowPinning" || prop.Name == "ColumnSelection" || prop.Name == "Moving") + { + bool testParse = false; + bool.TryParse(prop.GetValue(options).ToString(), out testParse); + return testParse; + } + return true; + } + ); + } + } + + async void LeavePage() + { + SaveGridState(); + await JS.InvokeVoidAsync("window.location.replace", "./grids/tree-grid/state-persistence-about"); + } + + async void ClearStorage() + { + await JS.InvokeVoidAsync("window.localStorage.removeItem", stateKey); + } + + async void ReloadPage() + { + await JS.InvokeVoidAsync("window.location.reload"); + } +} \ No newline at end of file diff --git a/samples/grids/tree-grid/state-persistence-main/BlazorClientApp.csproj b/samples/grids/tree-grid/state-persistence-main/BlazorClientApp.csproj new file mode 100644 index 0000000000..e85c7f4123 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-main/BlazorClientApp.csproj @@ -0,0 +1,22 @@ + + + + net6.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + + diff --git a/samples/grids/tree-grid/state-persistence-main/BlazorClientApp.sln b/samples/grids/tree-grid/state-persistence-main/BlazorClientApp.sln new file mode 100644 index 0000000000..1e2eda208a --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-main/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/tree-grid/state-persistence-main/EmployeesNestedTreeData.cs b/samples/grids/tree-grid/state-persistence-main/EmployeesNestedTreeData.cs new file mode 100644 index 0000000000..1c2d65066b --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-main/EmployeesNestedTreeData.cs @@ -0,0 +1,219 @@ +using System; +using System.Collections.Generic; +public class EmployeesNestedTreeDataItem +{ + public double Age { get; set; } + public string HireDate { get; set; } + public double ID { get; set; } + public string Name { get; set; } + public string Phone { get; set; } + public bool OnPTO { get; set; } + public double ParentID { get; set; } + public string Title { get; set; } +} + +public class EmployeesNestedTreeData + : List +{ + public EmployeesNestedTreeData() + { + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 55, + HireDate = @"2008-03-20", + ID = 1, + Name = @"Johnathan Winchester", + Phone = @"0251-031259", + OnPTO = false, + ParentID = -1, + Title = @"Development Manager" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 42, + HireDate = @"2014-01-22", + ID = 4, + Name = @"Ana Sanders", + Phone = @"(21) 555-0091", + OnPTO = true, + ParentID = -1, + Title = @"CEO" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 49, + HireDate = @"2014-01-22", + ID = 18, + Name = @"Victoria Lincoln", + Phone = @"(071) 23 67 22 20", + OnPTO = true, + ParentID = -1, + Title = @"Accounting Manager" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 61, + HireDate = @"2010-01-01", + ID = 10, + Name = @"Yang Wang", + Phone = @"(21) 555-0091", + OnPTO = false, + ParentID = -1, + Title = @"Localization Manager" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 43, + HireDate = @"2011-06-03", + ID = 3, + Name = @"Michael Burke", + Phone = @"0452-076545", + OnPTO = true, + ParentID = 1, + Title = @"Senior Software Developer" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 29, + HireDate = @"2009-06-19", + ID = 2, + Name = @"Thomas Anderson", + Phone = @"(14) 555-8122", + OnPTO = false, + ParentID = 1, + Title = @"Senior Software Developer" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 31, + HireDate = @"2014-08-18", + ID = 11, + Name = @"Monica Reyes", + Phone = @"7675-3425", + OnPTO = false, + ParentID = 1, + Title = @"Software Development Team Lead" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 35, + HireDate = @"2015-09-17", + ID = 6, + Name = @"Roland Mendel", + Phone = @"(505) 555-5939", + OnPTO = false, + ParentID = 11, + Title = @"Senior Software Developer" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 44, + HireDate = @"2009-10-11", + ID = 12, + Name = @"Sven Cooper", + Phone = @"0695-34 67 21", + OnPTO = true, + ParentID = 11, + Title = @"Senior Software Developer" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 44, + HireDate = @"2014-04-04", + ID = 14, + Name = @"Laurence Johnson", + Phone = @"981-443655", + OnPTO = false, + ParentID = 4, + Title = @"Director" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 25, + HireDate = @"2017-11-09", + ID = 5, + Name = @"Elizabeth Richards", + Phone = @"(2) 283-2951", + OnPTO = true, + ParentID = 4, + Title = @"Vice President" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 39, + HireDate = @"2010-03-22", + ID = 13, + Name = @"Trevor Ashworth", + Phone = @"981-443655", + OnPTO = true, + ParentID = 5, + Title = @"Director" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 44, + HireDate = @"2014-04-04", + ID = 17, + Name = @"Antonio Moreno", + Phone = @"(505) 555-5939", + OnPTO = false, + ParentID = 18, + Title = @"Senior Accountant" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 50, + HireDate = @"2007-11-18", + ID = 7, + Name = @"Pedro Rodriguez", + Phone = @"035-640230", + OnPTO = false, + ParentID = 10, + Title = @"Senior Localization Developer" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 27, + HireDate = @"2016-02-19", + ID = 8, + Name = @"Casey Harper", + Phone = @"0342-023176", + OnPTO = true, + ParentID = 10, + Title = @"Senior Localization" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 25, + HireDate = @"2017-11-09", + ID = 15, + Name = @"Patricia Simpson", + Phone = @"069-0245984", + OnPTO = false, + ParentID = 7, + Title = @"Localization Intern" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 39, + HireDate = @"2010-03-22", + ID = 9, + Name = @"Francisco Chang", + Phone = @"(91) 745 6200", + OnPTO = false, + ParentID = 7, + Title = @"Localization Intern" + }); + this.Add(new EmployeesNestedTreeDataItem() + { + Age = 25, + HireDate = @"2018-03-18", + ID = 16, + Name = @"Peter Lewis", + Phone = @"069-0245984", + OnPTO = true, + ParentID = 7, + Title = @"Localization Intern" + }); + } +} diff --git a/samples/grids/tree-grid/state-persistence-main/Program.cs b/samples/grids/tree-grid/state-persistence-main/Program.cs new file mode 100644 index 0000000000..9b523f6a4b --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-main/Program.cs @@ -0,0 +1,29 @@ +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(IgbTreeGridModule) + ); + await builder.Build().RunAsync(); + } + } +} diff --git a/samples/grids/tree-grid/state-persistence-main/Properties/launchSettings.json b/samples/grids/tree-grid/state-persistence-main/Properties/launchSettings.json new file mode 100644 index 0000000000..f8c46b5b4d --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-main/Properties/launchSettings.json @@ -0,0 +1,29 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:4200", + "sslPort": 44385 + } + }, + "profiles": { + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + }, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}" + }, + "BlazorSamples": { + "commandName": "Project", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + }, + "applicationUrl": "https://localhost:5001;http://localhost:4200", + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}" + } + } +} \ No newline at end of file diff --git a/samples/grids/tree-grid/state-persistence-main/ReadMe.md b/samples/grids/tree-grid/state-persistence-main/ReadMe.md new file mode 100644 index 0000000000..9aea136d29 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-main/ReadMe.md @@ -0,0 +1,67 @@ + + + +This folder contains implementation of Blazor application with example of Row Editing Options feature using [Tree Grid](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## 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/tree-grid/state-persistence-main/_Imports.razor b/samples/grids/tree-grid/state-persistence-main/_Imports.razor new file mode 100644 index 0000000000..d27d337cb1 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-main/_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/tree-grid/state-persistence-main/wwwroot/index.css b/samples/grids/tree-grid/state-persistence-main/wwwroot/index.css new file mode 100644 index 0000000000..24b363a359 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-main/wwwroot/index.css @@ -0,0 +1,14 @@ +/* +CSS styles are loaded from the shared CSS file located at: +https://static.infragistics.com/xplatform/css/samples/ +*/ + +.horizontal { + gap: 10px; + flex-basis: fit-content; + flex-wrap: wrap; +} + +.sampleContainer { + padding: 0.5rem +} \ No newline at end of file diff --git a/samples/grids/tree-grid/state-persistence-main/wwwroot/index.html b/samples/grids/tree-grid/state-persistence-main/wwwroot/index.html new file mode 100644 index 0000000000..dde85b4e54 --- /dev/null +++ b/samples/grids/tree-grid/state-persistence-main/wwwroot/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + +