Persistencia del estado de la cuadrícula Blazor

    La persistencia del estado Ignite UI for Blazor en Blazor cuadrícula permite a los desarrolladores guardar y restaurar fácilmente el estado de la cuadrícula. Cuando se IgbGridState aplica en el Blazor IgbGrid, expone los métodos y ApplyStateFromStringAsync que los desarrolladores pueden usar para lograr la GetStateAsStringAsync persistencia de estado en cualquier escenario.

    Funciones admitidas

    IgbGridState permite guardar y restaurar el estado de las siguientes características:

    • Clasificación
    • Filtración
    • Filtrado avanzado
    • Paginación
    • CellSelection
    • RowSelection
    • ColumnSelection
    • RowPinning
    • Expansión
    • GroupBy
    • Columns
      • Multi column headers
      • Orden de columnas
      • Column properties defined by the IColumnState interface.

    Uso

    Devuelve GetStateAsStringAsync una cadena JSON serializada, por lo que los desarrolladores pueden tomarla y guardarla en cualquier almacenamiento de datos (base de datos, nube, navegador localStorage, etc.).

    El desarrollador puede optar por obtener solo el estado de una determinada característica o características, pasando una matriz con nombres de características como argumento. La matriz vacía dará como resultado el uso de las opciones de estado predeterminadas.

    <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- El método acepta una cadena JSON serializada como argumento y restaurará el estado de cada característica que se encuentre en la cadena JSON o en las características especificadas como segundo argumento.

    gridState.ApplyStateFromStringAsync(gridStateString, new string[0]);
    gridState.ApplyStateFromStringAsync(sortingFilteringStates, new string[0])
    razor

    El Options objeto implementa la IgbGridStateOptions interfaz, es decir, para cada clave, que es el nombre de una determinada característica, existe el valor booleano que indica si se realizará un seguimiento del estado de esta característica. GetStateAsStringAsync Los métodos no pondrán el estado de estas características en el valor devuelto y ApplyStateFromStringAsync los métodos no restaurarán el estado de ellas.

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

    Las API de punto único fáciles de usar permiten lograr una funcionalidad de persistencia de estado completa en solo unas pocas líneas de código. Copie y pegue el código desde abajo: guardará el estado de la cuadrícula en el objeto del navegador LocalStorage cada vez que el usuario abandone la página actual. Cada vez que el usuario regrese a la página principal, se restaurará el estado de la cuadrícula. Ya no es necesario configurar esas complejas expresiones avanzadas de filtrado y ordenación cada vez para obtener los datos que desea: hágalo una vez y haga que el código de abajo haga el resto por sus usuarios:

    @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

    Manifestación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Limitaciones

    Recursos adicionales