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 Column Pinning Overview
La cuadrícula de datos de Ignite UI for Blazor admite la capacidad de anclar columnas, lo que permite a los usuarios finales bloquear una columna en un orden de columna determinado.
Se pueden fijar una columna o varias columnas en el lado izquierdo o derecho de la cuadrícula de datos. Además, puede cambiar el estado de los pines de las columnas utilizando la función PinColumn
.
Blazor Ejemplo de anclaje de columnas 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(IgbGridColumnOptionsModule)
);
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="options horizontal">
<input type="button" class="options-item" disabled=@IsPinningToLeftDisabled @onclick="OnPinLeft" value="Pin Left" />
<input type="button" class="options-item" disabled=@IsPinningToRightDisabled @onclick="OnPinRight" value="Pin Right" />
<input type="button" class="options-item" @onclick="OnUnPin" value="Unpin Columns" />
</div>
<div class="container vertical">
@if (Data != null)
{
<div style="overflow: hidden">
<IgbDataGrid Height="100%" Width="100%"
DefaultColumnMinWidth="120"
DataSource="Data"
AutoGenerateColumns="false"
@ref="DataGridRef">
<IgbTextColumn Field="ID" Pinned="PinnedPositions.Left" Width="@("*>110")" />
<IgbTextColumn Field="FirstName" Pinned="PinnedPositions.Left" Width="@("*>190")" />
<IgbTextColumn Field="LastName" Pinned="PinnedPositions.Left" Width="@("*>190")" />
<IgbDateTimeColumn Field="Birthday" Width="@("*>170")" />
<IgbNumericColumn Field="Age" Width="@("*>120")" />
<IgbImageColumn IsEditable="false" Field="CountryFlag" />
<IgbTextColumn Field="Street" Width="@("*>160")" />
<IgbTextColumn Field="City" Width="260" />
<IgbTextColumn Field="Country" Width="@("*>170")" />
<IgbNumericColumn Field="Salary" Width="@("*>170")" />
<IgbNumericColumn Field="Sales" Width="@("*>120")" />
<IgbNumericColumn Field="Salary" Width="@("*>120")" PositivePrefix="$"
ShowGroupingSeparator="true"
MaxFractionDigits="0"
MinFractionDigits="0" />
</IgbDataGrid>
</div>
}
</div>
</div>
@code {
private List<Employee> Data;
public IgbDataGrid grid;
public IgbDataGrid DataGridRef
{
get
{
return grid;
}
set
{
grid = value;
StateHasChanged();
}
}
public Boolean IsPinningToLeftDisabled { get; set; } = false;
public Boolean IsPinningToRightDisabled { get; set; } = false;
protected override void OnInitialized()
{
this.Data = EmployeeData.Create(200, false);
}
private async Task OnPinLeft()
{
IsPinningToLeftDisabled = true;
IsPinningToRightDisabled = true;
var idColumn = this.grid.ActualColumns[0];
var firstNameColumn = this.grid.ActualColumns[1];
var lastNameColumn = this.grid.ActualColumns[2];
await this.grid.PinColumnAsync(idColumn, PinnedPositions.Left);
await this.grid.PinColumnAsync(firstNameColumn, PinnedPositions.Left);
await this.grid.PinColumnAsync(lastNameColumn, PinnedPositions.Left);
}
private async Task OnPinRight()
{
IsPinningToLeftDisabled = true;
IsPinningToRightDisabled = true;
var streetColumn = this.grid.ActualColumns[6];
var cityColumn = this.grid.ActualColumns[7];
var countryColumn = this.grid.ActualColumns[8];
await this.grid.PinColumnAsync(streetColumn, PinnedPositions.Right);
await this.grid.PinColumnAsync(cityColumn, PinnedPositions.Right);
await this.grid.PinColumnAsync(countryColumn, PinnedPositions.Right);
}
private async Task OnUnPin()
{
IsPinningToLeftDisabled = false;
IsPinningToRightDisabled = false;
var idColumn = this.grid.ActualColumns[0];
var firstNameColumn = this.grid.ActualColumns[1];
var lastNameColumn = this.grid.ActualColumns[2];
await this.grid.PinColumnAsync(idColumn, PinnedPositions.None);
await this.grid.PinColumnAsync(firstNameColumn, PinnedPositions.None);
await this.grid.PinColumnAsync(lastNameColumn, PinnedPositions.None);
var streetColumn = this.grid.ActualColumns[6];
var cityColumn = this.grid.ActualColumns[7];
var countryColumn = this.grid.ActualColumns[8];
await this.grid.PinColumnAsync(streetColumn, PinnedPositions.None);
await this.grid.PinColumnAsync(cityColumn, PinnedPositions.None);
await this.grid.PinColumnAsync(countryColumn, PinnedPositions.None);
}
}
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.
La API de fijación de columnas en la cuadrícula de datos se puede habilitar configurando la propiedad Pinned
de una columna o al configurarla utilizando la función PinColumn
de la cuadrícula.
La propiedad Pinned
tiene tres opciones:
- Izquierda: habilitar
Left
colocará las columnas fijadas en el lado izquierdo de la cuadrícula. - Derecha: habilitar
Right
colocará las columnas fijadas en el lado derecho de la cuadrícula. - Ninguno: habilitar
None
desanclará una columna y reubicará su ubicación predeterminada dentro de la cuadrícula.
Las columnas no fijadas que están adyacentes a columnas fijadas seguirán manteniendo el desplazamiento horizontal.
La función PinColumn
contiene dos parámetros obligatorios. El primer parámetro es la columna que se va a fijar y el segundo es la configuración de enumeración PinnedPositions
.
Fragmento de código
En el código siguiente se muestra cómo implementar el anclaje de columnas en la cuadrícula de datos de Blazor con el anclaje de columnas mediante el método Pinned
propiedad y PinColumn
función:
<IgbDataGrid Height="100%" Width="100%"
DefaultColumnMinWidth="120"
DataSource="@DataSource"
AutoGenerateColumns="false"
@ref="DataGridRef">
@*Columns Pinned Left*@
<IgbTextColumn Field="ID" Pinned="PinnedPositions.Left" />
<IgbTextColumn Field="FirstName" Pinned="PinnedPositions.Left" />
<IgbTextColumn Field="LastName" Pinned="PinnedPositions.Left" />
@*Columns Unpinned*@
<IgbDateTimeColumn Field="Birthday" Pinned="PinnedPositions.None" />
<IgbNumericColumn Field="Age" Pinned="PinnedPositions.None" />
<IgbImageColumn Field="CountryFlag" Pinned="PinnedPositions.None" />
@*Columns Pinned Right*@
<IgbTextColumn Field="Street" Pinned="PinnedPositions.Right" />
<IgbTextColumn Field="City" Pinned="PinnedPositions.Right" />
<IgbTextColumn Field="Country" Pinned="PinnedPositions.Right" />
</IgbDataGrid>
razor
IU de fijación de columnas de la barra de herramientas
Se puede acceder a la interfaz de usuario de fijación de columnas desde el componente IgbDataGridToolbar
separado de la cuadrícula. Para ello, todo lo que tenemos que hacer es establecer la propiedad columnPinning
de la barra de herramientas en verdadero. La barra de herramientas mostrará un IgbButton
y, al hacer clic en él, se mostrará la interfaz de usuario de fijación de columnas. Este botón también muestra el total de columnas fijadas a la izquierda. Si no se crea la barra de herramientas, habilitar la propiedad columnPinning
no tendrá ningún efecto y ocultará el botón.
IgbDataGridToolbar
proporciona propiedades adicionales, como agregar un título a la barra de herramientas mediante la propiedad ToolbarTitle
, colocar texto en IgbButton
configurando la propiedad columnPinningText
y agregar un encabezado de título a la interfaz de usuario que oculta la columna configurando columnPinningTitle
.
Manifestación
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)
);
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)
{
<IgbDataGridToolbar TargetGrid="Grid" ToolbarTitle="Global Sales"
ColumnPinning="true">
</IgbDataGridToolbar>
<div style="overflow: hidden">
<IgbDataGrid Height="100%" Width="100%"
@ref="Grid"
DataSource="Data"
AutoGenerateColumns="false">
<IgbTextColumn Field="ID" Pinned="PinnedPositions.Left" Width="@("*>110")" />
<IgbTextColumn Field="FirstName" Pinned="PinnedPositions.Left" Width="@("*>190")" />
<IgbTextColumn Field="LastName" Pinned="PinnedPositions.Left" Width="@("*>190")" />
<IgbDateTimeColumn Field="Birthday" Width="@("*>170")" />
<IgbNumericColumn Field="Age" Width="@("*>120")" />
<IgbImageColumn IsEditable="false" Field="CountryFlag" />
<IgbTextColumn Field="Street" Width="@("*>160")"/>
<IgbTextColumn Field="City" Width="260"/>
<IgbTextColumn Field="Country" Width="@("*>170")"/>
<IgbNumericColumn Field="Salary" Width="@("*>170")"/>
<IgbNumericColumn Field="Sales" Width="@("*>120")"/>
<IgbNumericColumn Field="Salary" Width="@("*>120")" PositivePrefix="$"
ShowGroupingSeparator="true"
MaxFractionDigits="0"
MinFractionDigits="0" />
</IgbDataGrid>
</div>
}
</div>
</div>
@code {
private List<Employee> Data;
private IgbDataGrid grid;
public IgbDataGrid Grid
{
get
{
return grid;
}
set
{
grid = value;
StateHasChanged();
}
}
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
Fragmento de código
<IgbDataGridToolbar TargetGrid="DataGridRef"
ToolbarTitle="Grid Toolbar Title"
ColumnPinning="true"
ColumnPinningText="Pinning"
ColumnPinningTitle="Column Pinning" />
<IgbDataGrid Height="100%" Width="100%"
@ref="DataGridRef"
DataSource="DataSource" />
@code {
private IgbDataGrid grid;
public IgbDataGrid DataGridRef
{
get
{
return grid;
}
set
{
grid = value;
StateHasChanged();
}
}
}
razor
Referencias de API
IgbButton
IgbDataGridToolbar
PinColumn
PinnedPositions
Pinned