Blazor Tree Grid Multi-Column Headers Overview
La función de encabezados de varias columnas de Ignite UI for Blazor en Blazor Tree Grid le permite agrupar columnas colocándolas bajo un encabezado múltiple común. Cada grupo de encabezados de varias columnas en IgbTreeGrid
podría ser una representación de combinaciones entre otros grupos o columnas. Esta función es particularmente útil cuando se trabaja con grandes conjuntos de datos en los que el desplazamiento horizontal puede resultar complicado.
Blazor Tree Grid Multi-Column Headers Example
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(IgbGridModule),
typeof(IgbColumnGroupModule),
typeof(IgbPropertyEditorPanelModule)
);
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
ValueType="PropertyEditorValueType.Button"
PrimitiveValue="@("Toggle First Group Pinned")"
ButtonClicked="WebTreeGridPinFirstGroupToggle"
Name="propertyEditorPropertyDescription1"
@ref="propertyEditorPropertyDescription1">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
ValueType="PropertyEditorValueType.Button"
PrimitiveValue="@("Toggle First Group Hidden")"
ButtonClicked="WebTreeGridHideFirstGroupToggle"
Name="propertyEditorPropertyDescription2"
@ref="propertyEditorPropertyDescription2">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Data="EmployeesFlatDetails"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="Name"
Resizable="true">
</IgbColumn>
<IgbColumnGroup
Header="General Information">
<IgbColumn
Field="HireDate"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumnGroup
Header="Personal Details">
<IgbColumn
Field="ID"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Title"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Age"
Sortable="true"
Resizable="true">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
<IgbColumnGroup
Header="Address Information">
<IgbColumnGroup
Header="Location">
<IgbColumn
Field="Country"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="City"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Address"
Sortable="true"
Resizable="true">
</IgbColumn>
</IgbColumnGroup>
<IgbColumnGroup
Header="Contact Information">
<IgbColumn
Field="Phone"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Fax"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Sortable="true"
Resizable="true">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
</IgbTreeGrid>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1;
var propertyEditorPropertyDescription2 = this.propertyEditorPropertyDescription2;
var treeGrid = this.treeGrid;
this.BindElements = () => {
propertyEditor.Target = this.treeGrid;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription propertyEditorPropertyDescription1;
private IgbPropertyEditorPropertyDescription propertyEditorPropertyDescription2;
private IgbTreeGrid treeGrid;
public void WebTreeGridPinFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
{
var columnGroup = this.treeGrid.GetColumns().ElementAt(1);
columnGroup.Pinned = !columnGroup.Pinned;
}
public void WebTreeGridHideFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
{
var columnGroup = this.treeGrid.GetColumns().ElementAt(1);
columnGroup.Hidden = !columnGroup.Hidden;
}
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
Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.
La declaración de encabezados de varias columnas se logra envolviendo un conjunto de columnas en un componente IgbColumnGroup
con la información del título IgbHeader
pasada.
<IgbTreeGrid Data=data AllowFiltering=true PrimaryKey="ID" ForeignKey="ParentID">
<IgbColumnGroup Header="Contact Information">
<IgbColumn Field="Phone" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="Fax" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="PostalCode" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
</IgbColumnGroup>
</IgbTreeGrid>
razor
Para lograr n-th
nivel de encabezados anidados, se debe seguir la declaración anterior. Entonces, al anidar IgbColumnGroup
se obtiene el resultado deseado.
<IgbTreeGrid Data=data AllowFiltering=true PrimaryKey="ID" ForeignKey="ParentID">
<IgbColumnGroup Header="General Information">
<IgbColumn Field="HireDate" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.Date"></IgbColumn>
<IgbColumnGroup Header="Person Details" Movable=true>
<IgbColumn Field="ID" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.Number"></IgbColumn>
<IgbColumn Field="Title" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="Age" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.Number"></IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
</IgbTreeGrid>
razor
Cada IgbColumnGroup
admite movimiento, fijación y ocultación.
When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested column groups or columns is not allowed. Moving between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. When columns/column-groups are not wrapped by current group which means they are top level columns, moving is allowed between whole visible columns.
<IgbTreeGrid Data=data AllowFiltering=true PrimaryKey="ID" ForeignKey="ParentID">
<IgbColumnGroup Header="General Information">
<IgbColumn Field="Phone" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.String"></IgbColumn>
</IgbColumnGroup>
<IgbColumn Field="Name" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="Title" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="Age" Sortable=true Resizable=true DataType="GridColumnDataType.Number"></IgbColumn>
</IgbTreeGrid>
razor
Multi-Column Header Template
Se puede crear una plantilla para cada uno de los grupos de columnas de la cuadrícula por separado. El grupo de columnas espera RenderFragment
para la propiedad HeaderTemplate
. La expresión se proporciona con el objeto de grupo de columnas como contexto.
<IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
</IgbColumnGroup>
@code {
public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
string value = ctx.Column.Header.ToUpper();
return @<span>@value</span>;
};
}
razor
Si desea volver a utilizar una sola plantilla para varios grupos de columnas, puede establecer la HeaderTemplate
propiedad del grupo de columnas de la siguiente manera:
<IgbColumnGroup Header="General Information" HeaderTemplate="Template">
</IgbColumnGroup>
<IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
</IgbColumnGroup>
@code {
public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
string value = ctx.Column.Header.ToUpper();
return @<span>@value</span>;
};
}
razor
If a header is re-templated and the corresponding column group is movable, you have to set the draggable attribute to false on the templated elements, so that you can handle any of the events that are applied!
@code {
public Dictionary<string, object> DraggableAttributes { get; set; } =
new Dictionary<string, object>()
{
{ "draggable", "false" }
};
public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
return @<IgbIcon AdditionalAttributes="DraggableAttributes" @onclick="onClick"/>;
};
}
razor
El siguiente ejemplo demuestra cómo implementar grupos de columnas contraíbles utilizando plantillas de encabezado.
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(IgbGridModule),
typeof(IgbColumnGroupModule)
);
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"
Data="EmployeesFlatDetails"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="Name"
Resizable="true">
</IgbColumn>
<IgbColumnGroup
Header="General Information"
HeaderTemplateScript="WebTreeGridColumnGroupHeaderTemplate"
Name="columnGroup1"
@ref="columnGroup1">
<IgbColumn
Field="HireDate"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumnGroup
Header="Personal Details">
<IgbColumn
Field="ID"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Title"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Age"
Sortable="true"
Resizable="true">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
<IgbColumnGroup
Header="Address Information"
HeaderTemplateScript="WebTreeGridColumnGroupHeaderTemplate"
Name="columnGroup2"
@ref="columnGroup2">
<IgbColumn
Header="Location"
Field="Address"
Hidden="true"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Phone"
Hidden="true"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumnGroup
Header="Location">
<IgbColumn
Field="Country"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="City"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Address"
Sortable="true"
Resizable="true">
</IgbColumn>
</IgbColumnGroup>
<IgbColumnGroup
Header="Contact Information">
<IgbColumn
Field="Phone"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Fax"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Sortable="true"
Resizable="true">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
var columnGroup1 = this.columnGroup1;
var columnGroup2 = this.columnGroup2;
}
private IgbTreeGrid treeGrid;
private IgbColumnGroup columnGroup1;
private IgbColumnGroup columnGroup2;
private EmployeesFlatDetails _employeesFlatDetails = null;
public EmployeesFlatDetails EmployeesFlatDetails
{
get
{
if (_employeesFlatDetails == null)
{
_employeesFlatDetails = new EmployeesFlatDetails();
}
return _employeesFlatDetails;
}
}
}
razor
const columnGroupStatesTreeGrid = new Map();
function toggleTreeGridColumnGroup(name) {
const grid = document.getElementsByTagName("igc-tree-grid")[0];
var columnGroup = grid.columns.find((col) => col.header === name)
const columns = columnGroup.childColumns;
if (columnGroup.header === 'General Information') {
const col = columns[1];
col.hidden = !col.hidden;
} else if (columnGroup.header === 'Address Information') {
for (const col of columns) {
col.hidden = !col.hidden;
}
}
columnGroupStatesTreeGrid.set(name, !columnGroupStatesTreeGrid.get(name));
}
igRegisterScript("WebTreeGridColumnGroupHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
var iconName = columnGroupStatesTreeGrid.get(ctx.column.header) ? '🔽' : '🔼';
return html`<div>
<span draggable="false" onclick='toggleTreeGridColumnGroup("${ctx.column.header}")'>${iconName}</span>
<span>${ctx.column.header}</span>
</div>`;
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Styling
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-header-background: #e0f3ff;
--ig-grid-header-text-color: #e41c77;
--ig-grid-header-border-width: 1px;
--ig-grid-header-border-style: solid;
--ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
css
Demo
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(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#treeGrid {
--ig-grid-header-background: #e0f3ff;
--ig-grid-header-text-color: #e41c77;
--ig-grid-header-border-width: 1px;
--ig-grid-header-border-style: solid;
--ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Data="EmployeesFlatDetails"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="Name"
Resizable="true">
</IgbColumn>
<IgbColumnGroup
Header="General Information">
<IgbColumn
Field="HireDate"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumnGroup
Header="Personal Details">
<IgbColumn
Field="ID"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Title"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Age"
Sortable="true"
Resizable="true">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
<IgbColumnGroup
Header="Address Information">
<IgbColumnGroup
Header="Location">
<IgbColumn
Field="Country"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="City"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Address"
Sortable="true"
Resizable="true">
</IgbColumn>
</IgbColumnGroup>
<IgbColumnGroup
Header="Contact Information">
<IgbColumn
Field="Phone"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Fax"
Sortable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Sortable="true"
Resizable="true">
</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-header-background: #e0f3ff;
--ig-grid-header-text-color: #e41c77;
--ig-grid-header-border-width: 1px;
--ig-grid-header-border-style: solid;
--ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
css
API References
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.