Web Components 마스터-디테일 그리드

​IgcGridComponent 구성 요소는 콘텐츠를 확장/축소하여 특정 행에 대한 추가 세부 정보를 표시하는 세부 템플릿 지정을 지원합니다. 지정되면 각 레코드는 마스터 역할을 하며, 확장 시 현재 레코드에 대한 상황별 데이터가 포함된 사용자 정의 가능한 세부 정보 템플릿을 표시합니다.

이 모드는 마스터-디테일 스타일 데이터를 계층 구조로 표시해야 할 때 유용합니다.

Web Components 그리드 마스터-디테일 예제

EXAMPLE

DATA

TS

HTML

CSS

export class CustomersDataItem {
    public constructor(init: Partial<CustomersDataItem>) {
        Object.assign(this, init);
    }

    public ID: string;
    public Company: string;
    public ContactName: string;
    public ContactTitle: string;
    public Address: string;
    public City: string;
    public Region: string;
    public PostalCode: number;
    public Country: string;
    public Phone: string;
    public Fax: string;

}
export class CustomersData extends Array<CustomersDataItem> {
    public constructor(items: Array<CustomersDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CustomersDataItem({ ID: `ALFKI`, Company: `Alfreds Futterkiste`, ContactName: `Maria Anders`, ContactTitle: `Sales Representative`, Address: `Obere Str. 57`, City: `Berlin`, Region: `East`, PostalCode: 12209, Country: `Germany`, Phone: `030-0074321`, Fax: `030-0076545` }),
                new CustomersDataItem({ ID: `ANATR`, Company: `Ana Trujillo Emparedados y helados`, ContactName: `Ana Trujillo`, ContactTitle: `Owner`, Address: `Avda. de la Constitución 2222`, City: `México D.F.`, Region: `South`, PostalCode: 5021, Country: `Mexico`, Phone: `(5) 555-4729`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `ANTON`, Company: `Antonio Moreno Taquería`, ContactName: `Antonio Moreno`, ContactTitle: `Owner`, Address: `Mataderos 2312`, City: `México D.F.`, Region: `South`, PostalCode: 5023, Country: `Mexico`, Phone: `(5) 555-3932`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `AROUT`, Company: `Around the Horn`, ContactName: `Thomas Hardy`, ContactTitle: `Sales Representative`, Address: `120 Hanover Sq.`, City: `London`, Region: `East`, PostalCode: 22000, Country: `UK`, Phone: `(171) 555-7788`, Fax: `(171) 555-6750` }),
                new CustomersDataItem({ ID: `BERGS`, Company: `Berglunds snabbköp`, ContactName: `Christina Berglund`, ContactTitle: `Order Administrator`, Address: `Berguvsvägen 8`, City: `Luleå`, Region: `South`, PostalCode: 17000, Country: `Sweden`, Phone: `0921-12 34 65`, Fax: `0921-12 34 67` }),
                new CustomersDataItem({ ID: `BLAUS`, Company: `Blauer See Delikatessen`, ContactName: `Hanna Moos`, ContactTitle: `Sales Representative`, Address: `Forsterstr. 57`, City: `Mannheim`, Region: `East`, PostalCode: 68306, Country: `Germany`, Phone: `0621-08460`, Fax: `0621-08924` }),
                new CustomersDataItem({ ID: `BLONP`, Company: `Blondesddsl père et fils`, ContactName: `Frédérique Citeaux`, ContactTitle: `Marketing Manager`, Address: `24, place Kléber`, City: `Strasbourg`, Region: `East`, PostalCode: 67000, Country: `France`, Phone: `88.60.15.31`, Fax: `88.60.15.32` }),
                new CustomersDataItem({ ID: `BOLID`, Company: `Bólido Comidas preparadas`, ContactName: `Martín Sommer`, ContactTitle: `Owner`, Address: `C/ Araquil, 67`, City: `Madrid`, Region: `East`, PostalCode: 28023, Country: `Spain`, Phone: `(91) 555 22 82`, Fax: `(91) 555 91 99` }),
                new CustomersDataItem({ ID: `BONAP`, Company: `Bon app'`, ContactName: `Laurence Lebihan`, ContactTitle: `Owner`, Address: `12, rue des Bouchers`, City: `Marseille`, Region: `West`, PostalCode: 13008, Country: `France`, Phone: `91.24.45.40`, Fax: `91.24.45.41` }),
                new CustomersDataItem({ ID: `BOTTM`, Company: `Bottom-Dollar Markets`, ContactName: `Elizabeth Lincoln`, ContactTitle: `Accounting Manager`, Address: `23 Tsawassen Blvd.`, City: `Tsawassen`, Region: `BC`, PostalCode: 28000, Country: `Canada`, Phone: `(604) 555-4729`, Fax: `(604) 555-3745` }),
                new CustomersDataItem({ ID: `BSBEV`, Company: `B's Beverages`, ContactName: `Victoria Ashworth`, ContactTitle: `Sales Representative`, Address: `Fauntleroy Circus`, City: `London`, Region: `South`, PostalCode: 10000, Country: `UK`, Phone: `(171) 555-1212`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `CACTU`, Company: `Cactus Comidas para llevar`, ContactName: `Patricio Simpson`, ContactTitle: `Sales Agent`, Address: `Cerrito 333`, City: `Buenos Aires`, Region: `East`, PostalCode: 1010, Country: `Argentina`, Phone: `(1) 135-5555`, Fax: `(1) 135-4892` }),
                new CustomersDataItem({ ID: `CENTC`, Company: `Centro comercial Moctezuma`, ContactName: `Francisco Chang`, ContactTitle: `Marketing Manager`, Address: `Sierras de Granada 9993`, City: `México D.F.`, Region: `South`, PostalCode: 5022, Country: `Mexico`, Phone: `(5) 555-3392`, Fax: `(5) 555-7293` }),
                new CustomersDataItem({ ID: `CHOPS`, Company: `Chop-suey Chinese`, ContactName: `Yang Wang`, ContactTitle: `Owner`, Address: `Hauptstr. 29`, City: `Bern`, Region: `East`, PostalCode: 3012, Country: `Switzerland`, Phone: `0452-076545`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `COMMI`, Company: `Comércio Mineiro`, ContactName: `Pedro Afonso`, ContactTitle: `Sales Associate`, Address: `Av. dos Lusíadas, 23`, City: `Sao Paulo`, Region: `SP`, PostalCode: 34000, Country: `Brazil`, Phone: `(11) 555-7647`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `CONSH`, Company: `Consolidated Holdings`, ContactName: `Elizabeth Brown`, ContactTitle: `Sales Representative`, Address: `Berkeley Gardens 12 Brewery`, City: `London`, Region: `South`, PostalCode: 27000, Country: `UK`, Phone: `(171) 555-2282`, Fax: `(171) 555-9199` }),
                new CustomersDataItem({ ID: `DRACD`, Company: `Drachenblut Delikatessen`, ContactName: `Sven Ottlieb`, ContactTitle: `Order Administrator`, Address: `Walserweg 21`, City: `Aachen`, Region: `South`, PostalCode: 52066, Country: `Germany`, Phone: `0241-039123`, Fax: `0241-059428` }),
                new CustomersDataItem({ ID: `DUMON`, Company: `Du monde entier`, ContactName: `Janine Labrune`, ContactTitle: `Owner`, Address: `67, rue des Cinquante Otages`, City: `Nantes`, Region: `East`, PostalCode: 44000, Country: `France`, Phone: `40.67.88.88`, Fax: `40.67.89.89` }),
                new CustomersDataItem({ ID: `EASTC`, Company: `Eastern Connection`, ContactName: `Ann Devon`, ContactTitle: `Sales Agent`, Address: `35 King George`, City: `London`, Region: `East`, PostalCode: 41000, Country: `UK`, Phone: `(171) 555-0297`, Fax: `(171) 555-3373` }),
                new CustomersDataItem({ ID: `ERNSH`, Company: `Ernst Handel`, ContactName: `Roland Mendel`, ContactTitle: `Sales Manager`, Address: `Kirchgasse 6`, City: `Graz`, Region: `South`, PostalCode: 8010, Country: `Austria`, Phone: `7675-3425`, Fax: `7675-3426` }),
                new CustomersDataItem({ ID: `FAMIA`, Company: `Familia Arquibaldo`, ContactName: `Aria Cruz`, ContactTitle: `Marketing Assistant`, Address: `Rua Orós, 92`, City: `Sao Paulo`, Region: `SP`, PostalCode: 27000, Country: `Brazil`, Phone: `(11) 555-9857`, Fax: `(5) 555-3745` }),
                new CustomersDataItem({ ID: `FISSA`, Company: `FISSA Fabrica Inter. Salchichas S.A.`, ContactName: `Diego Roel`, ContactTitle: `Accounting Manager`, Address: `C/ Moralzarzal, 86`, City: `Madrid`, Region: `East`, PostalCode: 28034, Country: `Spain`, Phone: `(91) 555 94 44`, Fax: `(91) 555 55 93` }),
                new CustomersDataItem({ ID: `FOLIG`, Company: `Folies gourmandes`, ContactName: `Martine Rancé`, ContactTitle: `Assistant Sales Agent`, Address: `184, chaussée de Tournai`, City: `Lille`, Region: `South`, PostalCode: 59000, Country: `France`, Phone: `20.16.10.16`, Fax: `20.16.10.17` }),
                new CustomersDataItem({ ID: `FOLKO`, Company: `Folk och fä HB`, ContactName: `Maria Larsson`, ContactTitle: `Owner`, Address: `Åkergatan 24`, City: `Bräcke`, Region: `East`, PostalCode: 36000, Country: `Sweden`, Phone: `0695-34 67 21`, Fax: `0695 33-4455` }),
                new CustomersDataItem({ ID: `FRANK`, Company: `Frankenversand`, ContactName: `Peter Franken`, ContactTitle: `Marketing Manager`, Address: `Berliner Platz 43`, City: `München`, Region: `East`, PostalCode: 80805, Country: `Germany`, Phone: `089-0877310`, Fax: `089-0877451` }),
                new CustomersDataItem({ ID: `FRANR`, Company: `France restauration`, ContactName: `Carine Schmitt`, ContactTitle: `Marketing Manager`, Address: `54, rue Royale`, City: `Nantes`, Region: `South`, PostalCode: 44000, Country: `France`, Phone: `40.32.21.21`, Fax: `40.32.21.20` }),
                new CustomersDataItem({ ID: `FRANS`, Company: `Franchi S.p.A.`, ContactName: `Paolo Accorti`, ContactTitle: `Sales Representative`, Address: `Via Monte Bianco 34`, City: `Torino`, Region: `East`, PostalCode: 10100, Country: `Italy`, Phone: `011-4988260`, Fax: `011-4988261` }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import { IgcGridMasterDetailContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcGridComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;

        this._bind = () => {
            grid.data = this.customersData;
            grid.detailTemplate = this.webGridMasterDetailTemplate;
        }
        this._bind();
    }

    private _customersData: CustomersData = null;
    public get customersData(): CustomersData {
        if (this._customersData == null)
        {
            this._customersData = new CustomersData();
        }
        return this._customersData;
    }

    public webGridMasterDetailTemplate = (ctx: IgcGridMasterDetailContext) => {
        var data = ctx.implicit;
        return html` <div class="contact-container">
        <span><strong>Name:</strong> ${data.ContactName}</span>
        <br />
        <span><strong>Title:</strong> ${data.ContactTitle}</span>
        <br />
        <span><strong>Company:</strong> ${data.Company}</span>
        <br />
    </div>`;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</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" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        primary-key="ID"
        name="grid"
        id="grid">
            <igc-column
            field="ContactName"
            header="Contact"
            width="250px"
            resizable="false">
            </igc-column>
            <igc-column
            header="Address"
            field="Address"
            editable="true"
            width="250px"
            resizable="false">
            </igc-column>
            <igc-column
            header="Country"
            field="Country">
            </igc-column>
            <igc-column
            header="Region"
            field="Region">
            </igc-column>
            <igc-column
            header="Phone"
            field="Phone">
            </igc-column>
            <igc-column
            header="Fax"
            field="Fax">
            </igc-column>
        </igc-grid>
    </div>
</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コピー

Edit in: Codesandbox

구성

마스터-디테일 모드로 표시되도록 IgcGridComponent 구성하려면 그리드에 대한 템플릿을 지정해야 합니다.

constructor() {
  var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
  this._bind = () => {
    grid.data = this.customersData;
    grid.detailTemplate = this.masterDetailTemplate;
  }
  this._bind();
}
ts

템플릿의 컨텍스트는 마스터 레코드 데이터이므로 마스터 레코드의 값을 세부 템플릿에 표시할 수 있습니다. 예를 들어:

    public masterDetailTemplate = (ctx: IgcGridMasterDetailContext) => {
        var data = ctx.implicit;
        return html` <div class="contact-container">
        <span><strong>Name:</strong> ${data.ContactName}</span> <br/>
        <span><strong>Title:</strong> ${data.ContactTitle}</span> <br/>
        <span><strong>Company:</strong> ${data.CompanyName}</span> <br/>
    </div>`;
    }
ts

API

확장 상태를 제어하기 위한 추가 API 메소드도 공개됩니다.

• expandAll
• collapseAll
• toggleRow
• expandRow
• collapseRow

키보드 탐색

• 세부 정보 행에 초점이 맞춰진 경우:

  • 🡑- 이전 행의 셀에 초점을 맞춰 한 행 위로 이동합니다.
  • 🡓- 한 행 아래로 이동하여 다음 행의 셀에 초점을 맞춥니다.
  • TAB- 포커스 가능한 요소가 있는 경우 템플릿 내의 포커스 가능한 다음 요소로 포커스를 이동할 수 있도록 허용하고, 그렇지 않으면 다음 그리드 행으로 이동합니다.
  • SHIFT + TAB- moves the focus to the previous row.

• 확장기가 있는 데이터 행에 포커스가 있는 경우:

  • ALT + 🡒 또는 ALT +-🡓는 행을 확장합니다.
  • ALT + 🡐 또는 ALT +-🡑는 행을 축소합니다.

알려진 문제 및 제한 사항

알려진 제한 사항	설명
다음 초점 요소가 표시되는 뷰 포트 외부에 있는 경우 사용자 정의 세부 사항 템플릿 내부의 탭 탐색이 마스터 그리드 스크롤 위치를 업데이트하지 못할 수 있습니다.	사용자 정의 세부 템플릿 내부의 탭 탐색은 브라우저에 달려 있습니다.
세부정보 템플릿은 Excel로 내보내지지 않습니다.	세부 정보 템플릿에는 모든 유형의 콘텐츠가 포함될 수 있으므로 기본적으로 Excel로 내보낼 수 없습니다.
검색 기능은 세부 정보 템플릿의 요소를 강조 표시하지 않습니다.

API 참조

• IgcGridComponent
• IgcColumnComponent
• HierarchicalGridRow