Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.
Blazor Row Grouping
La tabla de datos Ignite UI for Blazor / cuadrícula de datos le permite agrupar filas en un grupo de filas de 'encabezado fijo'. Esto es similar a la función Agrupar por de Microsoft Outlook, que es una manera fácil de agrupar datos visualmente en función de sus propios criterios.
Blazor Ejemplo de agrupación de filas por área
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 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(IgbDataGridModule),
typeof(IgbGridColumnOptionsModule),
typeof(IgbColumnGroupingModule)
);
await builder.Build().RunAsync();
}
}
}
csusing System;
using System.Collections.Generic;
using System.Linq;
namespace Infragistics.Samples
{
public static class DataGenerator
{
readonly static string[] websites = { ".com", ".gov", ".edu", ".org" };
readonly static string[] emails = { "gmail.com", "yahoo.com", "twitter.com" };
readonly static string[] genders = { "male", "female" };
readonly static string[] maleNames = { "Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce" };
readonly static string[] femaleNames = { "Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally" };
readonly static string[] lastNames = { "Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla" };
readonly static string[] countries = { "USA", "UK", "France", "Canada", "Poland" };
readonly static string[] citiesUS = { "New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas" };
readonly static string[] citiesUK = { "London", "Liverpool", "Manchester" };
readonly static string[] citiesFR = { "Paris", "Marseille", "Lyon" };
readonly static string[] citiesCA = { "Toronto", "Vancouver", "Montreal" };
readonly static string[] citiesPL = { "Krakow", "Warsaw", "Wroclaw", "Gdansk" };
readonly static string[] citiesJP = { "Tokyo", "Osaka", "Kyoto", "Yokohama" };
readonly static string[] citiesGR = { "Berlin", "Bonn", "Cologne", "Munich", "Hamburg" };
readonly static string[] roadSuffixes = { "Road", "Street", "Way" };
readonly static string[] roadNames = { "Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill" };
public static Random Rand = new Random();
public static string GetWebsite()
{
return GetItem(websites);
}
public static string GetEmail()
{
return GetItem(emails);
}
public static double GetNumber(double min, double max)
{
return Math.Round(min + (Rand.NextDouble() * (max - min)));
}
public static int GetInteger(double min, double max)
{
return (int)GetNumber(min, max);
}
public static string GetPhone()
{
var phoneCode = GetNumber(100, 900);
var phoneNum1 = GetNumber(100, 900);
var phoneNum2 = GetNumber(1000, 9000);
var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
return phone;
}
public static string GetGender()
{
return GetItem(genders);
}
public static string GetNameFirst(string gender)
{
if (gender == "male")
return GetItem(maleNames);
else
return GetItem(femaleNames);
}
public static string GetNameLast()
{
return GetItem(lastNames);
}
public static string GetItem(string[] array)
{
var index = (int)Math.Round(GetNumber(0, array.Length - 1));
return array[index];
}
public static string GetCountry()
{
return GetItem(countries);
}
public static string GetCity(string country)
{
if (country == "Canada")
{
return GetItem(citiesCA);
}
else if (country == "France")
{
return GetItem(citiesFR);
}
else if (country == "Poland")
{
return GetItem(citiesPL);
}
else if (country == "USA")
{
return GetItem(citiesUS);
}
else if (country == "Japan")
{
return GetItem(citiesJP);
}
else if (country == "Germany")
{
return GetItem(citiesGR);
}
else
{ // if (country === "United Kingdom") {
return GetItem(citiesUK);
}
}
public static string GetStreet()
{
var num = Math.Round(GetNumber(100, 300)).ToString();
var road = GetItem(roadNames);
var suffix = GetItem(roadSuffixes);
return num + " " + road + " " + suffix;
}
public static DateTime GetBirthday()
{
var year = DateTime.Now.Year - GetInteger(30, 50);
var month = GetNumber(10, 12);
var day = GetNumber(20, 27);
return new DateTime(year, (int)month, (int)day);
}
public static DateTime GetDate()
{
var year = DateTime.Now.Year;
var month = GetNumber(10, 12);
var day = GetNumber(20, 27);
return new DateTime(year, (int)month, (int)day);
}
public static string Pad(int num, int size)
{
var s = num + "";
while (s.Length < size)
{
s = "0" + s;
}
return s;
}
public static string GetPhotoMale(int id)
{
return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
}
public static string GetPhotoFemale(int id)
{
return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
}
private static int maleCount = 0;
private static int femaleCount = 0;
public static string GetPhoto(string gender)
{
if (gender == "male")
{
maleCount++;
if (maleCount > 24) maleCount = 1;
return GetPhotoMale(maleCount);
}
else
{
femaleCount++;
if (femaleCount > 24) femaleCount = 1;
return GetPhotoFemale(femaleCount);
}
}
public static string GetGenderPhoto(string gender)
{
return "https://static.infragistics.com/xplatform/images/genders/" + gender + ".png";
}
public static string GetCountryFlag(string country)
{
return "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
}
public static string GetIncomeRange(double salary)
{
if (salary < 50000)
{
return "Low";
}
else if (salary < 100000)
{
return "Average";
}
else
{
return "High";
}
}
}
}
csusing System;
using System.Collections.Generic;
using System.ComponentModel;
namespace Infragistics.Samples
{
public class Employee : INotifyPropertyChanged
{
public string ID { get; set; }
public string Address { get; set; }
public double Age { get; set; }
public string Gender { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Name { get; set; }
public string Street { get; set; }
public string City { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
public string Photo { get; set; }
public double Salary { get; set; }
public double Sales { get; set; }
public string Income { get; set; }
public int Index { get; set; }
public DateTime Birthday { get; set; }
public List<Productivity> Productivity { get; set; }
private string _Country;
public string Country
{
get { return _Country; }
set { if (_Country != value) { OnCountryChanged(value); } }
}
public string CountryFlag { get; set; }
protected void OnCountryChanged(string countryName)
{
// syncronizing country name and country flag
_Country = countryName;
CountryFlag = DataGenerator.GetCountryFlag(countryName);
City = DataGenerator.GetCity(countryName);
OnPropertyChanged("Country");
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class Productivity
{
public double Value { get; set; }
public int Week { get; set; }
}
public static class EmployeeData
{
public static List<Employee> Create(int? count, bool? useProductivity)
{
if (count == null) count = 100;
var employees = new List<Employee>();
for (int i = 0; i < count; i++)
{
var age = Math.Round(DataGenerator.GetNumber(20, 40));
var gender = DataGenerator.GetGender();
var firstName = DataGenerator.GetNameFirst(gender);
var lastName = DataGenerator.GetNameLast();
var street = DataGenerator.GetStreet();
var country = DataGenerator.GetCountry();
var city = DataGenerator.GetCity(country);
var email = firstName.ToLower() + "@" + DataGenerator.GetEmail();
var photoPath = DataGenerator.GetPhoto(gender);
var employee = new Employee
{
Index = i,
Address = street + ", " + city,
Age = age,
Birthday = DataGenerator.GetBirthday(),
City = city,
Email = email,
Gender = gender,
ID = DataGenerator.Pad(1001 + i, 4),
FirstName = firstName,
LastName = lastName,
Name = firstName + " " + lastName,
Photo = photoPath,
Phone = DataGenerator.GetPhone(),
Street = DataGenerator.GetStreet(),
Salary = DataGenerator.GetNumber(40, 200) * 1000,
Sales = DataGenerator.GetNumber(200, 980) * 1000,
};
employee.Country = country;
employee.Income = DataGenerator.GetIncomeRange(employee.Salary);
if (useProductivity.HasValue && useProductivity.Value)
{
employee.Productivity = GetProductivity(52);
}
employees.Add(employee);
}
return employees;
}
public static List<Productivity> GetProductivity(int weekCount)
{
var productivity = new List<Productivity>();
for (var w = 1; w <= weekCount; w++)
{
var value = DataGenerator.GetNumber(-50, 50);
var prod = new Productivity
{
Value = value,
Week = w
};
productivity.Add(prod);
};
return productivity;
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="container vertical">
@if (Data != null)
{
<div style="overflow: hidden">
<IgbDataGrid Height="100%" Width="100%"
DataSource="Data"
AutoGenerateColumns="false"
IsGroupCollapsable="true"
IsGroupByAreaVisible="true">
<IgbTextColumn Field="Name" Width="@("*>120")" />
<IgbNumericColumn Field="Age" Width="@("*>110")" />
<IgbDateTimeColumn Field="Birthday" HorizontalAlignment="CellContentHorizontalAlignment.Center" Width="@("*>160")"/>
<IgbTextColumn IsEditable="false" Field="Country" HeaderText="Country" Width="@("*>160")"
PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="CellContentHorizontalAlignment.Center"/>
<IgbTextColumn Field="Street" />
<IgbNumericColumn Field="Salary" HeaderText="Salary" Width="@("*>130")"
PositivePrefix="$" ShowGroupingSeparator="true"/>
<IgbTextColumn Field="City" />
<IgbNumericColumn Field="Salary" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" />
</IgbDataGrid>
</div>
}
</div>
</div>
@code {
private List<Employee> Data;
protected override void OnInitialized()
{
this.Data = EmployeeData.Create(200, false);
}
}
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.
Área de grupo por
Establezca la propiedad IsGroupByAreaVisible
en DataGrid en True, como se muestra en el ejemplo anterior, en la interfaz de usuario. El área de grupo por permite a los usuarios más opciones para agrupar y ordenar columnas sin interactuar cuando interactúan indirectamente con el DataGrid. Los grupos se pueden posicionar y reordenar según las necesidades de los usuarios. Esta área también se completa cuando las columnas se agregan mediante programación como GroupDescriptions
en DataGrid.
Ejemplo de uso de descripciones de grupos
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 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(IgbDataGridModule),
typeof(IgbGridColumnOptionsModule),
typeof(IgbColumnGroupingModule)
);
await builder.Build().RunAsync();
}
}
}
csusing System;
using System.Collections.Generic;
using System.Linq;
namespace Infragistics.Samples
{
public static class DataGenerator
{
readonly static string[] websites = { ".com", ".gov", ".edu", ".org" };
readonly static string[] emails = { "gmail.com", "yahoo.com", "twitter.com" };
readonly static string[] genders = { "male", "female" };
readonly static string[] maleNames = { "Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce" };
readonly static string[] femaleNames = { "Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally" };
readonly static string[] lastNames = { "Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla" };
readonly static string[] countries = { "USA", "UK", "France", "Canada", "Poland" };
readonly static string[] citiesUS = { "New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas" };
readonly static string[] citiesUK = { "London", "Liverpool", "Manchester" };
readonly static string[] citiesFR = { "Paris", "Marseille", "Lyon" };
readonly static string[] citiesCA = { "Toronto", "Vancouver", "Montreal" };
readonly static string[] citiesPL = { "Krakow", "Warsaw", "Wroclaw", "Gdansk" };
readonly static string[] citiesJP = { "Tokyo", "Osaka", "Kyoto", "Yokohama" };
readonly static string[] citiesGR = { "Berlin", "Bonn", "Cologne", "Munich", "Hamburg" };
readonly static string[] roadSuffixes = { "Road", "Street", "Way" };
readonly static string[] roadNames = { "Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill" };
public static Random Rand = new Random();
public static string GetWebsite()
{
return GetItem(websites);
}
public static string GetEmail()
{
return GetItem(emails);
}
public static double GetNumber(double min, double max)
{
return Math.Round(min + (Rand.NextDouble() * (max - min)));
}
public static int GetInteger(double min, double max)
{
return (int)GetNumber(min, max);
}
public static string GetPhone()
{
var phoneCode = GetNumber(100, 900);
var phoneNum1 = GetNumber(100, 900);
var phoneNum2 = GetNumber(1000, 9000);
var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
return phone;
}
public static string GetGender()
{
return GetItem(genders);
}
public static string GetNameFirst(string gender)
{
if (gender == "male")
return GetItem(maleNames);
else
return GetItem(femaleNames);
}
public static string GetNameLast()
{
return GetItem(lastNames);
}
public static string GetItem(string[] array)
{
var index = (int)Math.Round(GetNumber(0, array.Length - 1));
return array[index];
}
public static string GetCountry()
{
return GetItem(countries);
}
public static string GetCity(string country)
{
if (country == "Canada")
{
return GetItem(citiesCA);
}
else if (country == "France")
{
return GetItem(citiesFR);
}
else if (country == "Poland")
{
return GetItem(citiesPL);
}
else if (country == "USA")
{
return GetItem(citiesUS);
}
else if (country == "Japan")
{
return GetItem(citiesJP);
}
else if (country == "Germany")
{
return GetItem(citiesGR);
}
else
{ // if (country === "United Kingdom") {
return GetItem(citiesUK);
}
}
public static string GetStreet()
{
var num = Math.Round(GetNumber(100, 300)).ToString();
var road = GetItem(roadNames);
var suffix = GetItem(roadSuffixes);
return num + " " + road + " " + suffix;
}
public static DateTime GetBirthday()
{
var year = DateTime.Now.Year - GetInteger(30, 50);
var month = GetNumber(10, 12);
var day = GetNumber(20, 27);
return new DateTime(year, (int)month, (int)day);
}
public static DateTime GetDate()
{
var year = DateTime.Now.Year;
var month = GetNumber(10, 12);
var day = GetNumber(20, 27);
return new DateTime(year, (int)month, (int)day);
}
public static string Pad(int num, int size)
{
var s = num + "";
while (s.Length < size)
{
s = "0" + s;
}
return s;
}
public static string GetPhotoMale(int id)
{
return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
}
public static string GetPhotoFemale(int id)
{
return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
}
private static int maleCount = 0;
private static int femaleCount = 0;
public static string GetPhoto(string gender)
{
if (gender == "male")
{
maleCount++;
if (maleCount > 24) maleCount = 1;
return GetPhotoMale(maleCount);
}
else
{
femaleCount++;
if (femaleCount > 24) femaleCount = 1;
return GetPhotoFemale(femaleCount);
}
}
public static string GetGenderPhoto(string gender)
{
return "https://static.infragistics.com/xplatform/images/genders/" + gender + ".png";
}
public static string GetCountryFlag(string country)
{
return "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
}
public static string GetIncomeRange(double salary)
{
if (salary < 50000)
{
return "Low";
}
else if (salary < 100000)
{
return "Average";
}
else
{
return "High";
}
}
}
}
csusing System;
using System.Collections.Generic;
using System.ComponentModel;
namespace Infragistics.Samples
{
public class Employee : INotifyPropertyChanged
{
public string ID { get; set; }
public string Address { get; set; }
public double Age { get; set; }
public string Gender { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Name { get; set; }
public string Street { get; set; }
public string City { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
public string Photo { get; set; }
public double Salary { get; set; }
public double Sales { get; set; }
public string Income { get; set; }
public int Index { get; set; }
public DateTime Birthday { get; set; }
public List<Productivity> Productivity { get; set; }
private string _Country;
public string Country
{
get { return _Country; }
set { if (_Country != value) { OnCountryChanged(value); } }
}
public string CountryFlag { get; set; }
protected void OnCountryChanged(string countryName)
{
// syncronizing country name and country flag
_Country = countryName;
CountryFlag = DataGenerator.GetCountryFlag(countryName);
City = DataGenerator.GetCity(countryName);
OnPropertyChanged("Country");
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class Productivity
{
public double Value { get; set; }
public int Week { get; set; }
}
public static class EmployeeData
{
public static List<Employee> Create(int? count, bool? useProductivity)
{
if (count == null) count = 100;
var employees = new List<Employee>();
for (int i = 0; i < count; i++)
{
var age = Math.Round(DataGenerator.GetNumber(20, 40));
var gender = DataGenerator.GetGender();
var firstName = DataGenerator.GetNameFirst(gender);
var lastName = DataGenerator.GetNameLast();
var street = DataGenerator.GetStreet();
var country = DataGenerator.GetCountry();
var city = DataGenerator.GetCity(country);
var email = firstName.ToLower() + "@" + DataGenerator.GetEmail();
var photoPath = DataGenerator.GetPhoto(gender);
var employee = new Employee
{
Index = i,
Address = street + ", " + city,
Age = age,
Birthday = DataGenerator.GetBirthday(),
City = city,
Email = email,
Gender = gender,
ID = DataGenerator.Pad(1001 + i, 4),
FirstName = firstName,
LastName = lastName,
Name = firstName + " " + lastName,
Photo = photoPath,
Phone = DataGenerator.GetPhone(),
Street = DataGenerator.GetStreet(),
Salary = DataGenerator.GetNumber(40, 200) * 1000,
Sales = DataGenerator.GetNumber(200, 980) * 1000,
};
employee.Country = country;
employee.Income = DataGenerator.GetIncomeRange(employee.Salary);
if (useProductivity.HasValue && useProductivity.Value)
{
employee.Productivity = GetProductivity(52);
}
employees.Add(employee);
}
return employees;
}
public static List<Productivity> GetProductivity(int weekCount)
{
var productivity = new List<Productivity>();
for (var w = 1; w <= weekCount; w++)
{
var value = DataGenerator.GetNumber(-50, 50);
var prod = new Productivity
{
Value = value,
Week = w
};
productivity.Add(prod);
};
return productivity;
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="container vertical">
<div class="options horizontal">
<span class="options-item">Group Header Display Mode: </span>
<select class="options-item" @bind="GroupHeaderClickAction">
<option>@GroupHeaderDisplayMode.Combined</option>
<option>@GroupHeaderDisplayMode.Split</option>
</select>
</div>
@if (Data != null)
{
<div style="overflow: hidden">
<IgbDataGrid Height="100%" Width="100%"
@ref="@DataGridRef"
DataSource="Data"
AutoGenerateColumns="false"
IsGroupCollapsable="true"
GroupHeaderDisplayMode="@GroupHeaderClickAction">
<IgbTextColumn Field="Name" Width="@("*>120")" />
<IgbNumericColumn Field="Age" Width="@("*>110")" />
<IgbDateTimeColumn Field="Birthday" HorizontalAlignment="CellContentHorizontalAlignment.Center" Width="@("*>160")"/>
<IgbTextColumn IsEditable="false" Field="Country" HeaderText="Country" Width="@("*>160")"
PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="CellContentHorizontalAlignment.Center"/>
<IgbTextColumn Field="Street" />
<IgbNumericColumn Field="Salary" HeaderText="Salary" Width="@("*>130")"
PositivePrefix="$" ShowGroupingSeparator="true"/>
<IgbTextColumn Field="City" />
<IgbNumericColumn Field="Salary" PositivePrefix="$" ShowGroupingSeparator="true" MaxFractionDigits="0" MinFractionDigits="0" />
</IgbDataGrid>
</div>
}
</div>
</div>
@code {
private List<Employee> Data;
private IgbDataGrid grid;
private GroupHeaderDisplayMode GroupHeaderClickAction { get; set; } = GroupHeaderDisplayMode.Combined;
public IgbDataGrid DataGridRef
{
get
{
return grid;
}
set
{
grid = value;
OnGridCreated();
StateHasChanged();
}
}
protected override void OnInitialized()
{
this.Data = EmployeeData.Create(200, false);
}
private void OnGridCreated()
{
var country = new IgbColumnGroupDescription() { Field = "Country", DisplayName = "Location" };
var city = new IgbColumnGroupDescription() { Field = "City", DisplayName = "City" };
var income = new IgbColumnGroupDescription() { Field = "Income", DisplayName = "Income" };
grid.GroupDescriptions.Add(country);
grid.GroupDescriptions.Add(city);
grid.GroupDescriptions.Add(income);
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Grupos jerárquicos
La propiedad GroupHeaderDisplayMode
permite que los grupos sean jerárquicos. De forma predeterminada, cada descripción de grupo que se agrega se agrega. Configurar GroupHeaderDisplayMode
en Split
creará un encabezado de sección para cada grupo definido en la propiedad GroupDescriptions
de IgbGrid
.
<IgbDataGrid Height="100%" Width="100%"
@ref="DataGridRef"
DataSource="DataSource"
GroupHeaderDisplayMode="GroupHeaderDisplayMode.Split" />
razor
Grupos plegables
Además, IgbGrid
puede mostrar un interruptor en cada sección de grupo para permitir al usuario final expandir o contraer los datos agrupados a través de la propiedad IsGroupCollapsable
.
<IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
DataSource="DataSource"
IsGroupCollapsable="true" />
razor
Resumen
Para su comodidad, todos los fragmentos de código anteriores se combinan en un bloque de código a continuación que puede copiar fácilmente a su proyecto.
<IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
DataSource="DataSource"
GroupHeaderDisplayMode="GroupHeaderDisplayMode.Split"
IsGroupCollapsable="true" />
@code {
private IgbDataGrid grid;
public IgbDataGrid DataGridRef
{
get
{
return grid;
}
set
{
grid = value;
OnGridCreated();
StateHasChanged();
}
}
private void OnGridCreated()
{
var state = new ColumnGroupDescription { Field = "Country", DisplayName = "Location" };
var city = new ColumnGroupDescription { Field = "City", DisplayName = "City" };
var income = new ColumnGroupDescription { Field = "Income", DisplayName = "Income" };
this.DataGridRef.GroupDescriptions.Add(state);
this.DataGridRef.GroupDescriptions.Add(city);
this.DataGridRef.GroupDescriptions.Add(income);
}
}
razor
Referencias de API
IgbGrid
GroupDescriptions
GroupHeaderDisplayMode
IsGroupByAreaVisible
IsGroupCollapsable