このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。
Web Components 列タイプ
Ignite UI for Web Components Data Table / Data Grid は、データを Web Components データ グリッドに表示する方法を 5 つの列タイプとテンプレート列タイプから選択できます。サポートされている列タイプは、Text 列、Numeric 列、DateTime 列、Image 列、ComboBox および Template です。
各列は、field
プロパティを、グリッドにバインドされた基になる データ ソースの項目の対応するプロパティの名前に設定することによって Web Components データ グリッドにバインドします。
Web Components 列タイプの例
export class DataGridSharedData {
public static getEmployees(count?: number ): any [] {
if (count === undefined ) {
count = 250 ;
}
const employees: any [] = [];
let maleCount: number = 0 ;
let femaleCount: number = 0 ;
for (let i = 0 ; i < count; i++) {
const age: number = Math .round(this .getRandomNumber(20 , 40 ));
const gender: string = this .getRandomGender();
const firstName: string = this .getRandomNameFirst(gender);
const lastName: string = this .getRandomNameLast();
const street: string = this .getRandomStreet();
const country: string = this .getRandomItem(this .countries);
const city: string = this .getRandomCity(country);
const generation = Math .floor(age / 10 ) * 10 + "s" ;
const email: string = firstName.toLowerCase() + "@" + this .getRandomItem(this .emails);
const website: string = firstName.toLowerCase() + "-" + this .getRandomItem(this .websites);
let photoPath: any ;
if (gender === "male" ) {
maleCount++;
if (maleCount > 26 ) {
maleCount = 1 ;
}
photoPath = this .getPhotoMale(maleCount);
}
else {
femaleCount++;
if (femaleCount > 24 ) {
femaleCount = 1 ;
}
photoPath = this .getPhotoFemale(femaleCount);
}
let person: any = {};
person.Address = street + "," + city;
person.Age = age;
person.Birthday = this .getBirthday(age);
person.City = city;
person.Country = country;
person.CountryFlag = this .getCountryFlag(country);
person.Email = email;
person.FirstName = firstName;
person.Gender = this .getGenderPhoto(gender);
person.Generation = generation;
person.ID = this .pad(i + 1 , 5 );
person.LastName = lastName;
person.Name = firstName + " " + lastName;
person.Phone = this .getRandomPhone();
person.Photo = photoPath;
person.Street = street;
person.Salary = this .getRandomNumber(40 , 200 ) * 1000 ;
person.Sales = this .getRandomNumber(200 , 980 ) * 1000 ;
person.Website = website;
person.Productivity = this .getProductivity();
if (person.Salary < 50000 ) {
person.Income = "Low" ;
} else if (person.Salary < 100000 ) {
person.Income = "Average" ;
} else {
person.Income = "High" ;
}
employees.push(person);
}
return employees;
}
public static getProductivity(weekCount?: number ): any [] {
if (weekCount === undefined ) {
weekCount = 52 ;
}
const productivity: any [] = [];
for (let w = 0 ; w < weekCount; w++) {
const value = this .getRandomNumber(-50 , 50 );
productivity.push({Value : value, Week : w});
}
return productivity;
}
public static getSales(count?: number ): any [] {
if (count === undefined ) {
count = 250 ;
}
const names: 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" ,
"Samsung SSD" , "WD SSD" , "Seagate SSD" , "Intel SSD" ,
"Samsung Monitor" , "Asus Monitor" , "LG Monitor" , "HP Monitor" ];
const countries: string [] = ["USA" , "UK" , "France" , "Canada" , "Poland" , "Japan" , "Germany" ];
const status: string [] = ["Packing" , "Shipped" , "Delivered" ];
const sales: any [] = [];
for (let i = 0 ; i < count; i++) {
const price = this .getRandomNumber(100 , 900 );
const items = this .getRandomNumber(10 , 80 );
const value = price * items;
const margin = this .getRandomNumber(3 , 10 );
const profit = Math .round((price * margin / 100 ) * items);
const country = this .getRandomItem(countries);
sales.push({
BundlePrice : price,
ProductPrice : price,
Margin : margin,
OrderDate : this .getRandomDate(new Date (2012 , 0 , 1 ), new Date ()),
OrderItems : items,
OrderValue : value,
ProductID : 1001 + i,
ProductName : this .getRandomItem(names),
Profit : profit,
Countries : country,
CountryFlag : this .getCountryFlag(country),
Status : this .getRandomItem(status)
});
}
return sales;
}
public static getHouses(count?: number ): any [] {
if (count === undefined ) {
count = 250 ;
}
const houses: any [] = [];
const property: string [] = [ "Townhouse" , "Single" , "Condo" , "Villa" ];
const emails: string [] = [ "estates.com" , "remax.com" , "zillow.com" , "realtor.com" , "coldwell.com" ];
const countries: string [] = ["USA" , "UK" , "France" , "Canada" , "Poland" , "Japan" , "Germany" ];
for (let i = 0 ; i < count; i++) {
const year: number = this .getRandomNumber(1950 , 2015 );
const age: number = 2020 - year;
const gender: string = this .getRandomGender();
const firstName: string = this .getRandomNameFirst(gender);
const lastName: string = this .getRandomNameLast();
const initials = firstName.substr(0 , 1 ).toLowerCase();
const email: string = initials + lastName.toLowerCase() + "@" + this .getRandomItem(emails);
const street: string = this .getRandomStreet();
const country: string = this .getRandomItem(countries);
const city: string = this .getRandomCity(country);
houses.push({
Address : street + "," + city,
Age : age,
Agent : firstName + " " + lastName,
Area : this .getRandomNumber(50 , 300 ),
Baths : this .getRandomNumber(1 , 3 ),
Built : year,
City : city,
Country : country,
CountryFlag : this .getCountryFlag(country),
Email : email,
ID : this .pad(i + 1 , 5 ),
Phone : this .getRandomPhone(),
Price : this .getRandomNumber(210 , 900 ) * 1000 ,
Property : this .getRandomItem(property),
Rooms : this .getRandomNumber(2 , 5 ),
SaleDate : this .getRandomDate(new Date (2015 , 0 , 1 ), new Date ()),
Street : street,
});
}
return houses;
}
private static websites: string [] = [ ".com" , ".gov" , ".edu" , ".org" ];
private static emails: string [] = [ "gmail.com" , "yahoo.com" , "twitter.com" ];
private static genders: string [] = ["male" , "female" ];
private static maleNames: string [] = ["Kyle" , "Oscar" , "Ralph" , "Mike" , "Bill" , "Frank" , "Howard" , "Jack" , "Larry" , "Pete" , "Steve" , "Vince" , "Mark" , "Alex" , "Max" , "Brian" , "Chris" , "Andrew" , "Martin" , "Mike" , "Steve" , "Glenn" , "Bruce" ];
private static femaleNames: string [] = ["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" ];
private static lastNames: string [] = ["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" ];
private static countries: string [] = ["USA" , "UK" , "France" , "Canada" , "Poland" ];
private static citiesUS: string [] = ["New York" , "Los Angeles" , "Miami" , "San Francisco" , "San Diego" , "Las Vegas" ];
private static citiesUK: string [] = ["London" , "Liverpool" , "Manchester" ];
private static citiesFR: string [] = ["Paris" , "Marseille" , "Lyon" ];
private static citiesCA: string [] = ["Toronto" , "Vancouver" , "Montreal" ];
private static citiesPL: string [] = ["Krakow" , "Warsaw" , "Wroclaw" , "Gdansk" ];
private static citiesJP: string [] = ["Tokyo" , "Osaka" , "Kyoto" , "Yokohama" ];
private static citiesGR: string [] = ["Berlin" , "Bonn" , "Cologne" , "Munich" , "Hamburg" ];
private static roadSuffixes: string [] = ["Road" , "Street" , "Way" ];
private static roadNames: string [] = ["Main" , "Garden" , "Broad" , "Oak" , "Cedar" , "Park" , "Pine" , "Elm" , "Market" , "Hill" ];
private static getRandomNumber(min: number , max : number ): number {
return Math .round(min + Math .random() * (max - min));
}
private static getRandomItem(array: any []): any {
const index = Math .round(this .getRandomNumber(0 , array.length - 1 ));
return array[index];
}
private static getRandomDate (start: Date , end: Date ) {
return new Date (start.getTime() + Math .random() * (end.getTime() - start.getTime()));
}
private static getRandomPhone(): string {
const phoneCode = this .getRandomNumber(100 , 900 );
const phoneNum1 = this .getRandomNumber(100 , 900 );
const phoneNum2 = this .getRandomNumber(1000 , 9000 );
const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
return phone;
}
private static getRandomGender(): string {
return this .getRandomItem(this .genders);
}
private static getRandomNameLast(): string {
return this .getRandomItem(this .lastNames);
}
private static getRandomNameFirst(gender: string ): string {
if (gender === "male" ) {
return this .getRandomItem(this .maleNames);
}
else {
return this .getRandomItem(this .femaleNames);
}
}
private static getRandomCity(country: string ): string {
if (country === "Canada" ) {
return this .getRandomItem(this .citiesCA);
} else if (country === "France" ) {
return this .getRandomItem(this .citiesFR);
} else if (country === "Poland" ) {
return this .getRandomItem(this .citiesPL);
} else if (country === "USA" ) {
return this .getRandomItem(this .citiesUS);
} else if (country === "Japan" ) {
return this .getRandomItem(this .citiesJP);
} else if (country === "Germany" ) {
return this .getRandomItem(this .citiesGR);
} else {
return this .getRandomItem(this .citiesUK);
}
}
private static getRandomStreet(): string {
const num = Math .round(this .getRandomNumber(100 , 300 )).toString();
const road = this .getRandomItem(this .roadNames);
const suffix = this .getRandomItem(this .roadSuffixes);
return num + " " + road + " " + suffix;
}
private static getBirthday(age: number ): Date {
const today: Date = new Date ();
const year: number = today.getFullYear() - age;
const month: number = this .getRandomNumber(0 , 8 );
const day: number = this .getRandomNumber(10 , 27 );
return new Date (year, month, day);
}
private static getPhotoMale(id: number ): string {
return 'https://static.infragistics.com/xplatform/images/people//GUY' + this .pad(id, 2 ) + '.png' ;
}
private static getPhotoFemale(id: number ): string {
return 'https://static.infragistics.com/xplatform/images/people/GIRL' + this .pad(id, 2 ) + '.png' ;
}
private static getGenderPhoto(gender: string ): string {
return 'https://static.infragistics.com/xplatform/images/genders/' + gender + '.png' ;
}
private static getCountryFlag(country: string ): string {
return 'https://static.infragistics.com/xplatform/images/flags/' + country + '.png' ;
}
private static pad (num: number , size: number ) {
let s = num + "" ;
while (s.length < size) {
s = "0" + s;
}
return s;
}
}
ts コピー import { DataGridSharedData } from './DataGridSharedData' ;
import { ModuleManager } from 'igniteui-webcomponents-core' ;
import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids' ;
import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids' ;
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-data-grids' ;
import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids' ;
import { IgcTemplateCellInfo } from 'igniteui-webcomponents-data-grids' ;
import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids' ;
import { IgcImageColumnComponent } from 'igniteui-webcomponents-data-grids' ;
import { IgcSparklineModule } from 'igniteui-webcomponents-charts' ;
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts' ;
import { SparklineDisplayType } from 'igniteui-webcomponents-charts' ;
import { IgcComboBoxColumnComponent } from 'igniteui-webcomponents-data-grids' ;
import { IgcGridCellValueChangingEventArgs } from 'igniteui-webcomponents-data-grids' ;
ModuleManager.register(
IgcDataGridModule,
IgcGridColumnOptionsModule,
IgcSparklineModule
);
export class DataGridColumnTypes {
private grid: IgcDataGridComponent;
public data: any [];
public cityList: any [];
public cityLookup = new Map <string , any >();
constructor ( ) {
this .onUpdatingAddressColumn = this .onUpdatingAddressColumn.bind(this );
this .onUpdatingSalesColumn = this .onUpdatingSalesColumn.bind(this );
this .onUpdatingProductivityColumn = this .onUpdatingProductivityColumn.bind(this );
this .onCellValueChanging = this .onCellValueChanging.bind(this );
const salesColumn = document .getElementById('salesColumn' ) as IgcTemplateColumnComponent;
if (salesColumn)
salesColumn.cellUpdating = this .onUpdatingSalesColumn;
const addressColumn = document .getElementById('addressColumn' ) as IgcTemplateColumnComponent;
if (addressColumn)
addressColumn.cellUpdating = this .onUpdatingAddressColumn;
const productivityColumn = document .getElementById('productivityColumn' ) as IgcTemplateColumnComponent;
if (productivityColumn)
productivityColumn.cellUpdating = this .onUpdatingProductivityColumn;
this .data = DataGridSharedData.getEmployees();
this .cityList = [];
this .data.forEach(employee => {
if (!this .cityLookup.has(employee.City)) {
this .cityLookup.set(employee.City, employee);
this .cityList.push(employee);
}
});
const cityComboColumn = document .getElementById('cityColumn' ) as IgcComboBoxColumnComponent;
if (cityComboColumn)
cityComboColumn.dataSource = this .cityList;
cityComboColumn.textField = "City" ;
cityComboColumn.valueField = "City" ;
this .grid = document .getElementById('grid' ) as IgcDataGridComponent;
this .grid.dataSource = this .data;
this .grid.cellValueChanging = this .onCellValueChanging;
}
public onUpdatingAddressColumn (s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs ) {
const content = e.content as HTMLDivElement;
let span1: HTMLSpanElement | null = null ;
let span2: HTMLSpanElement | null = null ;
const info = e.cellInfo as IgcTemplateCellInfo;
const item = info.rowItem;
if (content.childElementCount === 0 ) {
span1 = document .createElement('span' );
span2 = document .createElement('span' );
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.appendChild(span1);
content.appendChild(span2);
}
else {
span1 = content.children[0 ] as HTMLSpanElement;
span2 = content.children[1 ] as HTMLSpanElement;
}
if (span1 && span2) {
span1.textContent = item.Street;
span2.textContent = item.City + ', ' + item.Country;
}
}
public onUpdatingSalesColumn (s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs ) {
const content = e.content as HTMLDivElement;
const info = e.cellInfo as IgcTemplateCellInfo;
const sales = info.rowItem.Sales;
let gaugeValue: HTMLSpanElement | null = null ;
let gaugeBar: HTMLDivElement | null = 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 = '6px' ;
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 ] as HTMLDivElement;
gaugeValue = content.children[1 ] as HTMLSpanElement;
}
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' ;
}
public onUpdatingProductivityColumn (s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs ) {
const content = e.content as HTMLDivElement;
let chart: IgcSparklineComponent | null = null ;
let info = e.cellInfo as IgcTemplateCellInfo;
if (content.childElementCount === 0 ) {
chart = new IgcSparklineComponent();
chart.valueMemberPath = 'Value' ;
chart.labelMemberPath = 'Week' ;
chart.displayType = SparklineDisplayType.Column;
chart.lineThickness = 2 ;
chart.brush = 'rgb(21, 190, 6)' ;
chart.negativeBrush = 'rgb(211, 17, 3)' ;
chart.width = '100%' ;
chart.height = '100%' ;
content.style.width = '100%' ;
content.style.height = 'calc(100% - 0.5rem)' ;
content.style.margin = '0px' ;
content.style.marginTop = '0.25rem' ;
content.appendChild(chart);
}
else {
chart = content.children[0 ] as IgcSparklineComponent;
}
if (chart) {
chart.dataSource = info.rowItem.Productivity;
}
}
public onCellValueChanging (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs ) {
let row = e.cellInfo.rowItem;
if (e.column.field === "City" ) {
let employee = this .cityLookup.get(e.newValue);
if (employee !== undefined ) {
row.City = employee.City;
row.Country = employee.Country;
row.Street = employee.Street;
row.CountryFlag = employee.CountryFlag;
row.Address = employee.Address;
s.notifySetItem(e.cellInfo.dataRow, row, row);
}
}
}
}
new DataGridColumnTypes();
ts コピー <!DOCTYPE html >
<html >
<head >
<title > DataGridColumnTypes</title >
<meta charset ="UTF-8" />
<link rel ="shortcut icon" href ="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel ="stylesheet" href ="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel ="stylesheet" href ="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel ="stylesheet" href ="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type ="text/css" />
</head >
<body >
<div id ="root" >
<div class ="container sample" >
<igc-data-grid
id ="grid"
height ="100%"
width ="100%"
row-height ="50"
auto-generate-columns ="false"
is-column-options-enabled ="true"
default-column-min-width ="100" >
<igc-image-column field ="Photo" header-text ="Photo"
content-opacity ="1" horizontal-alignment ="center" width ="110" > </igc-image-column >
<igc-text-column field ="Name" width ="*>130" > </igc-text-column >
<igc-text-column field ="Age" width ="*>110" > </igc-text-column >
<igc-numeric-column field ="Salary" positive-prefix ="$"
show-grouping-separator ="true" width ="*>140" > </igc-numeric-column >
<igc-combo-box-column id ="cityColumn" field ="City" header-text ="City" width ="*>130" > </igc-combo-box-column >
<igc-image-column field ="CountryFlag" header-text ="Country Flag"
content-opacity ="1" horizontalAlignment ="stretch" width ="130"
padding-top ="7.5" padding-bottom ="7.5" > </igc-image-column >
<igc-template-column id ="addressColumn"
field ="Address" header-text ="Address" horizontal-alignment ="left"
width ="*>160" > </igc-template-column >
<igc-date-time-column field ="Birthday" header-text ="Date of Birth"
horizontal-alignment ="right" width ="*>160" > </igc-date-time-column >
<igc-text-column field ="Income" width ="*>120" > </igc-text-column >
<igc-template-column id ="productivityColumn"
field ="Productivity" header-text ="Productivity"
horizontal-alignment ="stretch" width ="*>150" is-editable ="false" > <igc-template-column >
</igc-data-grid >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
テキスト列
Web Components データ グリッド は、関連付けられたセルに書式設定されたテキストを表示するために使用されます。これは、string 型のデータを表示するために使用されるデフォルトの列型です。
数値列
IgcNumericColumnComponent
は、関連付けられたセルに書式設定された数値を表示するために使用され、セル内の小数点以下の桁数の制御と小数桁の表示を可能にします。
DateTime 列
IgcDateTimeColumnComponent
は、関連付けられたセルに Date オブジェクトを表示するために使用され、Date オブジェクトを適切に表示する方法をコントロールで制御できます。
画像列
IgcImageColumnComponent
はセル内に画像を表示するために使用され、その imageStretchOption
オプションを使用してセルの画像ストレッチカスタマイズのためのオプションを公開します。
ImageResourceType
オプションを設定して、イメージのリソースの種類を選択することもできます。
コンボボックス列
IgcComboBoxColumnComponent
は、エンドユーザーが単一の項目を選択できるドロップダウン リストを表示するために使用されます。
データ バインディングは、列の DataSource
プロパティで複合オブジェクトの配列を使用して実現できます。
textField
プロパティはユーザーが選択を行うときに表示する値を決定します。
valueField
プロパティは選択された基本データ項目のバインド値を決定します。オブジェクトのリストに複数のプロパティがある場合に必要です。
テンプレート列
IgcTemplateColumnComponent
はセルテンプレートと共に使用されます。カスタム テンプレートを列のセルに適用することができます。これは、テンプレート列の CellUpdating
イベントを処理することによって行われます。
CellUpdating
イベントの引数は、イベントを発生させる IgcTemplateColumnComponent
と IgcTemplateCellUpdatingEventArgs
パラメーターを公開します。このイベント引数パラメーターは、列の関連付けられたセル内に配置される HTMLDivElement を返す Content
プロパティを公開します。その後、この div に新しい要素を追加することができます。
IgcTemplateCellUpdatingEventArgs
は、TemplateCellInfo
オブジェクトを取得するために使用できる CellInfo
プロパティも公開しています。このオブジェクトは、インデックス、基になるデータ項目、セルの外観など、セルと行に関する情報を公開します。
スパークライン列
Sparkline コンポーネントを IgcTemplateColumnComponent
に埋め込み、より複雑なデータ構造を表示できます。
この方法の詳細については、列スパークライン トピックを参照してください。
コード スニペット
以下は、このトピックで説明されている各列の実装を示します。
<igc-data-grid id ="grid"
width ="100%"
height ="500px"
auto-generate-columns ="false" >
<igc-text-column field ="FirstName" > </igc-text-column >
<igc-text-column field ="LastName" > </igc-text-column >
<igc-combo-box-column id ="City" field ="City" text-field ="name" header-text ="City" > </igc-text-column >
<igc-template-column id ="Address" field ="Address" > </igc-template-column >
<igc-image-column field ="Photo" > </igc-text-column >
<igc-numeric-column field ="Age" > </igc-numeric-column >
<igc-date-time-column field ="Birthday" > </igc-date-time-column >
</igc-data-grid >
html
import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-data-grids' ;
import { IgcTemplateCellInfo } from 'igniteui-webcomponents-data-grids' ;
import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-data-grids' ;
let grid1 = (document .getElementById("grid" ) as IgcDataGridComponent);
grid1.dataSource = data;
let cityComboColumn = document .getElementById('city' ) as IgcComboBoxColumnComponent;
if (cityComboColumn)
this .allCities = DataGridSharedData.getAllCities();
cityComboColumn.dataSource = this .cityList;
cityComboColumn.textField = "name" ;
let TemplateColumn = (document .getElementById("Address" ) as IgcTemplateColumnComponent);
TemplateColumn.cellUpdating = onCellUpdating;
onCellUpdating(s: IgcTemplateColumnComponent, e : IgcTemplateCellUpdatingEventArgs): void {
const content = e.content as HTMLDivElement;
let span1: HTMLSpanElement | null = null ;
let span2: HTMLSpanElement | null = null ;
const info = e.cellInfo as IgcTemplateCellInfo ;
const item = info.rowItem;
if (content.childElementCount === 0 ) {
span1 = document .createElement("span" );
span2 = document .createElement("span" );
content.style.verticalAlign = "top" ;
content.style.marginTop = "15px" ;
content.style.lineHeight = "normal" ;
content.style.display = "inline-grid" ;
content.style.fontFamily = "Verdana" ;
content.style.fontSize = "13px" ;
content.appendChild(span1);
content.appendChild(span2);
}
else {
span1 = content.children[0 ] as HTMLSpanElement;
span2 = content.children[1 ] as HTMLSpanElement;
}
if (span1 && span2) {
span1.textContent = item.Street;
span2.textContent = item.City + ", " + item.Country;
}
}
ts
以下は、上記の列で使用するサンプルデータ ソースです。
const maleNames: string [] = ["Kyle" , "Oscar" , "Ralph" , "Torrey" , "Bill" , "Frank" , "Howard" , "Jack" , "Larry" , "Pete" , "Steve" , "Vince" , "Mark" , "Alex" , "Max" , "Brian" , "Chris" , "Andrew" , "Martin" , "Mike" , "Steve" , "Glenn" , "Bruce" ];
const femaleNames: string [] = ["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" ];
const lastNames: string [] = ["Adams" , "Crowley" , "Ellis" , "Martinez" , "Irvine" , "Maxwell" , "Clark" , "Owens" , "Rooney" , "Lincoln" , "Thomas" , "Spacey" , "Betts" , "King" , "Newton" , "Fitzgerald" , "Holmes" , "Jefferson" , "Landry" , "Newberry" , "Perez" , "Spencer" , "Starr" , "Carter" , "Edwards" , "Stark" , "Johnson" , "Fitz" , "Chief" , "Blanc" , "Perry" , "Stone" , "Williams" , "Lane" , "Jobs" , "Adama" , "Power" , "Tesla" ];
const genders: string [] = ["male" , "female" ];
const cities: string [] = ["New York, New York" , "Columbus, Ohio" , "Los Angeles, California" , "Orlando, Florida" , "New Orleans, Louisiana" , "Las Vegas, Nevada" , "Atlanta, Georgia" ];
const roadSuffixes: string [] = ["Road" , "Street" , "Court" , "Way" ];
const roadNames: string [] = ["Alpha" , "Beta" , "Charlie" , "Delta" , "Echo" , "Foxtrot" , "Golf" , "Hotel" , "India" , "Julia" , "Kilo" , "Lima" , "Mike" , "November" ];
const people: any [] = [];
let maleCount: number = 0 ;
let femaleCount: number = 0 ;
for (let i = 0 ; i < 250 ; i++) {
const age: number = Math .round(this .getRandomNumber(20 , 40 ));
const today: Date = new Date ();
const gender: string = this .getRandomItem(genders);
let firstName: string ;
const lastName: string = this .getRandomItem(lastNames);
const propertyNum: string = Math .round(this .getRandomNumber(1 , 300 )).toString();
const cityState: string = this .getRandomItem(cities);
const road: string = this .getRandomItem(roadNames) + " " + this .getRandomItem(roadSuffixes);
let photoPath: string ;
if (gender === "male" ) {
firstName = this .getRandomItem(maleNames);
maleCount++;
if (maleCount > 26 ) {
maleCount = 0 ;
}
if (maleCount < 10 ) {
photoPath = '/assets/GUY0' + maleCount.toString() + '.png' ;
}
else {
photoPath = '/assets/GUY' + maleCount.toString() + '.png' ;
}
}
else {
firstName = this .getRandomItem(femaleNames);
femaleCount++;
if (femaleCount > 24 ) {
femaleCount = 0 ;
}
if (femaleCount < 10 ) {
photoPath = '/assets/GIRL0' + femaleCount.toString() + '.png' ;
}
else {
photoPath = '/assets/GIRL' + femaleCount.toString() + '.png' ;
}
}
const path: string = './assets/GIRL01.png' ;
const birthday: Date = new Date (today.getFullYear() - age, Math .round(this .getRandomNumber(1 , 12 )), Math .round(this .getRandomNumber(1 , 28 )));
people.push({
Address : propertyNum + " " + road + ", " + cityState,
Age : age,
Birthday : birthday,
City : cityState,
FirstName : firstName,
LastName : lastName,
Photo : path,
Street : propertyNum + " " + road + ","
});
}
this .data = people;
public getRandomNumber(min: number , max : number ): number {
return min + Math .random() * (max - min);
}
public getRandomItem(array: any []): any {
const index = Math .round(this .getRandomNumber(0 , array.length - 1 ));
return array[index];
}
ts
API リファレンス