[!Note] Please note that this control has been deprecated and replaced with the Grid component, 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.

    Web Components 열 유형

    Ignite UI for Web Components 5가지 열 유형과 템플릿 열 유형을 지원하여 Web Components 데이터 그리드에 데이터가 표시되는 방식에 대한 완전한 유연성을 제공합니다. 지원되는 열 유형은 텍스트 열, 숫자 열, 날짜/시간 열, 이미지 열, 콤보박스 및 템플릿입니다.

    각 열은 Field 속성을 Web Components 데이터 그리드에 바인딩된 기본 데이터 원본 항목의 해당 속성 이름으로 설정하여 데이터에 바인딩됩니다.

    Web Components Column Types Example

    Text Column

    Web Components 데이터 그리드는 관련 셀에 서식 있는 텍스트를 표시하는 데 사용됩니다. 문자열 유형의 데이터를 표시하는 데 사용되는 기본 열 유형입니다.

    Numeric Column

    ​IgcNumericColumnComponent는 관련 셀에 서식이 지정된 숫자 값을 표시하는 데 사용되며 셀 내의 소수점 위치 제어 및 분수 표시를 가능하게 합니다.

    DateTime Column

    ​IgcDateTimeColumnComponent는 연관된 셀에 Date 객체를 표시하는 데 사용되며 제어를 통해 Date 객체의 형식을 적절하게 지정할 수 있습니다.

    Image Column

    ​IgcImageColumnComponent는 셀 내의 이미지를 표시하는 데 사용되며 imageStretchOption 옵션을 사용하여 셀에 대한 이미지 늘이기 사용자 정의 옵션을 노출합니다.

    ​ImageResourceType 옵션을 설정하여 이미지의 리소스 유형을 선택할 수도 있습니다.

    ComboBox Column

    ​IgcComboBoxColumnComponent는 최종 사용자가 단일 항목을 선택할 수 있는 드롭다운 목록을 표시하는 데 사용됩니다.

    열의 DataSource 속성을 통해 복잡한 개체의 배열을 사용하여 데이터 바인딩을 수행할 수 있습니다.

    ​textField 속성은 사용자가 선택할 때 표시되는 값을 결정합니다.

    ​valueField 속성은 선택된 기본 데이터 항목의 바인딩된 값을 결정합니다. 이는 개체 목록에 여러 속성이 있는 경우 필요합니다.

    Template Column

    ​IgcTemplateColumnComponent는 셀 템플릿과 함께 사용됩니다. 이를 통해 열의 셀에 사용자 정의 템플릿을 적용할 수 있습니다. 이는 템플릿 열의 CellUpdating 이벤트를 처리하여 수행됩니다.

    ​CellUpdating 이벤트의 인수는 이벤트를 실행하는 IgcTemplateColumnComponent와 IgcTemplateCellUpdatingEventArgs 매개변수를 노출합니다. 이 이벤트 인수 매개변수는 열의 관련 셀 내에 배치될 HTMLDivElement를 반환하는 Content 속성을 노출합니다. 그런 다음 이 div에 새 요소를 추가할 수 있습니다.

    ​IgcTemplateCellUpdatingEventArgs는 TemplateCellInfo 개체를 가져오는 데 사용할 수 있는 CellInfo 속성도 노출합니다. 이 개체는 인덱스, 기본 데이터 항목, 셀 모양 등 셀과 행에 대한 정보를 노출합니다.

    Sparkline Column

    ​IgcTemplateColumnComponent에 Sparkline 구성 요소를 포함하여 더 복잡한 데이터 구조를 표시할 수 있습니다. 이 작업을 수행하는 방법에 대한 자세한 내용은 열 스파크라인 항목을 참조하세요.

    Code Snippet

    다음은 이 주제에 설명된 각 열의 구현을 보여줍니다.

    <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>

    import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcTemplateCellInfo } from 'igniteui-webcomponents-grids';
import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-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 {
 // alert("onAddressCellUpdating");
 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;
  }
}

    다음은 위 열에 사용할 샘플 데이터 소스입니다.

    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];
}

    API References