이 컨트롤은 더 이상 사용되지 않고 그리드 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 새로운 기능은 제공되지 않으며 버그 수정은 우선순위에서 제외됩니다. 코드베이스를 Data Grid로 마이그레이션하는 데 도움이 필요하거나 질문이 있으면 지원팀에 문의하세요.
Web Components 그리드 셀 활성화
Ignite UI for Web Components 데이터 테이블/데이터 그리드는 그리드 셀을 키보드로 탐색할 수 있는 셀 활성화 기능을 지원합니다. 이는 그리드의 activationMode
속성을 Cell
로 설정하여 활성화합니다.
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, // Math.round(value / 1000) + "," + Math.round(value % 1000),
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 { // if (country === "United Kingdom") {
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;
}
}
tsimport { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
import { EnterKeyBehaviors } from 'igniteui-webcomponents-grids';
import { EnterKeyBehaviorAfterEdit } from 'igniteui-webcomponents-grids';
import { EditModeType } from 'igniteui-webcomponents-grids';
import { DataGridSharedData } from './DataGridSharedData';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataGridModule,
IgcGridColumnOptionsModule
);
export class DataGridCellActivation {
private grid: IgcDataGridComponent;
public enterBehaviorButton: any;
public enterKeyAfterEditButton: any;
constructor() {
this.grid = document.getElementById('grid') as IgcDataGridComponent;
this.grid.dataSource = DataGridSharedData.getEmployees();
this.grid.enterBehaviorAfterEdit = EnterKeyBehaviorAfterEdit.MoveDown;
this.enterBehaviorButton = document.getElementById('enterModeDropBox');
if (this.enterBehaviorButton !== null){
this.enterBehaviorButton.onchange = this.enterModeChanged;
}
this.enterKeyAfterEditButton = document.getElementById('enterAfterEditMode');
if (this.enterKeyAfterEditButton !== null){
this.enterKeyAfterEditButton.onchange = this.enterAfterChanged;
}
}
public enterModeChanged = (event: any) => {
this.grid.enterBehavior = event.target.value;
if (this.grid.enterBehavior === EnterKeyBehaviors.Edit) {
this.enterKeyAfterEditButton.disabled = false;
this.grid.editMode = EditModeType.Cell;
}
else {
this.enterKeyAfterEditButton.disabled = true;
this.grid.editMode = EditModeType.None;
}
}
public enterAfterChanged = (event: any) => {
this.grid.enterBehaviorAfterEdit = event.target.value;
}
}
new DataGridCellActivation();
ts<!DOCTYPE html>
<html>
<head>
<title>DataGridCellActivation</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">
<div class="options">
<label class="options-item">Enter Key Mode: </label>
<select class="options-select" id="enterModeDropBox">
<option>Edit</option>
<option>MoveUp</option>
<option>MoveDown</option>
<option>MoveLeft</option>
<option>MoveRight</option>
<option>None</option>
</select class="options-select">
<label class="options-label">Enter Key After Edit Mode: </label>
<select class="options-select" id="enterAfterEditMode">
<option>MoveDown</option>
<option>MoveUp</option>
<option>MoveLeft</option>
<option>MoveRight</option>
</select class="options-select">
</div>
<igc-data-grid
id="grid"
height="100%"
width="100%"
default-column-min-width="150"
is-column-options-enabled="true"
auto-generate-columns="false"
selection-mode="None"
activation-mode="Cell">
<igc-text-column field="Name"></igc-text-column>
<igc-text-column field="Street" header-text="Address"></igc-text-column>
<igc-text-column field="City"></igc-text-column>
<igc-numeric-column field="Salary" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column>
<igc-date-time-column field="Birthday" ></igc-date-time-column>
</igc-data-grid>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
Excel 스타일 탐색
enterBehaviorAfterEdit
속성은 편집 모드에서 Enter 키를 누른 후 위, 아래, 왼쪽 또는 오른쪽으로 다음 셀로 이동하도록 그리드를 구성합니다. 그렇지 않으면 편집 모드가 아닌 위, 아래, 왼쪽 또는 오른쪽에서 그리드의 enterBehavior
속성을 사용하여 다른 셀로 이동할 수 있습니다.
키보드 탐색
그리드의 activationMode
속성을 Cell
로 설정하면 데이터 그리드에서 다양한 키보드 탐색 옵션이 활성화됩니다. 다음은 각 키 누르기/조합에 대한 설명과 현재 활성화된 셀과 관련된 효과입니다.
- ↑: 한 셀 위로 이동합니다.
- ↓: 한 셀 아래로 이동합니다.
- ←: 현재 행에서만 한 셀을 왼쪽으로 이동합니다.
- →: 현재 행에서만 한 셀을 오른쪽으로 이동합니다.
- Page Up: 그리드를 한 뷰포트 페이지 위로 스크롤합니다.
- Page Down: 그리드를 한 뷰포트 페이지 아래로 스크롤합니다.
- Tab: 활성 셀을 오른쪽의 다음 셀로 이동하거나 해당 행의 마지막 셀에 도달한 경우 다음 행의 가장 왼쪽 셀로 이동합니다.
- Shift + Tab: 활성 셀을 왼쪽의 다음 셀로 이동하거나 해당 행의 첫 번째 셀에 도달한 경우 이전 행의 가장 오른쪽 셀로 이동합니다.
- Ctrl + ↑: 열의 맨 위 셀로 이동합니다.
- Ctrl + ↓: 열의 맨 아래 셀로 이동합니다.
- Ctrl + ←: 행의 가장 왼쪽 셀로 이동합니다.
- Ctrl + →: 행의 가장 오른쪽 셀로 이동합니다.
- Ctrl + Home: 그리드의 왼쪽 상단 셀로 이동합니다.
- Ctrl + End: 그리드의 오른쪽 하단 셀로 이동합니다.