Blazor Grid 状態保持

Blazor Grid の Ignite UI for Blazor 状態保持を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。IgbGridState が Blazor IgbGrid に適用されると、GetStateAsStringAsync および ApplyStateFromStringAsync メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。

無料で試してみる

サポートされる機能

IgbGridState は、以下の機能の状態の保存および復元をサポートします。

• Sorting
• Filtering
• Advanced Filtering
• Paging
• CellSelection
• RowSelection
• ColumnSelection
• RowPinning
• Expansion
• GroupBy
• Columns
  • 複数列ヘッダー
  • 列の順序
  • IColumnState インターフェイスによって定義される列プロパティ。

使用方法

GetStateAsStringAsync は、シリアル化された JSON 文字列を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの 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" });
}
razor

ApplyStateFromStringAsync - このメソッドはシリアル化された JSON 文字列を引数として受け取り、JSON 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。

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]);
        }
    }
}
razor

デモ

EXAMPLE

MODULES

DATA

RAZOR

CSS

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>("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 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"
        });
    }
}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コピー

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

制限

• GetStateAsString メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() が関数をサポートしないため、IgbGridState コンポーネントは、列の Formatter、Filters、Summaries、SortStrategy、CellClasses、CellStyles、HeaderTemplate および BodyTemplate プロパティを無視します。

その他のリソース

• ページング
• フィルタリング
• ソート
• 選択