Blazor Descripción general de la selección de columnas de cuadrícula de árbol
La función de selección de columnas de cuadrícula de árbol de 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 columnSelection
entrada. Gracias a la rica API, la función permite una fácil manipulación del estado de selección, la extracción de datos de las fracciones seleccionadas, operaciones de análisis de datos y visualizaciones.
Blazor Ejemplo de selección de columnas de cuadrícula de árbol
El siguiente ejemplo demuestra los tres tipos de IgbTreeGrid
'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.
* Precio unitario y Descontinuado tienen la selección de columna deshabilitada.
using System;
using System.Collections.Generic;
public class FoodsDataItem
{
public double ID { get; set; }
public double ParentID { get; set; }
public string Name { get; set; }
public double UnitPrice { get; set; }
public string AddedDate { get; set; }
public bool Discontinued { get; set; }
}
public class FoodsData
: List<FoodsDataItem>
{
public FoodsData()
{
this.Add(new FoodsDataItem()
{
ID = 1,
ParentID = -1,
Name = @"Foods",
UnitPrice = 0,
AddedDate = @"2009-06-19",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 101,
ParentID = 1,
Name = @"Chef Antons Gumbo Mix",
UnitPrice = 21.35,
AddedDate = @"2011-11-11",
Discontinued = true
});
this.Add(new FoodsDataItem()
{
ID = 102,
ParentID = 1,
Name = @"Grandmas Boysenberry Spread",
UnitPrice = 25,
AddedDate = @"2017-12-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 103,
ParentID = 1,
Name = @"Uncle Bobs Organic Dried Pears",
UnitPrice = 30,
AddedDate = @"2016-07-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 104,
ParentID = 1,
Name = @"Mishi Kobe Niku",
UnitPrice = 97,
AddedDate = @"2010-02-17",
Discontinued = true
});
this.Add(new FoodsDataItem()
{
ID = 105,
ParentID = 1,
Name = @"Queso Cabrales",
UnitPrice = 21,
AddedDate = @"2009-11-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 106,
ParentID = 1,
Name = @"Queso Manchego La Pastora",
UnitPrice = 38,
AddedDate = @"2015-11-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 107,
ParentID = 1,
Name = @"Konbu",
UnitPrice = 6,
AddedDate = @"2025-03-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 108,
ParentID = 1,
Name = @"Tofu",
UnitPrice = 23.25,
AddedDate = @"2019-06-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 109,
ParentID = 1,
Name = @"Ikura",
UnitPrice = 31,
AddedDate = @"2010-05-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 110,
ParentID = 1,
Name = @"Pavlova",
UnitPrice = 17.45,
AddedDate = @"2018-03-28",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 111,
ParentID = 1,
Name = @"Alice Mutton",
UnitPrice = 39,
AddedDate = @"2015-08-17",
Discontinued = true
});
this.Add(new FoodsDataItem()
{
ID = 112,
ParentID = 1,
Name = @"Carnarvon Tigers",
UnitPrice = 62.5,
AddedDate = @"2015-09-27",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 113,
ParentID = 1,
Name = @"Teatime Chocolate Biscuits",
UnitPrice = 9.2,
AddedDate = @"2011-03-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 2,
ParentID = -1,
Name = @"Beverages",
UnitPrice = 0,
AddedDate = @"2009-06-19",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 201,
ParentID = 2,
Name = @"Chai",
UnitPrice = 18,
AddedDate = @"2012-02-12",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 202,
ParentID = 2,
Name = @"Chang",
UnitPrice = 19,
AddedDate = @"2013-03-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 3,
ParentID = -1,
Name = @"Sauces",
UnitPrice = 0,
AddedDate = @"2009-06-19",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 301,
ParentID = 3,
Name = @"Aniseed Syrup",
UnitPrice = 10,
AddedDate = @"2016-03-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 302,
ParentID = 3,
Name = @"Chef Antons Cajun Seasoning",
UnitPrice = 22,
AddedDate = @"2012-03-17",
Discontinued = true
});
this.Add(new FoodsDataItem()
{
ID = 303,
ParentID = 3,
Name = @"Northwoods Cranberry Sauce",
UnitPrice = 40,
AddedDate = @"2012-01-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 304,
ParentID = 3,
Name = @"Genen Shouyu",
UnitPrice = 15.5,
AddedDate = @"2010-03-17",
Discontinued = false
});
this.Add(new FoodsDataItem()
{
ID = 305,
ParentID = 3,
Name = @"Sir Rodneys Marmalade",
UnitPrice = 18,
AddedDate = @"2015-03-17",
Discontinued = false
});
}
}
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(IgbTreeGridModule)
);
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="WebTreeGrid"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
PropertyPath="ColumnSelection"
Name="columnSelectionEditor"
@ref="columnSelectionEditor"
Label="Column Selection">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
Data="FoodsData"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="ID">
</IgbColumn>
<IgbColumn
Field="Name">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="AddedDate"
Header="Added Date">
</IgbColumn>
<IgbColumn
Field="Discontinued"
Selectable="false">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var columnSelectionEditor = this.columnSelectionEditor;
var treeGrid = this.treeGrid;
this.BindElements = () => {
propertyEditor.Target = this.treeGrid;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription columnSelectionEditor;
private IgbTreeGrid treeGrid;
private FoodsData _foodsData = null;
public FoodsData FoodsData
{
get
{
if (_foodsData == null)
{
_foodsData = new FoodsData();
}
return _foodsData;
}
}
}
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 detalles personales, solo se pueden seleccionar el ID de columna y el Título.
using System;
using System.Collections.Generic;
public class EmployeesFlatDetailsItem
{
public string Address { get; set; }
public double Age { get; set; }
public string City { get; set; }
public string Country { get; set; }
public string Fax { get; set; }
public string HireDate { get; set; }
public double ID { get; set; }
public string Name { get; set; }
public double ParentID { get; set; }
public string Phone { get; set; }
public double PostalCode { get; set; }
public string Title { get; set; }
public string LastName { get; set; }
public string FullAddress { get; set; }
}
public class EmployeesFlatDetails
: List<EmployeesFlatDetailsItem>
{
public EmployeesFlatDetails()
{
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Obere Str. 57",
Age = 55,
City = @"Berlin",
Country = @"Germany",
Fax = @"030-0076545",
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
ParentID = -1,
Phone = @"030-0074321",
PostalCode = 12209,
Title = @"Development Manager",
LastName = @"Winchester",
FullAddress = @"Obere Str. 57, Berlin, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Avda. de la Constitución 2222",
Age = 42,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(51) 555-3745",
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
ParentID = -1,
Phone = @"(5) 555-4729",
PostalCode = 5021,
Title = @"CEO",
LastName = @"Sanders",
FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Mataderos 2312",
Age = 49,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(5) 555-3995",
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
ParentID = -1,
Phone = @"(5) 555-3932",
PostalCode = 5023,
Title = @"Accounting Manager",
LastName = @"Lincoln",
FullAddress = @"Mataderos 2312, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"120 Hanover Sq.",
Age = 61,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-6750",
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
ParentID = -1,
Phone = @"(171) 555-7788",
PostalCode = 39000,
Title = @"Localization Manager",
LastName = @"Wang",
FullAddress = @"120 Hanover Sq., London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Berguvsvägen 8",
Age = 43,
City = @"Luleå",
Country = @"Sweden",
Fax = @"0921-12 34 67",
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
ParentID = 1,
Phone = @"0921-12 34 65",
PostalCode = 29000,
Title = @"Senior Software Developer",
LastName = @"Burke",
FullAddress = @"Berguvsvägen 8, Luleå, Sweden"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Forsterstr. 57",
Age = 29,
City = @"Mannheim",
Country = @"Germany",
Fax = @"0621-08924",
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
ParentID = 1,
Phone = @"0621-08460",
PostalCode = 68306,
Title = @"Senior Software Developer",
LastName = @"Anderson",
FullAddress = @"Forsterstr. 57, Mannheim, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"24, place Kléber",
Age = 31,
City = @"Strasbourg",
Country = @"France",
Fax = @"88.60.15.32",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
ParentID = 1,
Phone = @"88.60.15.31",
PostalCode = 67000,
Title = @"Software Development Team Lead",
LastName = @"Reyes",
FullAddress = @"24, place Kléber, Strasbourg, France"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"C/ Araquil, 67",
Age = 35,
City = @"Madrid",
Country = @"Spain",
Fax = @"(911) 555 91 99",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
ParentID = 11,
Phone = @"(91) 555 22 82",
PostalCode = 28023,
Title = @"Senior Software Developer",
LastName = @"Mendel",
FullAddress = @"C/ Araquil, 67, Madrid, Spain"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"12, rue des Bouchers",
Age = 44,
City = @"Marseille",
Country = @"France",
Fax = @"91.24.45.41",
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
ParentID = 11,
Phone = @"91.24.45.40",
PostalCode = 13008,
Title = @"Senior Software Developer",
LastName = @"Cooper",
FullAddress = @"12, rue des Bouchers, Marseille, France"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"23 Tsawassen Blvd.",
Age = 44,
City = @"Tsawassen",
Country = @"Canada",
Fax = @"(604) 555-3745",
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
ParentID = 4,
Phone = @"(604) 555-4729",
PostalCode = 19000,
Title = @"Director",
LastName = @"Johnson",
FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Fauntleroy Circus",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(125) 555-3798",
HireDate = @"2017-11-9",
ID = 5,
Name = @"Elizabeth Richards",
ParentID = 4,
Phone = @"(171) 555-1212",
PostalCode = 30000,
Title = @"Vice President",
LastName = @"Richards",
FullAddress = @"Fauntleroy Circus, London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Cerrito 333",
Age = 39,
City = @"Buenos Aires",
Country = @"Argentina",
Fax = @"(121) 135-4892",
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
ParentID = 5,
Phone = @"(1) 135-5555",
PostalCode = 1010,
Title = @"Director",
LastName = @"Ashworth",
FullAddress = @"Cerrito 333, Buenos Aires, Argentina"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Sierras de Granada 9993",
Age = 44,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(153) 555-7293",
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
ParentID = 18,
Phone = @"(5) 555-3392",
PostalCode = 5022,
Title = @"Senior Accountant",
LastName = @"Moreno",
FullAddress = @"Sierras de Granada 9993, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Hauptstr. 29",
Age = 50,
City = @"Sao Paulo",
Country = @"Brazil",
Fax = @"(531) 555-6691",
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
ParentID = 10,
Phone = @"0452-076545",
PostalCode = 3012,
Title = @"Senior Localization Developer",
LastName = @"Rodriguez",
FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Av. dos Lusíadas, 23",
Age = 27,
City = @"Bern",
Country = @"Switzerland",
Fax = @"(271) 335-357",
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
ParentID = 10,
Phone = @"(11) 555-7647",
PostalCode = 40000,
Title = @"Senior Localization",
LastName = @"Harper",
FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Berkeley Gardens 12",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-9199",
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
ParentID = 7,
Phone = @"(171) 555-2282",
PostalCode = 26000,
Title = @"Localization Intern",
LastName = @"Simpson",
FullAddress = @"Berkeley Gardens 12, London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Walserweg 21",
Age = 39,
City = @"Aachen",
Country = @"Germany",
Fax = @"0241-059428",
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
ParentID = 7,
Phone = @"0241-039123",
PostalCode = 52066,
Title = @"Localization Intern",
LastName = @"Chang",
FullAddress = @"Walserweg 21, Aachen, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"35 King George",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-3373",
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
ParentID = 7,
Phone = @"(171) 555-0297",
PostalCode = 48000,
Title = @"Localization Intern",
LastName = @"Lewis",
FullAddress = @"35 King George, London, UK"
});
}
}
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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
Data="EmployeesFlatDetails"
PrimaryKey="ID"
ForeignKey="ParentID"
ColumnSelection="GridSelectionMode.Multiple">
<IgbColumn
Field="Name"
DataType="GridColumnDataType.String"
Width="auto">
</IgbColumn>
<IgbColumnGroup
Header="General Information">
<IgbColumn
Field="HireDate"
Header="Hire Date"
DataType="GridColumnDataType.Date">
</IgbColumn>
<IgbColumnGroup
Header="Personal Details">
<IgbColumn
Field="ID"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="Title"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="Age"
DataType="GridColumnDataType.Number"
Selectable="false">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
<IgbColumnGroup
Header="Address Information">
<IgbColumnGroup
Header="Location">
<IgbColumn
Field="Country"
DataType="GridColumnDataType.String"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="City"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="Address"
DataType="GridColumnDataType.String">
</IgbColumn>
</IgbColumnGroup>
<IgbColumnGroup
Header="Contact Information">
<IgbColumn
Field="Phone"
DataType="GridColumnDataType.String"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="Fax"
DataType="GridColumnDataType.String"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Header="Postal Code"
DataType="GridColumnDataType.String">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
}
private IgbTreeGrid treeGrid;
private EmployeesFlatDetails _employeesFlatDetails = null;
public EmployeesFlatDetails EmployeesFlatDetails
{
get
{
if (_employeesFlatDetails == null)
{
_employeesFlatDetails = new EmployeesFlatDetails();
}
return _employeesFlatDetails;
}
}
}
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:
<IgbTreeGrid class="grid"></IgbTreeGrid>
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
using System;
using System.Collections.Generic;
public class EmployeesFlatDetailsItem
{
public string Address { get; set; }
public double Age { get; set; }
public string City { get; set; }
public string Country { get; set; }
public string Fax { get; set; }
public string HireDate { get; set; }
public double ID { get; set; }
public string Name { get; set; }
public double ParentID { get; set; }
public string Phone { get; set; }
public double PostalCode { get; set; }
public string Title { get; set; }
public string LastName { get; set; }
public string FullAddress { get; set; }
}
public class EmployeesFlatDetails
: List<EmployeesFlatDetailsItem>
{
public EmployeesFlatDetails()
{
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Obere Str. 57",
Age = 55,
City = @"Berlin",
Country = @"Germany",
Fax = @"030-0076545",
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
ParentID = -1,
Phone = @"030-0074321",
PostalCode = 12209,
Title = @"Development Manager",
LastName = @"Winchester",
FullAddress = @"Obere Str. 57, Berlin, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Avda. de la Constitución 2222",
Age = 42,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(51) 555-3745",
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
ParentID = -1,
Phone = @"(5) 555-4729",
PostalCode = 5021,
Title = @"CEO",
LastName = @"Sanders",
FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Mataderos 2312",
Age = 49,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(5) 555-3995",
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
ParentID = -1,
Phone = @"(5) 555-3932",
PostalCode = 5023,
Title = @"Accounting Manager",
LastName = @"Lincoln",
FullAddress = @"Mataderos 2312, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"120 Hanover Sq.",
Age = 61,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-6750",
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
ParentID = -1,
Phone = @"(171) 555-7788",
PostalCode = 39000,
Title = @"Localization Manager",
LastName = @"Wang",
FullAddress = @"120 Hanover Sq., London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Berguvsvägen 8",
Age = 43,
City = @"Luleå",
Country = @"Sweden",
Fax = @"0921-12 34 67",
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
ParentID = 1,
Phone = @"0921-12 34 65",
PostalCode = 29000,
Title = @"Senior Software Developer",
LastName = @"Burke",
FullAddress = @"Berguvsvägen 8, Luleå, Sweden"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Forsterstr. 57",
Age = 29,
City = @"Mannheim",
Country = @"Germany",
Fax = @"0621-08924",
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
ParentID = 1,
Phone = @"0621-08460",
PostalCode = 68306,
Title = @"Senior Software Developer",
LastName = @"Anderson",
FullAddress = @"Forsterstr. 57, Mannheim, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"24, place Kléber",
Age = 31,
City = @"Strasbourg",
Country = @"France",
Fax = @"88.60.15.32",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
ParentID = 1,
Phone = @"88.60.15.31",
PostalCode = 67000,
Title = @"Software Development Team Lead",
LastName = @"Reyes",
FullAddress = @"24, place Kléber, Strasbourg, France"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"C/ Araquil, 67",
Age = 35,
City = @"Madrid",
Country = @"Spain",
Fax = @"(911) 555 91 99",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
ParentID = 11,
Phone = @"(91) 555 22 82",
PostalCode = 28023,
Title = @"Senior Software Developer",
LastName = @"Mendel",
FullAddress = @"C/ Araquil, 67, Madrid, Spain"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"12, rue des Bouchers",
Age = 44,
City = @"Marseille",
Country = @"France",
Fax = @"91.24.45.41",
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
ParentID = 11,
Phone = @"91.24.45.40",
PostalCode = 13008,
Title = @"Senior Software Developer",
LastName = @"Cooper",
FullAddress = @"12, rue des Bouchers, Marseille, France"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"23 Tsawassen Blvd.",
Age = 44,
City = @"Tsawassen",
Country = @"Canada",
Fax = @"(604) 555-3745",
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
ParentID = 4,
Phone = @"(604) 555-4729",
PostalCode = 19000,
Title = @"Director",
LastName = @"Johnson",
FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Fauntleroy Circus",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(125) 555-3798",
HireDate = @"2017-11-9",
ID = 5,
Name = @"Elizabeth Richards",
ParentID = 4,
Phone = @"(171) 555-1212",
PostalCode = 30000,
Title = @"Vice President",
LastName = @"Richards",
FullAddress = @"Fauntleroy Circus, London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Cerrito 333",
Age = 39,
City = @"Buenos Aires",
Country = @"Argentina",
Fax = @"(121) 135-4892",
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
ParentID = 5,
Phone = @"(1) 135-5555",
PostalCode = 1010,
Title = @"Director",
LastName = @"Ashworth",
FullAddress = @"Cerrito 333, Buenos Aires, Argentina"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Sierras de Granada 9993",
Age = 44,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(153) 555-7293",
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
ParentID = 18,
Phone = @"(5) 555-3392",
PostalCode = 5022,
Title = @"Senior Accountant",
LastName = @"Moreno",
FullAddress = @"Sierras de Granada 9993, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Hauptstr. 29",
Age = 50,
City = @"Sao Paulo",
Country = @"Brazil",
Fax = @"(531) 555-6691",
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
ParentID = 10,
Phone = @"0452-076545",
PostalCode = 3012,
Title = @"Senior Localization Developer",
LastName = @"Rodriguez",
FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Av. dos Lusíadas, 23",
Age = 27,
City = @"Bern",
Country = @"Switzerland",
Fax = @"(271) 335-357",
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
ParentID = 10,
Phone = @"(11) 555-7647",
PostalCode = 40000,
Title = @"Senior Localization",
LastName = @"Harper",
FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Berkeley Gardens 12",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-9199",
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
ParentID = 7,
Phone = @"(171) 555-2282",
PostalCode = 26000,
Title = @"Localization Intern",
LastName = @"Simpson",
FullAddress = @"Berkeley Gardens 12, London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Walserweg 21",
Age = 39,
City = @"Aachen",
Country = @"Germany",
Fax = @"0241-059428",
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
ParentID = 7,
Phone = @"0241-039123",
PostalCode = 52066,
Title = @"Localization Intern",
LastName = @"Chang",
FullAddress = @"Walserweg 21, Aachen, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"35 King George",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-3373",
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
ParentID = 7,
Phone = @"(171) 555-0297",
PostalCode = 48000,
Title = @"Localization Intern",
LastName = @"Lewis",
FullAddress = @"35 King George, London, UK"
});
}
}
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(IgbTreeGridModule)
);
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/
*/
#treeGrid {
--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;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
Data="EmployeesFlatDetails"
PrimaryKey="ID"
ForeignKey="ParentID"
ColumnSelection="GridSelectionMode.Multiple">
<IgbColumn
Field="Name"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumnGroup
Header="General Information">
<IgbColumn
Field="HireDate"
Header="Hire Date"
DataType="GridColumnDataType.Date">
</IgbColumn>
<IgbColumnGroup
Header="Personal Details">
<IgbColumn
Field="ID"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="Title"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="Age"
DataType="GridColumnDataType.Number"
Selectable="false">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
<IgbColumnGroup
Header="Address Information">
<IgbColumnGroup
Header="Location">
<IgbColumn
Field="Country"
DataType="GridColumnDataType.String"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="City"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="Address"
DataType="GridColumnDataType.String">
</IgbColumn>
</IgbColumnGroup>
<IgbColumnGroup
Header="Contact Information">
<IgbColumn
Field="Phone"
DataType="GridColumnDataType.String"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="Fax"
DataType="GridColumnDataType.String"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Header="Postal Code"
DataType="GridColumnDataType.String">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
}
private IgbTreeGrid treeGrid;
private EmployeesFlatDetails _employeesFlatDetails = null;
public EmployeesFlatDetails EmployeesFlatDetails
{
get
{
if (_employeesFlatDetails == null)
{
_employeesFlatDetails = new EmployeesFlatDetails();
}
return _employeesFlatDetails;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#treeGrid {
--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
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.
IgbTreeGrid
properties:
IgbColumn
properties:
IgbColumnGroup
properties:
IgbTreeGrid
events:
OnColumnsSelectionChange
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.