Persistencia del estado de la cuadrícula jerárquica Blazor
La persistencia de estado Ignite UI for Blazor en Blazor cuadrícula jerárquica permite a los desarrolladores guardar y restaurar fácilmente el estado de la cuadrícula. Cuando se IgbGridState
aplica en el Blazor IgbHierarchicalGrid
, 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:
- RowIslands
- guardar/restaurar funciones para todas las cuadrículas secundarias en la jerarquía
- Clasificación
- Filtración
- AdvancedFiltering
- Paginación
- CellSelection
- RowSelection
- ColumnSelection
- RowPinning
- Expansión
- 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.
<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
- 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
<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
Restaurar redes secundarias
El estado de guardado/restauración de las cuadrículas secundarias está controlado por la RowIslands
propiedad y está habilitado de forma predeterminada. IgbGridState
utilizará las mismas opciones para guardar/restaurar características tanto para la cuadrícula raíz como para todas las cuadrículas secundarias de la jerarquía. Por ejemplo, si pasamos las siguientes opciones:
<IgbHierarchicalGrid>
<IgbGridState @ref="gridState"></IgbGridState>
</IgbHierarchicalGrid>
@code {
private IgbGridState gridState;
gridState.Options = new IgbGridStateOptions
{
CellSelection = false,
Sorting = false,
RowIslands = true
};
}
razor
A continuación, la GetState
API devolverá el estado de todas las funciones de las cuadrículas (cuadrícula raíz y cuadrículas secundarias) excluyendo Selection
y Sorting
. Si más adelante el desarrollador desea restaurar solo el Filtering
estado de todas las cuadrículas, use:
gridState.ApplyStateFromStringAsync(gridStateString, new string[] { "filtering", "rowIslands" });
razor
Manifestación
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();
}
}
}
csusing System;
using System.Collections.Generic;
public class SingersDataItem
{
public double ID { get; set; }
public string Artist { get; set; }
public string Photo { get; set; }
public double Debut { get; set; }
public double GrammyNominations { get; set; }
public double GrammyAwards { get; set; }
public bool HasGrammyAward { get; set; }
public List<SingersDataItem_ToursItem> Tours { get; set; }
public List<SingersDataItem_AlbumsItem> Albums { get; set; }
}
public class SingersDataItem_ToursItem
{
public string Tour { get; set; }
public string StartedOn { get; set; }
public string Location { get; set; }
public string Headliner { get; set; }
public string TouredBy { get; set; }
}
public class SingersDataItem_AlbumsItem
{
public string Album { get; set; }
public string LaunchDate { get; set; }
public double BillboardReview { get; set; }
public double USBillboard200 { get; set; }
public string Artist { get; set; }
}
public class SingersData
: List<SingersDataItem>
{
public SingersData()
{
this.Add(new SingersDataItem()
{
ID = 0,
Artist = @"Naomí Yepes",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/naomi.jpg",
Debut = 2011,
GrammyNominations = 6,
GrammyAwards = 0,
HasGrammyAward = false,
Tours = new List<SingersDataItem_ToursItem>()
{
new SingersDataItem_ToursItem()
{
Tour = @"Faithful Tour",
StartedOn = @"Sep 12",
Location = @"Worldwide",
Headliner = @"NO",
TouredBy = @"Naomí Yepes"
},
new SingersDataItem_ToursItem()
{
Tour = @"City Jam Sessions",
StartedOn = @"Aug 13",
Location = @"North America",
Headliner = @"YES",
TouredBy = @"Naomí Yepes"
},
new SingersDataItem_ToursItem()
{
Tour = @"Christmas NYC 2013",
StartedOn = @"Dec 13",
Location = @"United States",
Headliner = @"NO",
TouredBy = @"Naomí Yepes"
},
new SingersDataItem_ToursItem()
{
Tour = @"Christmas NYC 2014",
StartedOn = @"Dec 14",
Location = @"North America",
Headliner = @"NO",
TouredBy = @"Naomí Yepes"
},
new SingersDataItem_ToursItem()
{
Tour = @"Watermelon Tour",
StartedOn = @"Feb 15",
Location = @"Worldwide",
Headliner = @"YES",
TouredBy = @"Naomí Yepes"
},
new SingersDataItem_ToursItem()
{
Tour = @"Christmas NYC 2016",
StartedOn = @"Dec 16",
Location = @"United States",
Headliner = @"NO",
TouredBy = @"Naomí Yepes"
},
new SingersDataItem_ToursItem()
{
Tour = @"The Dragon Tour",
StartedOn = @"Feb 17",
Location = @"Worldwide",
Headliner = @"NO",
TouredBy = @"Naomí Yepes"
},
new SingersDataItem_ToursItem()
{
Tour = @"Organic Sessions",
StartedOn = @"Aug 18",
Location = @"United States, England",
Headliner = @"YES",
TouredBy = @"Naomí Yepes"
},
new SingersDataItem_ToursItem()
{
Tour = @"Hope World Tour",
StartedOn = @"Mar 19",
Location = @"Worldwide",
Headliner = @"NO",
TouredBy = @"Naomí Yepes"
}}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Initiation",
LaunchDate = @"September 3, 2013",
BillboardReview = 86,
USBillboard200 = 1,
Artist = @"Naomí Yepes"
},
new SingersDataItem_AlbumsItem()
{
Album = @"Dream Driven",
LaunchDate = @"August 25, 2014",
BillboardReview = 81,
USBillboard200 = 1,
Artist = @"Naomí Yepes"
},
new SingersDataItem_AlbumsItem()
{
Album = @"The dragon journey",
LaunchDate = @"May 20, 2016",
BillboardReview = 60,
USBillboard200 = 2,
Artist = @"Naomí Yepes"
},
new SingersDataItem_AlbumsItem()
{
Album = @"Organic me",
LaunchDate = @"August 17, 2018",
BillboardReview = 82,
USBillboard200 = 1,
Artist = @"Naomí Yepes"
},
new SingersDataItem_AlbumsItem()
{
Album = @"Curiosity",
LaunchDate = @"December 7, 2019",
BillboardReview = 75,
USBillboard200 = 12,
Artist = @"Naomí Yepes"
}}
});
this.Add(new SingersDataItem()
{
ID = 1,
Artist = @"Babila Ebwélé",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/babila.jpg",
Debut = 2009,
GrammyNominations = 0,
GrammyAwards = 11,
HasGrammyAward = true,
Tours = new List<SingersDataItem_ToursItem>()
{
new SingersDataItem_ToursItem()
{
Tour = @"The last straw",
StartedOn = @"May 09",
Location = @"Europe, Asia",
Headliner = @"NO",
TouredBy = @"Babila Ebwélé"
},
new SingersDataItem_ToursItem()
{
Tour = @"No foundations",
StartedOn = @"Jun 04",
Location = @"United States, Europe",
Headliner = @"YES",
TouredBy = @"Babila Ebwélé"
},
new SingersDataItem_ToursItem()
{
Tour = @"Crazy eyes",
StartedOn = @"Jun 08",
Location = @"North America",
Headliner = @"NO",
TouredBy = @"Babila Ebwélé"
},
new SingersDataItem_ToursItem()
{
Tour = @"Zero gravity",
StartedOn = @"Apr 19",
Location = @"United States",
Headliner = @"NO",
TouredBy = @"Babila Ebwélé"
},
new SingersDataItem_ToursItem()
{
Tour = @"Battle with myself",
StartedOn = @"Mar 08",
Location = @"North America",
Headliner = @"YES",
TouredBy = @"Babila Ebwélé"
}}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Pushing up daisies",
LaunchDate = @"May 31, 2000",
BillboardReview = 86,
USBillboard200 = 42,
Artist = @"Babila Ebwélé"
},
new SingersDataItem_AlbumsItem()
{
Album = @"Death's dead",
LaunchDate = @"June 8, 2016",
BillboardReview = 85,
USBillboard200 = 95,
Artist = @"Babila Ebwélé"
}}
});
this.Add(new SingersDataItem()
{
ID = 2,
Artist = @"Ahmad Nazeri",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/ahmad.jpg",
Debut = 2004,
GrammyNominations = 3,
GrammyAwards = 1,
HasGrammyAward = true,
Tours = new List<SingersDataItem_ToursItem>()
{
}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Emergency",
LaunchDate = @"March 6, 2004",
BillboardReview = 98,
USBillboard200 = 69,
Artist = @"Ahmad Nazeri"
},
new SingersDataItem_AlbumsItem()
{
Album = @"Bursting bubbles",
LaunchDate = @"April 17, 2006",
BillboardReview = 69,
USBillboard200 = 39,
Artist = @"Ahmad Nazeri"
}}
});
this.Add(new SingersDataItem()
{
ID = 3,
Artist = @"Kimmy McIlmorie",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/kimmy.jpg",
Debut = 2007,
GrammyNominations = 21,
GrammyAwards = 3,
HasGrammyAward = true,
Tours = new List<SingersDataItem_ToursItem>()
{
}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Here we go again",
LaunchDate = @"November 18, 2017",
BillboardReview = 68,
USBillboard200 = 1,
Artist = @"Kimmy McIlmorie"
}}
});
this.Add(new SingersDataItem()
{
ID = 4,
Artist = @"Mar Rueda",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/mar.jpg",
Debut = 1996,
GrammyNominations = 14,
GrammyAwards = 2,
HasGrammyAward = true,
Tours = new List<SingersDataItem_ToursItem>()
{
}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
}
});
this.Add(new SingersDataItem()
{
ID = 5,
Artist = @"Izabella Tabakova",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/izabella.jpg",
Debut = 2017,
GrammyNominations = 7,
GrammyAwards = 11,
HasGrammyAward = true,
Tours = new List<SingersDataItem_ToursItem>()
{
new SingersDataItem_ToursItem()
{
Tour = @"Final breath",
StartedOn = @"Jun 13",
Location = @"Europe",
Headliner = @"YES",
TouredBy = @"Izabella Tabakova"
},
new SingersDataItem_ToursItem()
{
Tour = @"Once bitten",
StartedOn = @"Dec 18",
Location = @"Australia, United States",
Headliner = @"NO",
TouredBy = @"Izabella Tabakova"
},
new SingersDataItem_ToursItem()
{
Tour = @"Code word",
StartedOn = @"Sep 19",
Location = @"United States, Europe",
Headliner = @"NO",
TouredBy = @"Izabella Tabakova"
},
new SingersDataItem_ToursItem()
{
Tour = @"Final draft",
StartedOn = @"Sep 17",
Location = @"United States, Europe",
Headliner = @"YES",
TouredBy = @"Izabella Tabakova"
}}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Once bitten",
LaunchDate = @"July 16, 2007",
BillboardReview = 79,
USBillboard200 = 53,
Artist = @"Izabella Tabakova"
},
new SingersDataItem_AlbumsItem()
{
Album = @"Your graciousness",
LaunchDate = @"November 17, 2004",
BillboardReview = 69,
USBillboard200 = 30,
Artist = @"Izabella Tabakova"
},
new SingersDataItem_AlbumsItem()
{
Album = @"Dark matters",
LaunchDate = @"November 3, 2002",
BillboardReview = 79,
USBillboard200 = 85,
Artist = @"Izabella Tabakova"
}}
});
this.Add(new SingersDataItem()
{
ID = 6,
Artist = @"Nguyễn Diệp Chi",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/nguyen.jpg",
Debut = 1992,
GrammyNominations = 4,
GrammyAwards = 2,
HasGrammyAward = true,
Tours = new List<SingersDataItem_ToursItem>()
{
}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Library of liberty",
LaunchDate = @"December 22, 2003",
BillboardReview = 93,
USBillboard200 = 5,
Artist = @"Nguyễn Diệp Chi"
}}
});
this.Add(new SingersDataItem()
{
ID = 7,
Artist = @"Eva Lee",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/eva.jpg",
Debut = 2008,
GrammyNominations = 2,
GrammyAwards = 0,
HasGrammyAward = false,
Tours = new List<SingersDataItem_ToursItem>()
{
}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Just a tease",
LaunchDate = @"May 3, 2001",
BillboardReview = 91,
USBillboard200 = 29,
Artist = @"Eva Lee"
}}
});
this.Add(new SingersDataItem()
{
ID = 8,
Artist = @"Siri Jakobsson",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/siri.jpg",
Debut = 1990,
GrammyNominations = 2,
GrammyAwards = 8,
HasGrammyAward = true,
Tours = new List<SingersDataItem_ToursItem>()
{
new SingersDataItem_ToursItem()
{
Tour = @"Basket case",
StartedOn = @"Jan 07",
Location = @"Europe, Asia",
Headliner = @"NO",
TouredBy = @"Siri Jakobsson"
},
new SingersDataItem_ToursItem()
{
Tour = @"The bigger fish",
StartedOn = @"Dec 07",
Location = @"United States, Europe",
Headliner = @"YES",
TouredBy = @"Siri Jakobsson"
},
new SingersDataItem_ToursItem()
{
Tour = @"Missed the boat",
StartedOn = @"Jun 09",
Location = @"Europe, Asia",
Headliner = @"NO",
TouredBy = @"Siri Jakobsson"
},
new SingersDataItem_ToursItem()
{
Tour = @"Equivalent exchange",
StartedOn = @"Feb 06",
Location = @"United States, Europe",
Headliner = @"YES",
TouredBy = @"Siri Jakobsson"
},
new SingersDataItem_ToursItem()
{
Tour = @"Damage control",
StartedOn = @"Oct 11",
Location = @"Australia, United States",
Headliner = @"NO",
TouredBy = @"Siri Jakobsson"
}}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Under the bus",
LaunchDate = @"May 14, 2000",
BillboardReview = 67,
USBillboard200 = 67,
Artist = @"Siri Jakobsson"
}}
});
this.Add(new SingersDataItem()
{
ID = 9,
Artist = @"Pablo Cambeiro",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/pablo.jpg",
Debut = 2011,
GrammyNominations = 5,
GrammyAwards = 0,
HasGrammyAward = false,
Tours = new List<SingersDataItem_ToursItem>()
{
new SingersDataItem_ToursItem()
{
Tour = @"Beads",
StartedOn = @"May 11",
Location = @"Worldwide",
Headliner = @"NO",
TouredBy = @"Pablo Cambeiro"
},
new SingersDataItem_ToursItem()
{
Tour = @"Concept art",
StartedOn = @"Dec 18",
Location = @"United States",
Headliner = @"YES",
TouredBy = @"Pablo Cambeiro"
},
new SingersDataItem_ToursItem()
{
Tour = @"Glass shoe",
StartedOn = @"Jan 20",
Location = @"Worldwide",
Headliner = @"YES",
TouredBy = @"Pablo Cambeiro"
},
new SingersDataItem_ToursItem()
{
Tour = @"Pushing buttons",
StartedOn = @"Feb 15",
Location = @"Europe, Asia",
Headliner = @"NO",
TouredBy = @"Pablo Cambeiro"
},
new SingersDataItem_ToursItem()
{
Tour = @"Dark matters",
StartedOn = @"Jan 04",
Location = @"Australia, United States",
Headliner = @"YES",
TouredBy = @"Pablo Cambeiro"
},
new SingersDataItem_ToursItem()
{
Tour = @"Greener grass",
StartedOn = @"Sep 09",
Location = @"United States, Europe",
Headliner = @"NO",
TouredBy = @"Pablo Cambeiro"
},
new SingersDataItem_ToursItem()
{
Tour = @"Apparatus",
StartedOn = @"Nov 16",
Location = @"Europe",
Headliner = @"NO",
TouredBy = @"Pablo Cambeiro"
}}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Fluke",
LaunchDate = @"August 4, 2017",
BillboardReview = 93,
USBillboard200 = 98,
Artist = @"Pablo Cambeiro"
},
new SingersDataItem_AlbumsItem()
{
Album = @"Crowd control",
LaunchDate = @"August 26, 2003",
BillboardReview = 68,
USBillboard200 = 84,
Artist = @"Pablo Cambeiro"
}}
});
this.Add(new SingersDataItem()
{
ID = 10,
Artist = @"Athar Malakooti",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/athar.jpg",
Debut = 2017,
GrammyNominations = 0,
GrammyAwards = 0,
HasGrammyAward = false,
Tours = new List<SingersDataItem_ToursItem>()
{
}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Pushing up daisies",
LaunchDate = @"February 24, 2016",
BillboardReview = 74,
USBillboard200 = 77,
Artist = @"Athar Malakooti"
}}
});
this.Add(new SingersDataItem()
{
ID = 11,
Artist = @"Marti Valencia",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/marti.jpg",
Debut = 2004,
GrammyNominations = 1,
GrammyAwards = 1,
HasGrammyAward = true,
Tours = new List<SingersDataItem_ToursItem>()
{
new SingersDataItem_ToursItem()
{
Tour = @"Cat eat cat world",
StartedOn = @"Sep 00",
Location = @"Worldwide",
Headliner = @"YES",
TouredBy = @"Marti Valencia"
},
new SingersDataItem_ToursItem()
{
Tour = @"Final straw",
StartedOn = @"Sep 06",
Location = @"United States, Europe",
Headliner = @"NO",
TouredBy = @"Marti Valencia"
}}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Nemesis",
LaunchDate = @"June 30, 2004",
BillboardReview = 94,
USBillboard200 = 9,
Artist = @"Marti Valencia"
},
new SingersDataItem_AlbumsItem()
{
Album = @"First chance",
LaunchDate = @"January 7, 2019",
BillboardReview = 96,
USBillboard200 = 19,
Artist = @"Marti Valencia"
},
new SingersDataItem_AlbumsItem()
{
Album = @"God's advocate",
LaunchDate = @"April 29, 2007",
BillboardReview = 66,
USBillboard200 = 37,
Artist = @"Marti Valencia"
}}
});
this.Add(new SingersDataItem()
{
ID = 12,
Artist = @"Alicia Stanger",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/alicia.jpg",
Debut = 2010,
GrammyNominations = 1,
GrammyAwards = 0,
HasGrammyAward = false,
Tours = new List<SingersDataItem_ToursItem>()
{
}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Forever alone",
LaunchDate = @"November 3, 2005",
BillboardReview = 82,
USBillboard200 = 7,
Artist = @"Alicia Stanger"
}}
});
this.Add(new SingersDataItem()
{
ID = 13,
Artist = @"Peter Taylor",
Photo = @"https://static.infragistics.com/xplatform/images/people/names/peter.jpg",
Debut = 2005,
GrammyNominations = 0,
GrammyAwards = 2,
HasGrammyAward = true,
Tours = new List<SingersDataItem_ToursItem>()
{
new SingersDataItem_ToursItem()
{
Tour = @"Love",
StartedOn = @"Jun 04",
Location = @"Europe, Asia",
Headliner = @"YES",
TouredBy = @"Peter Taylor"
},
new SingersDataItem_ToursItem()
{
Tour = @"Fault of treasures",
StartedOn = @"Oct 13",
Location = @"North America",
Headliner = @"NO",
TouredBy = @"Peter Taylor"
},
new SingersDataItem_ToursItem()
{
Tour = @"For eternity",
StartedOn = @"Mar 05",
Location = @"United States",
Headliner = @"YES",
TouredBy = @"Peter Taylor"
},
new SingersDataItem_ToursItem()
{
Tour = @"Time flies",
StartedOn = @"Jun 03",
Location = @"North America",
Headliner = @"NO",
TouredBy = @"Peter Taylor"
},
new SingersDataItem_ToursItem()
{
Tour = @"Highest difficulty",
StartedOn = @"Nov 01",
Location = @"Worldwide",
Headliner = @"YES",
TouredBy = @"Peter Taylor"
},
new SingersDataItem_ToursItem()
{
Tour = @"Sleeping dogs",
StartedOn = @"May 04",
Location = @"United States, Europe",
Headliner = @"NO",
TouredBy = @"Peter Taylor"
}}
,
Albums = new List<SingersDataItem_AlbumsItem>()
{
new SingersDataItem_AlbumsItem()
{
Album = @"Decisions decisions",
LaunchDate = @"April 10, 2008",
BillboardReview = 85,
USBillboard200 = 35,
Artist = @"Peter Taylor"
},
new SingersDataItem_AlbumsItem()
{
Album = @"Climate changed",
LaunchDate = @"June 20, 2015",
BillboardReview = 66,
USBillboard200 = 89,
Artist = @"Peter Taylor"
}}
});
}
}
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/hierarchical-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, "RowIslands"))" Checked="options.RowIslands">Row Islands</IgbCheckbox>
</div>
<IgbHierarchicalGrid
@ref="grid"
Width="95%"
Height="500px"
PrimaryKey="Photo"
AutoGenerate="false"
Data="SingersData"
Moving="true"
AllowFiltering="true"
Rendered="OnGridRendered"
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="Artist" Sortable="true"></IgbColumn>
<IgbColumn DataType="GridColumnDataType.Image" Field="Photo" Editable="false" Sortable="true">
</IgbColumn>
<IgbColumn Field="Debut" DataType="GridColumnDataType.Number" Sortable="true"></IgbColumn>
<IgbColumn Field="GrammyNominations" Header="Grammy Nominations" DataType="GridColumnDataType.Number" Sortable="true"></IgbColumn>
<IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number" Sortable="true"></IgbColumn>
<IgbRowIsland ChildDataKey="Albums" ColumnSelection="GridSelectionMode.Multiple"
RowSelection="GridSelectionMode.Multiple"
AutoGenerate="false"
PrimaryKey="Album"
AllowFiltering="true">
<IgbColumn Field="Album" Sortable="true"></IgbColumn>
<IgbColumn Field="LaunchDate" Header="Launch Date" DataType="GridColumnDataType.Date" Sortable="true"></IgbColumn>
<IgbColumn Field="BillboardReview" Header="Billboard Review" Sortable="true"></IgbColumn>
<IgbColumn Field="USBillboard200" Header="US Billboard 200" Sortable="true"></IgbColumn>
<IgbRowIsland ChildDataKey="Songs" ColumnSelection="GridSelectionMode.Multiple"
RowSelection="GridSelectionMode.Multiple"
AutoGenerate="false"
PrimaryKey="Number"
AllowFiltering="true">
<IgbColumn Field="Number" Header="No." Sortable="true"></IgbColumn>
<IgbColumn Field="Title" Sortable="true"></IgbColumn>
<IgbColumn Field="Released" DataType="GridColumnDataType.Date" Sortable="true"></IgbColumn>
<IgbColumn Field="Genre"></IgbColumn>
</IgbRowIsland>
</IgbRowIsland>
<IgbRowIsland ChildDataKey="Tours" ColumnSelection="GridSelectionMode.Multiple"
RowSelection="GridSelectionMode.Multiple"
AutoGenerate="false"
PrimaryKey="Tour"
AllowFiltering="true">
<IgbColumn Field="Tour" Sortable="true"></IgbColumn>
<IgbColumn Field="StartedOn" Header="Started on" Sortable="true"></IgbColumn>
<IgbColumn Field="Location" Sortable="true"></IgbColumn>
<IgbColumn Field="Headliner" Sortable="true"></IgbColumn>
</IgbRowIsland>
</IgbHierarchicalGrid>
</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 IgbHierarchicalGrid 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,
Columns = true,
Expansion = true,
RowPinning = true,
ColumnSelection = true,
RowIslands = true
};
private string stateKey = "hierarchical-grid-state";
private IgbIcon IconRef;
private IDisposable registration;
private SingersData _singersData = null;
public SingersData SingersData
{
get
{
if (_singersData == null)
{
_singersData = new SingersData();
}
return _singersData;
}
}
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();
}
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 = SingersData.Count;
grid.ClearFilter("");
grid.SortingExpressions = new IgbSortingExpression[0];
grid.DeselectAllColumns();
grid.DeselectAllRows();
grid.ClearCellSelection();
}
void OnChange(IgbCheckboxChangeEventArgs eventArgs, string action)
{
if (action == "AllFeatures")
{
var newOptions = new IgbGridStateOptions()
{
CellSelection = eventArgs.Detail.Checked,
RowSelection = eventArgs.Detail.Checked,
Filtering = eventArgs.Detail.Checked,
AdvancedFiltering = eventArgs.Detail.Checked,
Paging = eventArgs.Detail.Checked,
Sorting = eventArgs.Detail.Checked,
GroupBy = eventArgs.Detail.Checked,
Columns = eventArgs.Detail.Checked,
Expansion = eventArgs.Detail.Checked,
RowPinning = eventArgs.Detail.Checked,
ColumnSelection = eventArgs.Detail.Checked,
RowIslands = eventArgs.Detail.Checked
};
options = newOptions;
gridState.Options = newOptions;
}
else
{
var newOptions = new IgbGridStateOptions();
options.GetType().GetProperty(action).SetValue(newOptions, eventArgs.Detail.Checked);
gridState.Options = newOptions;
}
}
public void OnGridRendered()
{
RestoreGridState();
}
async void LeavePage()
{
SaveGridState();
await JS.InvokeVoidAsync("window.location.replace", "./grids/hierarchical-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
¿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
- Al restaurar todas las características de la cuadrícula a la vez (mediante
applyState
una API sin parámetros), es posible que las propiedades de columna de la cuadrícula raíz se restablezcan a los valores predeterminados. Si esto sucede, restaure las columnas o la función de selección de columnas por separado después de eso:
GetStateAsString
utiliza el método JSON.stringify() para convertir los objetos originales en una cadena JSON. JSON.stringify() no es compatible con Functions, por lo que elIgbGridState
componente ignorará las columnasFormatter
,,,,,,,HeaderTemplate
,Filters
Summaries
SortStrategy
CellClasses
CellStyles
BodyTemplate