Please note that this control has been deprecated and replaced with the Grid, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Descripción general de la cuadrícula de datos Blazor
La Ignite UI for Blazor Data Table/Data Grid es un componente de cuadrícula tabular Blazor que le permite vincular y mostrar rápidamente sus datos con poca codificación o configuración. Las características de la cuadrícula de datos Blazor incluyen filtrado, clasificación, plantillas, selección de filas, agrupación de filas, fijación de filas y columnas móviles. Las tablas Blazor están optimizadas para transmisión de datos en vivo, con la capacidad de manejar tamaños de conjuntos de datos ilimitados en un número de filas o columnas.
すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。
Blazor Data Grid Example
Esta demostración implementa algunas de las funciones que están disponibles en la cuadrícula: filtrado, agrupación, fijar/desanclar columnas, reposicionar columnas, ordenar y resúmenes.
EXAMPLE
MODULES
DATA GENERATOR
DATA SOURCE
RAZOR
JS
CSS
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;
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) });
builder.Services.AddIgniteUIBlazor(
typeof (IgbDataGridModule),
typeof (IgbDataGridToolbarModule),
typeof (IgbGridColumnOptionsModule),
typeof (IgbSparklineModule)
);
await builder.Build().RunAsync();
}
}
}
cs コピー using 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
{
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" ;
}
}
}
}
cs コピー using 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 )
{
_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" >
@ 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" />
<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 " />
<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;
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);
}
}
razor コピー
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 ];
}
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)" ;
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) {
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.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;
}
igRegisterScript("onUpdatingSalesColumn" , onUpdatingSalesColumn, false );
igRegisterScript("onUpdatingAddressColumn" , onUpdatingAddressColumn, false );
igRegisterScript("onUpdatingPhoneColumn" , onUpdatingPhoneColumn, false );
function onSummarziePeopleGender (grid, args ) {
args.setCalculator(10 );
}
igRegisterScript("onSummarziePeopleGender" , onSummarziePeopleGender, false );
js コピー
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.
Getting Started
Dependencies
Consulte estos temas sobre cómo agregar el paquete IgniteUI.Blazor.
Luego, puede comenzar a implementar el control agregando los siguientes espacios de nombres:
@using IgniteUI.Blazor.Controls
razor
Component Modules
El IgbGrid
requiere los siguientes módulos:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule));
razor
Optional Modules
Las características opcionales IgbGrid
, vistas arriba, requieren los siguientes módulos:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataGridModule),
typeof(IgbDataGridToolbarModule),
typeof(IgbSparklineModule)
);
razor
Sample Data Source
Ahora que se importa el módulo de cuadrícula de datos Blazor, lo siguiente es la configuración básica de la cuadrícula Blazor que se vincula a los datos locales.
@code {
public List <SaleInfo > DataSource { get ; set ;}
Random Rand = new Random();
protected override void OnInitialized ( )
{
GenerateData();
}
public void GenerateData ( )
{
string [] names = new string [] {
"Intel CPU" , "AMD CPU" ,
"Intel Motherboard" , "AMD Motherboard" , "Nvidia Motherboard" ,
"Nvidia GPU" , "Gigabyte GPU" , "Asus GPU" , "AMD GPU" , "MSI GPU" ,
"Corsair Memory" , "Patriot Memory" , "Skill Memory" ,
"Samsung HDD" , "WD HDD" , "Seagate HDD" , "Intel HDD" , "Asus HDD" ,
"Samsung SSD" , "WD SSD" , "Seagate SSD" , "Intel SSD" , "Asus SSD" ,
"Samsung Monitor" , "Asus Monitor" , "LG Monitor" , "HP Monitor" };
string [] countries = new string [] {
"USA" , "UK" , "France" , "Canada" , "Poland" ,
"Denmark" , "Croatia" , "Australia" , "Seychelles" ,
"Sweden" , "Germany" , "Japan" , "Ireland" ,
"Barbados" , "Jamaica" , "Cuba" , "Spain" , };
string [] status = new string [] { "Packing" , "Shipped" , "Delivered" };
var sales = new List<SaleInfo>();
for (var i = 0 ; i < 200 ; i++)
{
var price = GetRandomNumber(10000 , 90000 ) / 100 ;
var items = GetRandomNumber(4 , 30 );
var value = Math.Round(price * items);
var margin = GetRandomNumber(2 , 5 );
var profit = Math.Round((price * margin / 100 ) * items);
var country = GetRandomItem(countries);
var item = new SaleInfo()
{
Country = country,
CountryFlag = GetCountryFlag(country),
Margin = margin,
OrderDate = GetRandomDate(),
OrderItems = items,
OrderValue = value ,
ProductID = 1001 + i,
ProductName = GetRandomItem(names),
ProductPrice = price,
Profit = Math.Round(profit),
Status = GetRandomItem(status)
};
sales.Add(item);
}
this .DataSource = sales;
}
public double GetRandomNumber (double min, double max )
{
return Math.Round(min + (Rand.NextDouble() * (max - min)));
}
public string GetRandomItem (string [] array )
{
var index = (int )Math.Round(GetRandomNumber(0 , array.Length - 1 ));
return array[index];
}
public DateTime GetRandomDate ( ) {
var today = new DateTime();
var year = today.Year;
var month = this .GetRandomNumber(1 , 9 );
var day = this .GetRandomNumber(10 , 27 );
return new DateTime(year, (int )month, (int )day);
}
public string GetCountryFlag (string country )
{
var flag = "https://static.infragistics.com/xplatform/images/flags/" + country + ".png" ;
return flag;
}
public class SaleInfo
{
public string ? Status { get ; set ; }
public string ? ProductName { get ; set ; }
public string ? CountryFlag { get ; set ; }
public string ? Country { get ; set ; }
public DateTime OrderDate { get ; set ; }
public double Profit { get ; set ; }
public double ProductPrice { get ; set ; }
public double ProductID { get ; set ; }
public double OrderValue { get ; set ; }
public double OrderItems { get ; set ; }
public double Margin { get ; set ; }
}
}
razor
Auto-Generate Columns
El siguiente código demuestra cómo vincular la cuadrícula de datos Blazor a los datos locales anteriores.
<IgbDataGrid Height ="100%"
Width ="100%"
DataSource ="DataSource"
AutoGenerateColumns ="true"
DefaultColumnMinWidth ="100"
SummaryScope ="SummaryScope.Root"
IsColumnOptionsEnabled ="true"
IsGroupCollapsable ="true"
GroupSummaryDisplayMode ="GroupSummaryDisplayMode.RowBottom"
ColumnMovingMode ="ColumnMovingMode.Deferred"
ColumnMovingAnimationMode ="ColumnMovingAnimationMode.SlideOver"
ColumnMovingSeparatorWidth ="2"
ColumnShowingAnimationMode ="ColumnShowingAnimationMode.SlideFromRightAndFadeIn"
ColumnHidingAnimationMode ="ColumnHidingAnimationMode.SlideToRightAndFadeOut"
SelectionMode ="GridSelectionMode.SingleRow"
CornerRadiusTopLeft ="0"
CornerRadiusTopRight ="0" />
razor
Manually Define Columns
<IgbDataGrid Height ="100%"
Width ="100%"
DataSource ="DataSource"
AutoGenerateColumns ="false" >
<IgbNumericColumn Field ="ProductID" HeaderText ="Product ID" />
<IgbTextColumn Field ="ProductName" HeaderText ="Product Name" />
<IgbTextColumn Field ="QuantityPerUnit" HeaderText ="Quantity Per Unit" />
<IgbNumericColumn Field ="UnitsInStock" HeaderText ="Units In Stock" />
<IgbDateTimeColumn Field ="OrderDate" HeaderText ="Order Date" />
</IgbDataGrid >
razor
Styling Columns
El siguiente código demuestra cómo aplicar estilo a columnas específicas utilizando las propiedades de la columna proporcionada.
<IgbTextColumn
Background ="SkyBlue"
FontStyle ="italic"
FontWeight ="bold"
FontFamily ="Times New Roman"
FontSize ="16"
/>
razor
Tutorial Video
Obtenga más información sobre cómo crear una cuadrícula de datos Blazor en nuestro breve vídeo tutorial:
VIDEO
Additional Resources
API References