Blazor 그리드 상태 지속성
Blazor Grid의 Ignite UI for Blazor 상태 지속성을 통해 개발자는 그리드 상태를 쉽게 저장하고 복원할 수 있습니다. Blazor IgbGridState IgbGrid에 적용되면 개발자가 모든 시나리오에서 상태 유지를 달성하는 데 사용할 수 있는 및 ApplyStateFromStringAsync 메서드가 노출 GetStateAsStringAsync 됩니다.
Supported Features
IgbGridState 지시문은 다음 기능의 상태 저장 및 복원을 지원합니다.
- Sorting
- Filtering
- 고급 필터링
- 페이징
- CellSelection
- 행 선택
- ColumnSelection
- RowPinning
- 확장
- 그룹화 기준
- Columns
- Multi column headers
- 열 순서
- Column properties defined by the
IColumnStateinterface.
Usage
직렬화된 JSON 문자열을 GetStateAsStringAsync 반환하므로 개발자는 이를 가져와서 모든 데이터 저장소(데이터베이스, 클라우드, 브라우저 localStorage 등)에 저장할 수 있습니다.
개발자는 기능 이름이 있는 배열을 인수로 전달하여 특정 기능에 대한 상태만 가져오도록 선택할 수 있습니다. 빈 배열은 기본 상태 옵션을 사용하게 됩니다.
<IgbGrid>
<IgbGridState @ref="gridState"></IgbGridState>
</IgbGrid>
@code {
// get all features` state in a serialized JSON string
string stateString = gridState.GetStateAsStringAsync(new string[0]);
// get the sorting and filtering expressions
string sortingFilteringStates = gridState.GetStateAsStringAsync(new string[] { "sorting", "filtering" });
}
razorApplyStateFromStringAsync- 이 메서드는 직렬화된 JSON 문자열을 인수로 허용하고 JSON 문자열 또는 지정된 기능에 있는 각 기능의 상태를 두 번째 인수로 복원합니다.
gridState.ApplyStateFromStringAsync(gridStateString, new string[0]);
gridState.ApplyStateFromStringAsync(sortingFilteringStates, new string[0])
razor객체는 Options 인터페이스를 구현 IgbGridStateOptions 합니다, 즉 특정 기능의 이름인 모든 키에 대해 이 기능 상태가 추적되는지 여부를 나타내는 부울 값이 있습니다. GetStateAsStringAsync 메서드는 이러한 기능의 상태를 반환된 값에 넣지 않으며 ApplyStateFromStringAsync 메서드는 해당 기능의 상태를 복원하지 않습니다.
gridState.Options = new IgbGridStateOptions
{
CellSelection = false,
Sorting = false
};
razor사용하기 쉬운 단일 지점 API를 사용하면 몇 줄의 코드로 전체 상태 유지 기능을 얻을 수 있습니다. 아래에서 코드를 복사하여 붙여 넣 으십시오 - 사용자가 현재 페이지를 떠날 때마다 브라우저 LocalStorage 개체에 그리드 상태를 저장합니다. 사용자가 기본 페이지로 돌아갈 때마다 그리드 상태가 복원됩니다. 더 이상 원하는 데이터를 얻기 위해 매번 복잡한 고급 필터링 및 정렬 표현식을 구성할 필요가 없습니다 - 한 번만 수행하고 아래 코드가 사용자를 위해 나머지 작업을 수행하도록 합니다.
@using IgniteUI.Blazor.Controls
@using Newtonsoft.Json
@implements IDisposable
@inject IJSRuntime JS
@inject NavigationManager Navigation
<IgbGrid Rendered="OnGridRendered">
<IgbGridState @ref="gridState"></IgbGridState>
<IgbColumn Field="ContactName" Header="Name" MinWidth="200px" ></IgbColumn>
<IgbColumn Field="ContactTitle" Header="Title" MinWidth="200px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
<IgbColumn Field="CompanyName" Header="Company" MinWidth="200px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
</IgbGrid>
@code {
protected override void OnAfterRender(bool firstRender)
{
Navigation.LocationChanged += OnLocationChanged;
}
void OnLocationChanged(object sender, LocationChangedEventArgs e)
{
SaveGridState();
}
void IDisposable.Dispose()
{
// Unsubscribe from the event when our component is disposed
Navigation.LocationChanged -= OnLocationChanged;
}
void OnGridRendered()
{
RestoreGridState();
}
async void SaveGridState() {
string state = gridState.GetStateAsStringAsync(new string[0]);
await JS.InvokeVoidAsync("window.localStorage.setItem", "grid-state", state);
}
async void RestoreGridState() {
string state = await JS.InvokeAsync<string>("window.localStorage.getItem", "grid-state");
if (state) {
gridState.ApplyStateFromStringAsync(state, new string[0]);
}
}
}
razorDemo
using System;
using System.Collections.Generic;
public class CustomersDataItem
{
public string ID { get; set; }
public string Company { get; set; }
public string ContactName { get; set; }
public string ContactTitle { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Region { get; set; }
public double PostalCode { get; set; }
public string Country { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
}
public class CustomersData
: List<CustomersDataItem>
{
public CustomersData()
{
this.Add(new CustomersDataItem()
{
ID = @"ALFKI",
Company = @"Alfreds Futterkiste",
ContactName = @"Maria Anders",
ContactTitle = @"Sales Representative",
Address = @"Obere Str. 57",
City = @"Berlin",
Region = @"East",
PostalCode = 12209,
Country = @"Germany",
Phone = @"030-0074321",
Fax = @"030-0076545"
});
this.Add(new CustomersDataItem()
{
ID = @"ANATR",
Company = @"Ana Trujillo Emparedados y helados",
ContactName = @"Ana Trujillo",
ContactTitle = @"Owner",
Address = @"Avda. de la Constitución 2222",
City = @"México D.F.",
Region = @"South",
PostalCode = 5021,
Country = @"Mexico",
Phone = @"(5) 555-4729",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"ANTON",
Company = @"Antonio Moreno Taquería",
ContactName = @"Antonio Moreno",
ContactTitle = @"Owner",
Address = @"Mataderos 2312",
City = @"México D.F.",
Region = @"South",
PostalCode = 5023,
Country = @"Mexico",
Phone = @"(5) 555-3932",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"AROUT",
Company = @"Around the Horn",
ContactName = @"Thomas Hardy",
ContactTitle = @"Sales Representative",
Address = @"120 Hanover Sq.",
City = @"London",
Region = @"East",
PostalCode = 22000,
Country = @"UK",
Phone = @"(171) 555-7788",
Fax = @"(171) 555-6750"
});
this.Add(new CustomersDataItem()
{
ID = @"BERGS",
Company = @"Berglunds snabbköp",
ContactName = @"Christina Berglund",
ContactTitle = @"Order Administrator",
Address = @"Berguvsvägen 8",
City = @"Luleå",
Region = @"South",
PostalCode = 17000,
Country = @"Sweden",
Phone = @"0921-12 34 65",
Fax = @"0921-12 34 67"
});
this.Add(new CustomersDataItem()
{
ID = @"BLAUS",
Company = @"Blauer See Delikatessen",
ContactName = @"Hanna Moos",
ContactTitle = @"Sales Representative",
Address = @"Forsterstr. 57",
City = @"Mannheim",
Region = @"East",
PostalCode = 68306,
Country = @"Germany",
Phone = @"0621-08460",
Fax = @"0621-08924"
});
this.Add(new CustomersDataItem()
{
ID = @"BLONP",
Company = @"Blondesddsl père et fils",
ContactName = @"Frédérique Citeaux",
ContactTitle = @"Marketing Manager",
Address = @"24, place Kléber",
City = @"Strasbourg",
Region = @"East",
PostalCode = 67000,
Country = @"France",
Phone = @"88.60.15.31",
Fax = @"88.60.15.32"
});
this.Add(new CustomersDataItem()
{
ID = @"BOLID",
Company = @"Bólido Comidas preparadas",
ContactName = @"Martín Sommer",
ContactTitle = @"Owner",
Address = @"C/ Araquil, 67",
City = @"Madrid",
Region = @"East",
PostalCode = 28023,
Country = @"Spain",
Phone = @"(91) 555 22 82",
Fax = @"(91) 555 91 99"
});
this.Add(new CustomersDataItem()
{
ID = @"BONAP",
Company = @"Bon app'",
ContactName = @"Laurence Lebihan",
ContactTitle = @"Owner",
Address = @"12, rue des Bouchers",
City = @"Marseille",
Region = @"West",
PostalCode = 13008,
Country = @"France",
Phone = @"91.24.45.40",
Fax = @"91.24.45.41"
});
this.Add(new CustomersDataItem()
{
ID = @"BOTTM",
Company = @"Bottom-Dollar Markets",
ContactName = @"Elizabeth Lincoln",
ContactTitle = @"Accounting Manager",
Address = @"23 Tsawassen Blvd.",
City = @"Tsawassen",
Region = @"BC",
PostalCode = 28000,
Country = @"Canada",
Phone = @"(604) 555-4729",
Fax = @"(604) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"BSBEV",
Company = @"B's Beverages",
ContactName = @"Victoria Ashworth",
ContactTitle = @"Sales Representative",
Address = @"Fauntleroy Circus",
City = @"London",
Region = @"South",
PostalCode = 10000,
Country = @"UK",
Phone = @"(171) 555-1212",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"CACTU",
Company = @"Cactus Comidas para llevar",
ContactName = @"Patricio Simpson",
ContactTitle = @"Sales Agent",
Address = @"Cerrito 333",
City = @"Buenos Aires",
Region = @"East",
PostalCode = 1010,
Country = @"Argentina",
Phone = @"(1) 135-5555",
Fax = @"(1) 135-4892"
});
this.Add(new CustomersDataItem()
{
ID = @"CENTC",
Company = @"Centro comercial Moctezuma",
ContactName = @"Francisco Chang",
ContactTitle = @"Marketing Manager",
Address = @"Sierras de Granada 9993",
City = @"México D.F.",
Region = @"South",
PostalCode = 5022,
Country = @"Mexico",
Phone = @"(5) 555-3392",
Fax = @"(5) 555-7293"
});
this.Add(new CustomersDataItem()
{
ID = @"CHOPS",
Company = @"Chop-suey Chinese",
ContactName = @"Yang Wang",
ContactTitle = @"Owner",
Address = @"Hauptstr. 29",
City = @"Bern",
Region = @"East",
PostalCode = 3012,
Country = @"Switzerland",
Phone = @"0452-076545",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"COMMI",
Company = @"Comércio Mineiro",
ContactName = @"Pedro Afonso",
ContactTitle = @"Sales Associate",
Address = @"Av. dos Lusíadas, 23",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 34000,
Country = @"Brazil",
Phone = @"(11) 555-7647",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"CONSH",
Company = @"Consolidated Holdings",
ContactName = @"Elizabeth Brown",
ContactTitle = @"Sales Representative",
Address = @"Berkeley Gardens 12 Brewery",
City = @"London",
Region = @"South",
PostalCode = 27000,
Country = @"UK",
Phone = @"(171) 555-2282",
Fax = @"(171) 555-9199"
});
this.Add(new CustomersDataItem()
{
ID = @"DRACD",
Company = @"Drachenblut Delikatessen",
ContactName = @"Sven Ottlieb",
ContactTitle = @"Order Administrator",
Address = @"Walserweg 21",
City = @"Aachen",
Region = @"South",
PostalCode = 52066,
Country = @"Germany",
Phone = @"0241-039123",
Fax = @"0241-059428"
});
this.Add(new CustomersDataItem()
{
ID = @"DUMON",
Company = @"Du monde entier",
ContactName = @"Janine Labrune",
ContactTitle = @"Owner",
Address = @"67, rue des Cinquante Otages",
City = @"Nantes",
Region = @"East",
PostalCode = 44000,
Country = @"France",
Phone = @"40.67.88.88",
Fax = @"40.67.89.89"
});
this.Add(new CustomersDataItem()
{
ID = @"EASTC",
Company = @"Eastern Connection",
ContactName = @"Ann Devon",
ContactTitle = @"Sales Agent",
Address = @"35 King George",
City = @"London",
Region = @"East",
PostalCode = 41000,
Country = @"UK",
Phone = @"(171) 555-0297",
Fax = @"(171) 555-3373"
});
this.Add(new CustomersDataItem()
{
ID = @"ERNSH",
Company = @"Ernst Handel",
ContactName = @"Roland Mendel",
ContactTitle = @"Sales Manager",
Address = @"Kirchgasse 6",
City = @"Graz",
Region = @"South",
PostalCode = 8010,
Country = @"Austria",
Phone = @"7675-3425",
Fax = @"7675-3426"
});
this.Add(new CustomersDataItem()
{
ID = @"FAMIA",
Company = @"Familia Arquibaldo",
ContactName = @"Aria Cruz",
ContactTitle = @"Marketing Assistant",
Address = @"Rua Orós, 92",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 27000,
Country = @"Brazil",
Phone = @"(11) 555-9857",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"FISSA",
Company = @"FISSA Fabrica Inter. Salchichas S.A.",
ContactName = @"Diego Roel",
ContactTitle = @"Accounting Manager",
Address = @"C/ Moralzarzal, 86",
City = @"Madrid",
Region = @"East",
PostalCode = 28034,
Country = @"Spain",
Phone = @"(91) 555 94 44",
Fax = @"(91) 555 55 93"
});
this.Add(new CustomersDataItem()
{
ID = @"FOLIG",
Company = @"Folies gourmandes",
ContactName = @"Martine Rancé",
ContactTitle = @"Assistant Sales Agent",
Address = @"184, chaussée de Tournai",
City = @"Lille",
Region = @"South",
PostalCode = 59000,
Country = @"France",
Phone = @"20.16.10.16",
Fax = @"20.16.10.17"
});
this.Add(new CustomersDataItem()
{
ID = @"FOLKO",
Company = @"Folk och fä HB",
ContactName = @"Maria Larsson",
ContactTitle = @"Owner",
Address = @"Åkergatan 24",
City = @"Bräcke",
Region = @"East",
PostalCode = 36000,
Country = @"Sweden",
Phone = @"0695-34 67 21",
Fax = @"0695 33-4455"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANK",
Company = @"Frankenversand",
ContactName = @"Peter Franken",
ContactTitle = @"Marketing Manager",
Address = @"Berliner Platz 43",
City = @"München",
Region = @"East",
PostalCode = 80805,
Country = @"Germany",
Phone = @"089-0877310",
Fax = @"089-0877451"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANR",
Company = @"France restauration",
ContactName = @"Carine Schmitt",
ContactTitle = @"Marketing Manager",
Address = @"54, rue Royale",
City = @"Nantes",
Region = @"South",
PostalCode = 44000,
Country = @"France",
Phone = @"40.32.21.21",
Fax = @"40.32.21.20"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANS",
Company = @"Franchi S.p.A.",
ContactName = @"Paolo Accorti",
ContactTitle = @"Sales Representative",
Address = @"Via Monte Bianco 34",
City = @"Torino",
Region = @"East",
PostalCode = 10100,
Country = @"Italy",
Phone = @"011-4988260",
Fax = @"011-4988261"
});
}
}csusing 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>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbGridModule),
typeof(IgbIconModule),
typeof(IgbCheckboxModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@implements IDisposable
@inject IJSRuntime JS
@inject NavigationManager Navigation
<style>
/*
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
}
</style>
<div class="container vertical">
<div class="container vertical sampleContainer">
<div class="container horizontal">
<IgbButton @onclick="RestoreGridState">
<IgbIcon @ref="IconRef" IconName="restore" Collection="material"></IgbIcon>
<span>Restore</span>
</IgbButton>
<IgbButton @onclick="SaveGridState">
<IgbIcon IconName="save" Collection="material"></IgbIcon>
<span>Save</span>
</IgbButton>
<IgbButton @onclick="ResetGridState">
<IgbIcon IconName="clear" Collection="material"></IgbIcon>
<span>Reset</span>
</IgbButton>
<IgbButton @onclick="LeavePage">
<IgbIcon IconName="forward" Collection="material"></IgbIcon>
<span>Leave</span>
</IgbButton>
<IgbButton @onclick="ClearStorage">
<IgbIcon IconName="delete" Collection="material"></IgbIcon>
<span>Clear</span>
</IgbButton>
<IgbButton @onclick="ReloadPage">
<IgbIcon IconName="refresh" Collection="material"></IgbIcon>
<span>Reload</span>
</IgbButton>
</div>
<div class="container horizontal">
<ul>
<li>Clicking the SAVE button or leaving the page <a id="leaveLink" href="./grids/grid/state-persistence-about"><strong>here</strong></a> will save grid state to localStorage.</li>
<li>Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.</li>
<li>Select/Deselect checkboxes to control saving / restoring feature state.</li>
</ul>
</div>
<div class="container horizontal">
<IgbCheckbox Change="@((evt) => OnChange(evt, "AllFeatures"))" Checked="allOptions">All Features</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "AdvancedFiltering"))" Checked="options.AdvancedFiltering">Adv.Filtering</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "CellSelection"))" Checked="options.CellSelection">Cell Selection</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "Columns"))" Checked="options.Columns">Columns</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "ColumnSelection"))" Checked="options.ColumnSelection">Col Selection</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "Expansion"))" Checked="options.Expansion">Expansion</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "Filtering"))" Checked="options.Filtering">Filtering</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "Paging"))" Checked="options.Paging">Paging</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "RowPinning"))" Checked="options.RowPinning">Row Pinning</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "RowSelection"))" Checked="options.RowSelection">Row Selection</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "Sorting"))" Checked="options.Sorting">Sorting</IgbCheckbox>
<IgbCheckbox Change="@((evt) => OnChange(evt, "GroupBy"))" Checked="options.GroupBy">Group By</IgbCheckbox>
</div>
<IgbGrid
@ref="grid"
Width="95%"
Height="500px"
PrimaryKey="ID"
AutoGenerate="false"
Data="CustomersData"
Rendered="OnGridRendered"
Moving="true"
AllowFiltering="true"
AllowAdvancedFiltering="true"
FilterMode="FilterMode.ExcelStyleFilter"
ColumnSelection="GridSelectionMode.Multiple"
RowSelection="GridSelectionMode.Multiple">
<IgbGridState @ref="gridState"></IgbGridState>
<IgbGridToolbar>
<IgbGridToolbarActions>
<IgbGridToolbarHiding></IgbGridToolbarHiding>
<IgbGridToolbarPinning></IgbGridToolbarPinning>
</IgbGridToolbarActions>
</IgbGridToolbar>
<IgbActionStrip>
<IgbGridPinningActions></IgbGridPinningActions>
</IgbActionStrip>
<IgbPaginator @ref="paginator"></IgbPaginator>
<IgbColumn Field="ID" Header="ID" Sortable="true" Filterable="true" Pinned="true"></IgbColumn>
<IgbColumn Field="ContactName" Header="Name" MinWidth="200px" Pinned="true"></IgbColumn>
<IgbColumn Field="ContactTitle" Header="Title" MinWidth="200px" Pinned="true" Groupable="true"></IgbColumn>
<IgbColumn Field="Company" Header="Company" MinWidth="200px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
<IgbColumn Field="Country" Header="Country" MinWidth="200px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
<IgbColumn Field="City" Header="City" MinWidth="120px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
<IgbColumn Field="Address" Header="Address" MinWidth="300px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
<IgbColumn Field="Region" Header="Region" MinWidth="120px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
<IgbColumn Field="PostalCode" Header="Postal Code" MinWidth="150px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
<IgbColumn Field="Phone" Header="Phone" MinWidth="150px" Sortable="true" Filterable="true"></IgbColumn>
</IgbGrid>
</div>
</div>
@code {
private string restoreIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z'/></svg>";
private string saveIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='#000000'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM6 6h9v4H6z'/></svg>";
private string clearIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z'/></svg>";
private string forwardIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/></svg>";
private string deleteIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z'/></svg>";
private string refreshIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z'/></svg>";
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
};
private string stateKey = "grid-state";
private IgbIcon IconRef;
private IDisposable registration;
private CustomersData _customersData = null;
public CustomersData CustomersData
{
get
{
if (_customersData == null)
{
_customersData = new CustomersData();
}
return _customersData;
}
}
protected override void OnAfterRender(bool firstRender)
{
var grid = this.grid;
if (this.IconRef != null && firstRender)
{
this.IconRef.EnsureReady().ContinueWith(new Action<Task>((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");
}));
}
if (firstRender)
{
registration = Navigation.RegisterLocationChangingHandler(OnLocationChanged);
}
}
ValueTask OnLocationChanged(LocationChangingContext arg)
{
SaveGridState();
return ValueTask.CompletedTask;
}
public void Dispose()
{
registration?.Dispose();
}
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<string>("window.localStorage.getItem", stateKey);
if (state != null)
{
await gridState.ApplyStateFromStringAsync(state, new string[0]);
}
}
void ResetGridState()
{
paginator.PerPage = 15;
paginator.TotalRecords = CustomersData.Count;
paginator.Paginate(0);
grid.ClearFilter("");
grid.SortingExpressions = new IgbSortingExpression[0];
grid.GroupingExpressions = new IgbGroupingExpression[0];
grid.DeselectAllColumns();
grid.DeselectAllRows();
grid.ClearCellSelection();
}
void OnChange(IgbCheckboxChangeEventArgs eventArgs, string action)
{
bool isChecked = eventArgs.Detail.Checked;
if (action == "AllFeatures")
{
var newOptions = new IgbGridStateOptions()
{
CellSelection = isChecked,
RowSelection = isChecked,
Filtering = isChecked,
AdvancedFiltering = isChecked,
Paging = isChecked,
Sorting = isChecked,
GroupBy = isChecked,
Columns = isChecked,
Expansion = isChecked,
RowPinning = isChecked,
ColumnSelection = isChecked
};
options = newOptions;
gridState.Options = newOptions;
}
else
{
var newOptions = new IgbGridStateOptions();
options.GetType().GetProperty(action).SetValue(newOptions, eventArgs.Detail.Checked);
gridState.Options = newOptions;
}
}
async void LeavePage()
{
SaveGridState();
await JS.InvokeVoidAsync("window.location.replace", "./grids/grid/state-persistence-about");
}
async void ClearStorage()
{
await JS.InvokeVoidAsync("window.localStorage.removeItem", stateKey);
}
async void ReloadPage()
{
await JS.InvokeVoidAsync("window.location.reload");
}
}razor/*
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
}css
Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.
Limitations
GetStateAsString메서드는 JSON.stringify() 메서드를 사용하여 원본 객체를 JSON 문자열로 변환합니다. JSON.stringify()는 함수를 지원하지 않으므로IgbGridState구성 요소가 열,,,,CellClasses SortStrategy,Filters Summaries및BodyTemplate HeaderTemplate CellStyles속성을 무시합니다.Formatter