Descripción general de los grupos de columnas plegables de la cuadrícula de árbol Blazor
La función Grupos de columnas colapsables Ignite UI for Blazor en Blazor Tree Grid le permite organizar y administrar múltiples niveles de columnas anidadas y grupos de columnas en IgbTreeGrid agrupándolos y brindando la opción de colapsar o expandir estos grupos para mejorar la visualización y navegación de datos.
Ejemplo de grupos de columnas colapsables en cuadrícula de árbol Blazor
EXAMPLE
DATA
MODULES
RAZOR
CSS
using System;
using System.Collections.Generic;
publicclassEmployeesFlatDetailsItem
{
publicstring Address { get; set; }
publicdouble Age { get; set; }
publicstring City { get; set; }
publicstring Country { get; set; }
publicstring Fax { get; set; }
publicstring HireDate { get; set; }
publicdouble ID { get; set; }
publicstring Name { get; set; }
publicdouble ParentID { get; set; }
publicstring Phone { get; set; }
publicdouble PostalCode { get; set; }
publicstring Title { get; set; }
publicstring LastName { get; set; }
publicstring FullAddress { get; set; }
}
publicclassEmployeesFlatDetails
: List<EmployeesFlatDetailsItem>
{
publicEmployeesFlatDetails()
{
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"
});
}
}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(IgbInputModule),
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-size: var(--ig-size-small);
}
</style><divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbTreeGridAutoGenerate="false"Name="treeGrid"
@ref="treeGrid"Id="treeGrid"Data="EmployeesFlatDetails"PrimaryKey="ID"ForeignKey="ParentID"Moving="true"RowSelection="GridSelectionMode.None"><IgbColumnGroupHeader="General Information"Collapsible="true"Expanded="false"Pinned="false"><IgbColumnField="Name"Header="Full Name"DataType="GridColumnDataType.String"Sortable="true"Resizable="true"Width="200"VisibleWhenCollapsed="false"></IgbColumn><IgbColumnField="LastName"Header="Last Name"DataType="GridColumnDataType.String"Sortable="true"Resizable="true"Width="200"VisibleWhenCollapsed="true"></IgbColumn><IgbColumnField="Title"Width="250"DataType="GridColumnDataType.String"Sortable="true"Resizable="true"></IgbColumn><IgbColumnField="ID"DataType="GridColumnDataType.Number"Resizable="true"Filterable="false"VisibleWhenCollapsed="false"></IgbColumn><IgbColumnField="HireDate"DataType="GridColumnDataType.Date"Sortable="true"Resizable="true"VisibleWhenCollapsed="false"></IgbColumn><IgbColumnField="Age"DataType="GridColumnDataType.Number"Sortable="true"Resizable="true"VisibleWhenCollapsed="false"></IgbColumn></IgbColumnGroup><IgbColumnGroupHeader="Address Information"><IgbColumnGroupHeader="Location"Collapsible="true"><IgbColumnField="FullAddress"Width="300"DataType="GridColumnDataType.String"Sortable="true"Resizable="true"VisibleWhenCollapsed="true"></IgbColumn><IgbColumnField="Country"DataType="GridColumnDataType.String"Sortable="true"Resizable="true"VisibleWhenCollapsed="false"></IgbColumn><IgbColumnField="City"DataType="GridColumnDataType.String"Sortable="true"Resizable="true"VisibleWhenCollapsed="false"></IgbColumn><IgbColumnField="Address"DataType="GridColumnDataType.String"Sortable="true"Resizable="true"VisibleWhenCollapsed="false"></IgbColumn></IgbColumnGroup><IgbColumnGroupHeader="Contact Information"><IgbColumnField="Phone"DataType="GridColumnDataType.String"Sortable="true"Resizable="true"></IgbColumn><IgbColumnField="Fax"DataType="GridColumnDataType.String"Sortable="true"Resizable="true"></IgbColumn><IgbColumnField="PostalCode"DataType="GridColumnDataType.String"Sortable="true"Resizable="true"></IgbColumn></IgbColumnGroup></IgbColumnGroup></IgbTreeGrid></div></div>@code {protectedoverrideasync 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-size: var(--ig-size-small);
}
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.
Configuración
Para comenzar a utilizar IgbTreeGrid y la función de encabezados multicolumna colapsables, primero debe instalar Ignite UI for Blazor escribiendo el siguiente comando:
Para obtener una introducción completa al Ignite UI for Blazor, lea el tema de introducción.
Además, le recomendamos encarecidamente que eche un vistazo breve al tema de encabezados de varias columnas para ver información más detallada sobre cómo configurar los grupos de columnas en su cuadrícula.
Uso
Los grupos de columnas plegables son parte de la función de encabezados de varias columnas que proporciona una manera de contraer/expandir un grupo de columnas a un conjunto más pequeño de datos. Cuando se contrae un grupo de columnas, se mostrará un subconjunto de columnas al usuario final y las otras columnas secundarias del grupo se ocultarán. Cada columna contraída/expandida se puede vincular a la fuente de datos de la cuadrícula, o puede no vincularse y, por lo tanto, calcularse.
Para definir un grupo de columnas como contraíble, debe establecer la propiedad Collapsible en IgbColumnGroup en verdadero.
Debe definir la propiedad VisibleWhenCollapsed en al menos dos columnas secundarias. Al menos una columna debe estar visible cuando el grupo está contraído (VisibleWhenCollapsed establecido en verdadero) y al menos una columna debe estar oculta cuando el grupo está expandido (VisibleWhenCollapsed establecido en false); de lo contrario, la funcionalidad contraíble se deshabilitará. Si no se especifica VisibleWhenCollapsed para algunas de las columnas secundarias, esta columna siempre estará visible independientemente de si el estado principal está expandido o contraído.
Veamos el marcado a continuación:
<IgbColumnGroupHeader="Customer Information"Collapsible="true"><!--The column below will be visible when its parent is collapsed--><IgbColumnField="CustomerName"Header="Full name"VisibleWhenCollapsed="true"></IgbColumn><!--The three columns below will be visible when its parent is expanded--><IgbColumnField="CustomerID"Header="Customer ID"VisibleWhenCollapsed="false"></IgbColumn><IgbColumnField="FirstName"Header="First Name"VisibleWhenCollapsed="false"></IgbColumn><IgbColumnField="LastName"Header="Last Name"VisibleWhenCollapsed="false"></IgbColumn><IgbColumnGroupHeader="Customer Address"><IgbColumnField="Country"Header="Country"Sortable="true"></IgbColumn><IgbColumnField="City"Header="City"Sortable="true"></IgbColumn></IgbColumnGroup></IgbColumnGroup>razor
En resumen, cada columna secundaria tiene tres estados:
Puede estar siempre visible, sin importar el estado expandido de su padre.
Puede ser visible cuando su padre está contraído.
Se puede ocultar cuando su padre está colapsado.
El estado inicial del grupo de columnas que se especifica como contraíble es Expanded establecido en verdadero, pero puede cambiar fácilmente este comportamiento configurándolo en falso.
Nota Tenga en cuenta que inicialmente la opción de contraer grupo tiene prioridad sobre la columna oculta. Si declaró que su columna estaba oculta usando la propiedad oculta y tiene un grupo definido donde se debe mostrar la misma columna, se mostrará la columna.