Reordenación y movimiento de columnas de cuadrícula de árbol
La función de movimiento de columnas de la cuadrícula de árbol Blazor en Ignite UI for Blazor permite reordenar las columnas de manera rápida y sencilla. Esto se puede hacer a través de la API de movimiento de columnas o arrastrando y soltando los encabezados en otra posición mediante gestos táctiles o del mouse. En la cuadrícula de árbol Blazor, puede habilitar el movimiento de columnas para columnas fijadas y desfijadas, y también para encabezados de varias columnas.
Solo se permite reordenar entre columnas y grupos de columnas cuando están en el mismo nivel en la jerarquía y ambos están en el mismo grupo. Se permite moverse entre columnas/grupos de columnas, si son columnas de nivel superior.
Si el encabezado de una columna tiene una plantilla y el movimiento de columnas está habilitado o la columna correspondiente es agrupable, entonces los elementos con plantilla deben tener el atributo arrastrable establecido en falso.
Si el área fijada excede su ancho máximo permitido (80% del ancho total de IgbTreeGrid), una pista visual notifica al usuario final que la operación de colocación está prohibida y que la fijación no es posible. Esto significa que no podrá colocar una columna en el área fijada.
public RenderFragment<IgbColumnTemplateContext> headerTemplate => (context) =>
{
return @<IgbIcon Collection="fas" IconName="fa-thumbtack" draggable="false" @onclick="() => onClick()"></IgbIcon>;
};
razor
Ejemplo de descripción general del movimiento de columnas de cuadrícula de árbol Blazor
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(IgbInputModule),
typeof(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<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"
Moving="true"
ColumnWidth="200">
<IgbPaginator
PerPage="10"
TotalRecords="20">
</IgbPaginator>
<IgbColumn
Field="Name"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Title"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="ID"
DataType="GridColumnDataType.Number"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column3"
@ref="column3">
</IgbColumn>
<IgbColumn
Field="HireDate"
DataType="GridColumnDataType.Date"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column4"
@ref="column4">
</IgbColumn>
<IgbColumn
Field="Age"
DataType="GridColumnDataType.Number"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column5"
@ref="column5">
</IgbColumn>
<IgbColumn
Field="Address"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column6"
@ref="column6">
</IgbColumn>
<IgbColumn
Field="City"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column7"
@ref="column7">
</IgbColumn>
<IgbColumn
Field="Country"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column8"
@ref="column8">
</IgbColumn>
<IgbColumn
Field="Fax"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column9"
@ref="column9">
</IgbColumn>
<IgbColumn
Field="PostalCode"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column10"
@ref="column10">
</IgbColumn>
<IgbColumn
Field="Phone"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column11"
@ref="column11">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
var column4 = this.column4;
var column5 = this.column5;
var column6 = this.column6;
var column7 = this.column7;
var column8 = this.column8;
var column9 = this.column9;
var column10 = this.column10;
var column11 = this.column11;
}
private IgbTreeGrid treeGrid;
private IgbColumn column1;
private IgbColumn column2;
private IgbColumn column3;
private IgbColumn column4;
private IgbColumn column5;
private IgbColumn column6;
private IgbColumn column7;
private IgbColumn column8;
private IgbColumn column9;
private IgbColumn column10;
private IgbColumn column11;
private EmployeesFlatDetails _employeesFlatDetails = null;
public EmployeesFlatDetails EmployeesFlatDetails
{
get
{
if (_employeesFlatDetails == null)
{
_employeesFlatDetails = new EmployeesFlatDetails();
}
return _employeesFlatDetails;
}
}
}
razor
igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleColumnPin = function toggleColumnPin(field) {
var grid = document.getElementsByTagName("igc-tree-grid")[0];
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
}
return html`<div>
<span style="float:left">${ctx.column.field}</span>
<span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
</div>`;
}, false);
js/*
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.
Descripción general
La función de movimiento de columnas está habilitada a nivel de cuadrícula, lo que significa que IgbTreeGrid
podría tener columnas móviles o inamovibles. Esto se hace a través de la entrada Moving
de IgbTreeGrid
.
API
Además de la funcionalidad de arrastrar y soltar, la función Mover columnas también proporciona métodos API para permitir mover una columna/reordenar columnas mediante programación:
MoveColumn
: mueve una columna antes o después de otra columna (un destino). El primer parámetro es la columna que se va a mover y el segundo parámetro es la columna de destino. También acepta un tercer parámetro opcional Position
(que representa un valor DropPosition
), que determina si se coloca la columna antes o después de la columna de destino.
public async void HandleClick()
{
IgbColumn Col1 = await this.grid.GetColumnByVisibleIndexAsync(0);
IgbColumn Col2 = await this.grid.GetColumnByVisibleIndexAsync(1);
this.Grid.MoveColumn(Col1,Col2, DropPosition.AfterDropTarget);
}
razor
Move
: mueve una columna a un índice visible especificado. Si el parámetro de índice pasado no es válido (es negativo o excede el número de columnas), o si no se permite que la columna se mueva a este índice (si está dentro de otro grupo), no se realiza ninguna operación.
public async void HandleClick()
{
IgbColumn Col1 = await this.grid.GetColumnByVisibleIndexAsync(0);
this.Col1.Move(3);
}
razor
Tenga en cuenta que cuando se utiliza la función de movimiento de columnas, se emitirá el evento ColumnMovingEnd
si la operación se realizó correctamente. Tenga en cuenta también que, en comparación con la funcionalidad de arrastrar y soltar, el uso de la función de movimiento de columnas no requiere establecer la propiedad Moving
en verdadero.
Eventos
Hay varios eventos relacionados con el movimiento de la columna para proporcionar un medio para aprovechar las operaciones de arrastrar y soltar de las columnas. Estos son ColumnMovingStart
, ColumnMoving
y ColumnMovingEnd
.
Puede suscribirse al evento ColumnMovingEnd
de IgbTreeGrid
para implementar alguna lógica personalizada cuando una columna se coloca en una nueva posición. Por ejemplo, puede cancelar la eliminación de la columna Categoría después de la columna Cambio en el año (%) en el siguiente fragmento de código.
<IgbTreeGrid ShowGroupArea="true" @ref='Grid' Width="100%" Height="100%"
AllowFiltering=true
FilterMode="FilterMode.ExcelStyleFilter"
AutoGenerate=true
Data=northwindEmployees
Moving="true"
ColumnMovingEndScript='onColumnMovingEnd'>
</IgbTreeGrid>
razor
igRegisterScript("onColumnMovingEnd", (event) => {
if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
event.detail.cancel = true;
}
}, false);
razor
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:
<IgbTreeGrid class="grid"></IgbTreeGrid>
razor
Luego establezca las propiedades CSS relacionadas con esta clase:
.grid {
--ig-grid-ghost-header-text-color: #f4d45c;
--ig-grid-ghost-header-background: #ad9d9d;
--ig-grid-ghost-header-icon-color: #f4d45c;
}
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(IgbInputModule),
typeof(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#grid {
--ig-grid-ghost-header-text-color: #f4d45c;
--ig-grid-ghost-header-background: #ad9d9d;
--ig-grid-ghost-header-icon-color: #f4d45c;
}
</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"
Moving="true"
ColumnWidth="200">
<IgbPaginator
PerPage="10"
TotalRecords="20">
</IgbPaginator>
<IgbColumn
Field="Name"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Title"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="ID"
DataType="GridColumnDataType.Number"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column3"
@ref="column3">
</IgbColumn>
<IgbColumn
Field="HireDate"
DataType="GridColumnDataType.Date"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column4"
@ref="column4">
</IgbColumn>
<IgbColumn
Field="Age"
DataType="GridColumnDataType.Number"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column5"
@ref="column5">
</IgbColumn>
<IgbColumn
Field="Address"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column6"
@ref="column6">
</IgbColumn>
<IgbColumn
Field="City"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column7"
@ref="column7">
</IgbColumn>
<IgbColumn
Field="Country"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column8"
@ref="column8">
</IgbColumn>
<IgbColumn
Field="Fax"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column9"
@ref="column9">
</IgbColumn>
<IgbColumn
Field="PostalCode"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column10"
@ref="column10">
</IgbColumn>
<IgbColumn
Field="Phone"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column11"
@ref="column11">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
var column4 = this.column4;
var column5 = this.column5;
var column6 = this.column6;
var column7 = this.column7;
var column8 = this.column8;
var column9 = this.column9;
var column10 = this.column10;
var column11 = this.column11;
}
private IgbTreeGrid treeGrid;
private IgbColumn column1;
private IgbColumn column2;
private IgbColumn column3;
private IgbColumn column4;
private IgbColumn column5;
private IgbColumn column6;
private IgbColumn column7;
private IgbColumn column8;
private IgbColumn column9;
private IgbColumn column10;
private IgbColumn column11;
private EmployeesFlatDetails _employeesFlatDetails = null;
public EmployeesFlatDetails EmployeesFlatDetails
{
get
{
if (_employeesFlatDetails == null)
{
_employeesFlatDetails = new EmployeesFlatDetails();
}
return _employeesFlatDetails;
}
}
}
razor
igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleColumnPin = function toggleColumnPin(field) {
var grid = document.getElementsByTagName("igc-tree-grid")[0];
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
}
return html`<div>
<span style="float:left">${ctx.column.field}</span>
<span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
</div>`;
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#grid {
--ig-grid-ghost-header-text-color: #f4d45c;
--ig-grid-ghost-header-background: #ad9d9d;
--ig-grid-ghost-header-icon-color: #f4d45c;
}
css
Referencias de API
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.