Blazor 계층적 그리드 상태 지속성

    Blazor 계층적 그리드의 Ignite UI for Blazor 상태 지속성을 통해 개발자는 그리드 상태를 쉽게 저장하고 복원할 수 있습니다. Blazor IgbGridState​ ​IgbHierarchicalGrid에 적용되면 개발자가 모든 시나리오에서 상태 유지를 달성하는 데 사용할 수 있는 및 ApplyStateFromStringAsync 메서드가 노출 GetStateAsStringAsync 됩니다.

    Supported Features

    IgbGridState 지시문은 다음 기능의 상태 저장 및 복원을 지원합니다.

    • RowIslands
      • 계층 구조 아래의 모든 하위 그리드에 대한 저장/복원 기능
    • Sorting
    • Filtering
    • AdvancedFiltering
    • 페이징
    • CellSelection
    • 행 선택
    • ColumnSelection
    • RowPinning
    • 확장
    • Columns
      • Multi column headers
      • 열 순서
      • Column properties defined by the IColumnState interface.

    Usage

    직렬화된 JSON 문자열을 GetStateAsStringAsync 반환하므로 개발자는 이를 가져와서 모든 데이터 저장소(데이터베이스, 클라우드, 브라우저 localStorage 등)에 저장할 수 있습니다.

    개발자는 기능 이름이 있는 배열을 인수로 전달하여 특정 기능에 대한 상태만 가져오도록 선택할 수 있습니다. 빈 배열은 기본 상태 옵션을 사용하게 됩니다.

    <IgbHierarchicalGrid>
    <IgbGridState @ref="gridState"></IgbGridState>
</IgbHierarchicalGrid>

@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 문자열 또는 지정된 기능에 있는 각 기능의 상태를 두 번째 인수로 복원합니다.

    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

<IgbHierarchicalGrid 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>
</IgbHierarchicalGrid>

@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

    Restoring Child Grids

    자식 그리드의 상태 저장/복원은 속성에 RowIslands 의해 제어되며 기본적으로 활성화되어 있습니다. IgbGridState 루트 그리드와 계층 아래의 모든 자식 그리드 모두에 대해 기능을 저장/복원하기 위해 동일한 옵션을 사용합니다. 예를 들어 다음 옵션을 전달하는 경우:

    <IgbHierarchicalGrid>
    <IgbGridState @ref="gridState"></IgbGridState>
</IgbHierarchicalGrid>

@code {
    private IgbGridState gridState;

    gridState.Options = new IgbGridStateOptions
    {
        CellSelection = false,
        Sorting = false,
        RowIslands = true
    };
}
razor

    그런 다음 API는 GetState and Sorting를 제외한 Selection 모든 그리드(루트 그리드 및 자식 그리드) 기능에 대한 상태를 반환합니다. 나중에 개발자가 모든 그리드의 Filtering 상태만 복원하려면 다음을 사용합니다.

    gridState.ApplyStateFromStringAsync(gridStateString, new string[] { "filtering", "rowIslands" });
razor

    Demo

    EXAMPLE
    MODULES
    DATA
    RAZOR
    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

    • 매개 변수가 없는 API를 사용하여 applyState 모든 그리드 기능을 한 번에 복원하는 경우 루트 그리드의 열 속성이 기본값으로 재설정될 수 있습니다. 이 경우 그 후에 열 또는 열 선택 기능을 별도로 복원하십시오.