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 Grid Load & Save Layout
La tabla de datos Ignite UI for Blazor / cuadrícula de datos admite cargar y guardar el diseño de cuadrícula. Esto se realiza llamando a los LoadLayout
métodos y SaveLayout
de la cuadrícula. Estas características son útiles cuando un usuario final puede mover, ordenar y agrupar columnas, y desea conservar el estado de la cuadrícula y poder recuperar el diseño y reanudar el trabajo más adelante.
Blazor Ejemplo de diseño de carga y guardado de cuadrícula
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(IgbDataGridToolbarModule),
typeof(IgbGridColumnOptionsModule),
typeof(IgbSparklineModule)
);
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 Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Rendering
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.RenderTree
@using Microsoft.AspNetCore.Components.Web
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="container vertical">
<div class="options horizontal">
<button @onclick="OnLoadLayoutClick">Load</button>
<button @onclick="OnSaveLayoutClick">Save</button>
</div>
@if (Employees != null)
{
<IgbDataGridToolbar ToolbarTitle="Sales Team" ColumnChooser="true" ColumnPinning="true" TargetGrid="@DataGridRef" />
<div style="overflow: hidden">
<IgbDataGrid Height="100%" Width="100%"
@ref="@DataGridRef"
RowHeight="50"
DataSource="Employees"
AutoGenerateColumns="false"
IsColumnOptionsEnabled="true"
IsGroupCollapsable="true"
ActivationMode="GridActivationMode.Cell"
SummaryScope="@SummaryScope.Root"
GroupSummaryDisplayMode="@GroupSummaryDisplayMode.RowBottom"
GroupHeaderDisplayMode="@GroupHeaderDisplayMode.Combined"
CornerRadiusTopLeft="0"
CornerRadiusTopRight="0"
ColumnMovingSeparatorWidth="2"
ColumnMovingMode="ColumnMovingMode.Deferred"
ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
ColumnShowingAnimationMode="ColumnShowingAnimationMode.SlideFromRightAndFadeIn"
ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToRightAndFadeOut"
SelectionMode="DataGridSelectionMode.SingleRow">
<IgbImageColumn IsEditable="false" Width="@("*>120")" Field="Photo" PaddingTop="5" PaddingBottom="5" PaddingRight="10"
HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />
<IgbTextColumn Width="@("*>130")" Field="Name" />
@*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@
<IgbTemplateColumn Width="@("*>160")" Field="Sales" CellUpdatingScript="onUpdatingSalesColumn"
HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
<IgbNumericColumn Width="@("*>130")" Field="Salary" PositivePrefix="$"
ShowGroupingSeparator="true"
MaxFractionDigits="0"
MinFractionDigits="0" />
<IgbNumericColumn Width="100" Field="Age" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
<IgbDateTimeColumn Width="@("*>140")" Field="Birthday" HeaderText="Date of Birth" />
<IgbImageColumn IsEditable="false" Width="@("*>110")" Field="CountryFlag" HeaderText="Country" PaddingTop="5" PaddingBottom="5" PaddingRight="10"
HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />
@*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@
<IgbTemplateColumn Width="@("*>170")" Field="Address" CellUpdatingScript="onUpdatingAddressColumn" />
<IgbTemplateColumn Width="@("*>130")" Field="Phone" CellUpdatingScript="onUpdatingPhoneColumn" />
<IgbTextColumn Width="@("*>120")" Field="Income" />
<IgbTextColumn Width="@("*>120")" Field="Email" IsEditable="false" />
</IgbDataGrid>
</div>
}
</div>
</div>
@code {
private List<Employee> Employees;
public string savedLayout;
private IgbDataGrid _grid;
private IgbDataGrid DataGridRef
{
get { return _grid; }
set { _grid = value; this.OnDataGridRef(); StateHasChanged(); }
}
protected override void OnInitialized()
{
this.Employees = EmployeeData.Create(100, false);
}
private void OnDataGridRef()
{
var peopleGroup = new IgbColumnGroupDescription() { Field = "Country", DisplayName = "Country" };
var incomeGroup = new IgbColumnGroupDescription() { Field = "Income", DisplayName = "Income" };
this._grid.GroupDescriptions.Add(peopleGroup);
this._grid.GroupDescriptions.Add(incomeGroup);
var ageSummary = new IgbColumnSummaryDescription() { Field = "Age", Operand = DataSourceSummaryOperand.Average };
var peopleSummary = new IgbColumnSummaryDescription() { Field = "Photo", Operand = DataSourceSummaryOperand.Count };
var salarySummary = new IgbColumnSummaryDescription() { Field = "Salary", Operand = DataSourceSummaryOperand.Sum };
var saleSummary = new IgbColumnSummaryDescription() { Field = "Sales", Operand = DataSourceSummaryOperand.Max };
this._grid.SummaryDescriptions.Add(ageSummary);
this._grid.SummaryDescriptions.Add(peopleSummary);
this._grid.SummaryDescriptions.Add(salarySummary);
this._grid.SummaryDescriptions.Add(saleSummary);
// TODO fix onSummarziePeopleGender
//var nameSummary = new IgbColumnSummaryDescription() { Field = "Name", Operand = DataSourceSummaryOperand.Custom,
// ProvideCalculatorScript = "onSummarziePeopleGender" };
//this._grid.SummaryDescriptions.Add(nameSummary);
}
private void OnLoadLayoutClick(MouseEventArgs e)
{
this.DataGridRef.LoadLayout(this.savedLayout);
}
private void OnSaveLayoutClick(MouseEventArgs e)
{
this.DataGridRef.SaveLayout();
this.savedLayout = this.DataGridRef.SaveLayout();
}
}
razor// NOTE this JavaScript file implements functions for styling/templating columnd of the DataGrid control
// at end of this file, the igRegisterScript registers functions that are used .razor file
function onUpdatingSalesColumn(grid, args) {
let content = args.content;
let info = args.cellInfo;
let sales = info.rowItem.Sales;
let gaugeValue = null;
let gaugeBar = null;
if (content.childElementCount === 0) {
gaugeValue = document.createElement("span");
gaugeValue.style.margin = "0px";
gaugeValue.style.marginTop = "2px";
gaugeValue.style.padding = "0px";
gaugeValue.style.fontFamily = "Verdana";
gaugeValue.style.fontSize = "13px";
gaugeValue.style.textAlign = "center";
gaugeBar = document.createElement("div");
gaugeBar.style.background = "#7f7f7f";
gaugeBar.style.padding = "0px";
gaugeBar.style.margin = "0px";
gaugeBar.style.height = "6px";
gaugeBar.style.left = "0px";
gaugeBar.style.top = "0px";
gaugeBar.style.position = "relative";
const gauge = document.createElement("div");
gauge.style.background = "#dddddd";
gauge.style.padding = "0px";
gauge.style.margin = "0px";
gauge.style.height = "4px";
gauge.style.marginTop = "8px";
gauge.style.width = "100%";
gauge.appendChild(gaugeBar);
content.style.verticalAlign = "center";
content.style.lineHeight = "normal";
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.justifyContent = "center";
content.style.height = "100%";
content.style.width = "calc(100% - 2rem)";
content.style.marginRight = "1rem";
content.style.marginLeft = "1rem";
content.appendChild(gauge);
content.appendChild(gaugeValue);
} else {
const gauge = content.children[0];
gaugeBar = gauge.children[0];
gaugeValue = content.children[1];
}
// conditional formatting:
if (sales < 400000) {
gaugeValue.style.color = "rgb(211, 17, 3)";
gaugeBar.style.background = "rgb(211, 17, 3)";
}
else if (sales < 650000) {
gaugeValue.style.color = "Orange";
gaugeBar.style.background = "Orange";
}
else {
gaugeValue.style.color = "rgb(21, 190, 6)";
gaugeBar.style.background = "rgb(21, 190, 6)";
}
let gaugeWidth = (sales / 990000) * 100;
gaugeWidth = Math.min(100, gaugeWidth);
gaugeBar.style.width = gaugeWidth + "%";
gaugeValue.textContent = "$" + sales / 1000 + ",000";
}
function onUpdatingAddressColumn(grid, args) {
let content = args.content;
let info = args.cellInfo;
let item = info.rowItem;
let span1 = null;
let span2 = null;
if (content.childElementCount === 0) {
content.style.fontFamily = "Verdana";
content.style.fontSize = "13px";
content.style.verticalAlign = "center";
content.style.lineHeight = "normal";
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.justifyContent = "center";
content.style.height = "100%";
content.style.width = "100%";
content.style.color = "rgb(24, 29, 31)";
// stacking above elements in the content of grid's cell
span1 = document.createElement("span");
span2 = document.createElement("span");
content.appendChild(span1);
content.appendChild(span2);
}
else {
span1 = content.children[0];
span2 = content.children[1];
}
if (span1 && span2) {
// updating elements in the content of grid's cell
span1.textContent = item.Street;
span2.textContent = item.City + ", " + item.Country;
}
}
function onUpdatingPhoneColumn(grid, args) {
let content = args.content;
let info = args.cellInfo;
let item = info.rowItem;
let link = null;
if (content.childElementCount === 0) {
link = document.createElement("a");
content.style.verticalAlign = "center";
content.style.justifyContent = "center";
content.style.lineHeight = "normal";
content.style.display = "inline-block";
// content.style.display = "inline-grid";
content.style.fontFamily = "Verdana";
content.style.fontSize = "13px";
content.style.color = "#4286f4";
content.style.width = "100%";
content.appendChild(link);
} else {
link = content.children[0];
}
link.href = "tel:" + item.Phone;
link.textContent = item.Phone;
}
// this code allows calling above functions from a .razor file
igRegisterScript("onUpdatingSalesColumn", onUpdatingSalesColumn, false);
igRegisterScript("onUpdatingAddressColumn", onUpdatingAddressColumn, false);
igRegisterScript("onUpdatingPhoneColumn", onUpdatingPhoneColumn, false);
function onSummarziePeopleGender(grid, args) {
//TODO
//let info = args.cellInfo;
//let gender = info.rowItem.Gender;
args.setCalculator(10);
}
igRegisterScript("onSummarziePeopleGender", onSummarziePeopleGender, 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.
Funciones admitidas
La cuadrícula admite guardar las siguientes funciones:
- Column Visibility
- Fijación de columnas
- Columna en movimiento
- Cambio de tamaño de columna
- Clasificación de columnas
- Filtrado de columnas
- Agrupación de filas