Blazor Descripción general de la selección de columnas de cuadrícula
La función de selección de columnas de cuadrícula Blazor en Ignite UI for Blazor ofrece una forma simplificada y similar a Excel de seleccionar y resaltar una columna completa con un solo clic. Se puede habilitar a través de la entrada columnSelection
. Gracias a la API enriquecida, la función permite una fácil manipulación del estado de selección, la extracción de datos de las fracciones seleccionadas, las operaciones de análisis de datos y las visualizaciones.
Blazor Ejemplo de selección de columnas de cuadrícula
El siguiente ejemplo demuestra los tres tipos de IgbGrid
's selección de columna comportamiento. Utilice el menú desplegable de selección de columnas a continuación para habilitar cada uno de los modos de selección disponibles.
* Las columnas Título de contacto, Ciudad y Dirección tienen la selección de columna deshabilitada.
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"
});
}
}
csusing 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(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical ig-typography">
<div class="options vertical">
<IgbPropertyEditorPanel
Name="PropertyEditor"
@ref="propertyEditor"
DescriptionType="WebGrid"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
PropertyPath="ColumnSelection"
Name="columnSelectionEditor"
@ref="columnSelectionEditor"
Label="Column Selection">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbGrid
Name="grid"
@ref="grid"
Id="grid"
Data="CustomersData"
ColumnSelection="GridSelectionMode.Single">
<IgbColumn
Field="ID">
</IgbColumn>
<IgbColumn
Field="Company"
Header="Company">
</IgbColumn>
<IgbColumn
Field="ContactTitle"
Header="Title"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="City"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="Country">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Header="Postal Code">
</IgbColumn>
<IgbColumn
Field="Address"
Selectable="false">
</IgbColumn>
</IgbGrid>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var columnSelectionEditor = this.columnSelectionEditor;
var grid = this.grid;
this.BindElements = () => {
propertyEditor.Target = this.grid;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription columnSelectionEditor;
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/
*/
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.
Uso básico
La función de selección de columnas se puede habilitar a través de la entrada ColumnSelection
, que toma valores GridSelectionMode
.
Interacciones
El modo de selección predeterminado es None
. Si se establece en Single
o Multiple
, todas las columnas presentadas serán Selectable
. Dicho esto, para seleccionar una columna, solo necesitamos hacer clic en una, lo que la marcará como Selected
. Si la columna no se puede seleccionar, no se aplicará ningún estilo de selección en el encabezado mientras se desplaza el cursor.
La función Encabezados de columnas múltiples no se refleja en la entrada seleccionable. El ColumnGroupComponent es seleccionable si al menos uno de sus hijos tiene habilitado el comportamiento de selección. Además, el componente se marca como Seleccionado si todos sus descendientes seleccionables están seleccionados.
*En Grupo de columnas de información del país, solo se pueden seleccionar la columna Ciudad y Código postal.
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"
});
}
}
csusing 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(IgbColumnGroupModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid
Name="grid"
@ref="grid"
Id="grid"
Data="CustomersData"
ColumnSelection="GridSelectionMode.Multiple">
<IgbColumnGroup
Header="General Information">
<IgbColumn
Field="Company"
Header="Company">
</IgbColumn>
<IgbColumnGroup
Header="Personal Details">
<IgbColumn
Field="ContactName"
Header="Name"
Hidden="true">
</IgbColumn>
<IgbColumn
Field="ContactTitle"
Header="Title"
Selectable="false">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
<IgbColumn
Field="ID">
</IgbColumn>
<IgbColumnGroup
Header="Country Information">
<IgbColumnGroup
Header="Region Information">
<IgbColumn
Field="Country"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="City">
</IgbColumn>
<IgbColumn
Field="PostalCode">
</IgbColumn>
</IgbColumnGroup>
<IgbColumnGroup
Header="City Information">
<IgbColumn
Field="Fax"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="Address"
Selectable="false">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
</IgbGrid>
</div>
</div>
@code {
protected override async 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/
*/
css
Combinaciones de teclado
Las combinaciones de teclado están disponibles solo cuando la entrada ColumnSelection de la cuadrícula está configurada en múltiple.
Hay dos escenarios para la navegación con el teclado de la función Selección de columnas:
- Selección de varias columnas: mantenga presionado Ctrl + clic en cada celda del encabezado seleccionable.
- Selección de columnas de rango: al mantener presionada la tecla Mayús + clic se seleccionan todas las columnas seleccionables intermedias.
Manipulaciones API
La API proporciona algunas capacidades adicionales cuando se trata de columnas no visibles, de modo que cada columna oculta se puede marcar como Selected
configurando el definidor correspondiente.
La declaración anterior también se aplica al ColumnGroupComponent, excepto que cuando se cambia la propiedad Seleccionada, cambia el estado de sus descendientes.
Puede encontrar más información sobre las manipulaciones de API en la sección Referencias de API.
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 class
para la cuadrícula:
<IgbGrid class="grid"></IgbGrid>
razor
Luego establezca las propiedades CSS relacionadas con esta clase:
.grid {
--ig-grid-row-selected-background: #0062A3;
--ig-grid-row-selected-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
--ig-grid-header-selected-text-color: #ecaa53;
--ig-grid-header-selected-background: #0062A3;
--ig-grid-row-selected-hover-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
}
css
Manifestación
Referencias de API
La interfaz de usuario de selección de columnas tiene algunas API más para explorar, que se enumeran a continuación.
IgbGrid
properties:
IgbColumn
properties:
IgbColumnGroup
properties:
IgbGrid
events:
OnColumnsSelectionChange
Recursos adicionales
- Selección
- Selección de celda
- Paginación
- Filtración
- Clasificación
- resúmenes
- Columna en movimiento
- Fijación de columnas
- Cambio de tamaño de columna
- Virtualización y rendimiento
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.