このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Blazor Data Grid 概要
Ignite UI for Blazor Data Table / Data Grid は、表形式の Blazor コンポーネントでコーディングや設定をほとんど行わずにデータをすばやくバインドして表示できます。Blazor の機能には、フィルタリング、ソート、テンプレート、行選択、行のグループ化、行の固定、および列移動があります。Blazor データ テーブルは、ライブ ストリーミング データ用に最適化されており、無制限のデータセットサイズを行数または列数で処理することができます。
すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。
Blazor Data Grid の例
このデモは、グリッドで利用可能な機能のいくつかを実装しています:
フィルタリング、グループ化、列のピン固定/ピン固定解除、列の再配置、ソート、および集計。
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 コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
作業の開始
依存関係
IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。
以下の名前空間を追加してコントロールの実装を開始できます。
@using IgniteUI.Blazor.Controls
razor
モジュールの要件
IgbGrid
を作成するには、以下のモジュールが必要です。
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule));
razor
オプションのモジュール
上記のオプションの IgbGrid
機能を使用するには、以下のモジュールが必要です。
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataGridModule),
typeof(IgbDataGridToolbarModule),
typeof(IgbSparklineModule)
);
razor
サンプル データ ソース
Blazor グリッド モジュールがインポートされました。以下のステップはローカル データにバインドするグリッドの基本的な設定です。
@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
列の自動生成
以下のコードは、Blazor データ グリッドを上記のローカルデータにバインドする方法を示しています。
<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
列の手動定義
<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
列のスタイル設定
次のコードは、提供された列のプロパティを使用して特定の列のスタイルを設定する方法を示しています。
<IgbTextColumn
Background ="SkyBlue"
FontStyle ="italic"
FontWeight ="bold"
FontFamily ="Times New Roman"
FontSize ="16"
/>
razor
ビデオ チュートリアル
Blazor データ グリッドの作成について詳しくは、このチュートリアル ビデオ (英語) をご覧ください。
VIDEO
その他のリソース
API リファレンス