La Ignite UI for Blazor en Blazor Grid permite funciones de selección de datos enriquecidas y ofrece una API potente en el componente IgbGrid. Blazor Grid admite tres modos de selección:
Ejemplo de selección de celdas en cuadrícula Blazor
El siguiente ejemplo demuestra los tres tipos de IgbGrid 's selección de celda comportamiento. Utilice los botones a continuación para habilitar cada uno de los modos de selección disponibles. Se proporcionará una breve descripción de la interacción de cada botón a través de un cuadro de mensaje de snackbar.
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/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.
Tipos de selección
Selección de celdas múltiples de cuadrícula
Cómo seleccionar celdas:
Arrastrando con el mouse: se realizará la selección de datos rectangulares de las celdas.
Al presionar la tecla Ctrl + arrastrar el mouse: se realizarán selecciones de rango múltiple. Cualquier otra selección de celda existente se mantendrá.
Selección instantánea de varias celdas mediante la tecla Shift. Seleccione una sola celda y seleccione otra celda manteniendo presionada la tecla Mayús. Se seleccionará el rango de celdas entre las dos celdas. Tenga en cuenta que si se selecciona otra segunda celda mientras se mantiene presionada la tecla Mayús, el rango de selección de celdas se actualizará en función de la posición de la primera celda seleccionada (punto de partida).
Selección de varias celdas del teclado utilizando las teclas de flecha mientras mantiene presionada la tecla Mayús. Se creará un rango de selección de varias celdas en función de la celda enfocada.
Selección de varias celdas del teclado usando las teclas Ctrl + ↑ ↓ ← → y Ctrl + Inicio / Fin mientras mantiene presionada la tecla Shift. Se creará un rango de selección de varias celdas en función de la celda enfocada.
Al hacer clic con la tecla izquierda del mouse mientras mantiene presionada la tecla Ctrl, se agregarán rangos de celdas individuales a la colección de celdas seleccionadas.
La selección continua de múltiples celdas está disponible haciendo clic con el mouse y arrastrando.
Manifestación
EXAMPLE
MODULES
RAZOR
JS
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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) });
// TODO update names of the following modules for the IgbGrid
builder.Services.AddIgniteUIBlazor(
typeof(IgbGridModule),
typeof(IgbRadioModule),
typeof(IgbRadioGroupModule),
typeof(IgbSnackbarModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
functionRangeSelectionChanging(o, e) {
var g1 = document.querySelector("#grid1");
var g2 = document.querySelector("#grid2");
g2.data = g1.getSelectedData();
}
igRegisterScript("RangeSelectionChanging", RangeSelectionChanging, false);js
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Selección única de cuadrícula
Cuando configura CellSelection en single, esto le permite tener solo una celda seleccionada en la cuadrícula a la vez. Además, el modo de arrastre del mouse no funcionará y, en lugar de seleccionar una celda, se realizará la selección de texto predeterminada.
Cuando se selecciona una sola celda, se emite el evento Selected, sin importar si el modo de selección es único o múltiple. En el modo de selección de varias celdas, cuando selecciona un rango de celdas, se emite el evento RangeSelected.
Cuadrícula Ninguna selección
Si desea deshabilitar la selección de celdas, puede configurar CellSelection en none. En este modo, cuando hace clic sobre la celda o intenta navegar con el teclado, la celda no se selecciona, solo se aplica el estilo de activación y se perderá cuando se desplace o haga clic sobre otro elemento de la página. La única forma de definir la selección es mediante los métodos API que se describen a continuación.
Interacciones de navegación por teclado
Mientras se presiona la tecla Shift
Shift + ↑ para agregar la celda anterior a la selección actual.
Shift + ↓ para agregar la siguiente celda a la selección actual.
Shift + ← para agregar la celda izquierda a la selección actual.
Shift + → para agregar la celda derecha a la selección actual.
Mientras se presionan las teclas Ctrl + Shift
Ctrl + Shift + ↑ para seleccionar todas las celdas encima de la celda enfocada en la columna.
Ctrl + Shift + ↓ para seleccionar todas las celdas debajo de la celda enfocada en la columna.
Ctrl + Shift + ← para seleccionar todas las celdas hasta el inicio de la fila.
Ctrl + Shift + → para seleccionar todas las celdas hasta el final de la fila.
Ctrl + Shift + Inicio para seleccionar todas las celdas desde la celda enfocada hasta la primera celda de la cuadrícula
Ctrl + Shift + Fin para seleccionar todas las celdas desde la celda enfocada hasta la última celda de la cuadrícula
El desplazamiento continuo sólo es posible dentro del cuerpo de Grid.
Uso de API
A continuación se detallan los métodos que puede utilizar para seleccionar rangos, borrar la selección u obtener datos de celdas seleccionadas.
Seleccionar rango
SelectRange- Seleccione un rango de celdas con la API. rowStart y rowEnd deben usar índices de fila y columnStart y columnEnd pueden usar índice de columna o valor de campo de datos de columna.
La selección de varias celdas se basa en índices (selección de elementos DOM).
Sorting: cuando se realiza la clasificación, la selección no se borrará. Dejará las celdas actualmente seleccionadas iguales mientras se ordenan de forma ascendente o descendente.
Paging: al paginar, las celdas seleccionadas se borrarán. La selección no persistirá en todas las páginas.
Filtering: cuando se realiza el filtrado, la selección no se borrará. Si se borra el filtrado, volverá a las celdas seleccionadas inicialmente.
Resizing: al cambiar el tamaño de la columna, las celdas seleccionadas no se borrarán.
Hiding: no borrará las celdas seleccionadas. Si la columna está oculta, se seleccionarán las celdas de la siguiente columna visible.
Pinning: la celda seleccionada no se borrará. Lo mismo que esconderse
GroupBy: en la agrupación de columnas, las celdas seleccionadas no se borrarán.
Estilo
Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:
<IgbGridClass="grid"></IgbGrid>razor
Luego configure las propiedades CSS relacionadas para esa clase:
using System;
using System.Collections.Generic;
publicclassCustomersDataItem
{
publicstring ID { get; set; }
publicstring Company { get; set; }
publicstring ContactName { get; set; }
publicstring ContactTitle { get; set; }
publicstring Address { get; set; }
publicstring City { get; set; }
publicstring Region { get; set; }
publicdouble PostalCode { get; set; }
publicstring Country { get; set; }
publicstring Phone { get; set; }
publicstring Fax { get; set; }
}
publicclassCustomersData
: List<CustomersDataItem>
{
publicCustomersData()
{
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 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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<style>/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/#grid {
--cell-selected-text-color: #FFFFFF;
--cell-active-border-color: #f2c43c;
--cell-selected-background: #0062a3;
}
</style><divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbGridName="grid"
@ref="grid"Id="grid"Data="CustomersData"ColumnSelection="GridSelectionMode.Single"><IgbColumnField="ID"></IgbColumn><IgbColumnField="Company"Header="Company"></IgbColumn><IgbColumnField="Address"Header="Address"></IgbColumn><IgbColumnField="PostalCode"Header="Postal Code"></IgbColumn></IgbGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
}
private IgbGrid grid;
private CustomersData _customersData = null;
public CustomersData CustomersData
{
get
{
if (_customersData == null)
{
_customersData = new CustomersData();
}
return _customersData;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/#grid {
--cell-selected-text-color: #FFFFFF;
--cell-active-border-color: #f2c43c;
--cell-selected-background: #0062a3;
}
css