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

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

구성

마스터-디테일 모드로 표시되도록 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

키보드 탐색

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

  • 🡑- 이전 행의 셀에 초점을 맞춰 한 행 위로 이동합니다.
  • 🡓- 한 행 아래로 이동하여 다음 행의 셀에 초점을 맞춥니다.
  • 탭- 초점을 맞출 수 있는 요소가 있는 경우 템플릿 내에서 초점을 맞출 수 있는 다음 요소로 초점을 이동할 수 있고, 그렇지 않으면 다음 그리드 행으로 이동할 수 있습니다.
  • Shift + Tab- 포커스를 이전 행으로 이동합니다.

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

  • Alt + 🡒 or Alt + 🡓 - expands the row.
  • Alt + 🡐 or Alt + 🡑 - collapses the row.

알려진 문제 및 제한 사항

알려진 제한 사항	설명
다음 초점 요소가 표시되는 뷰 포트 외부에 있는 경우 사용자 정의 세부 사항 템플릿 내부의 탭 탐색이 마스터 그리드 스크롤 위치를 업데이트하지 못할 수 있습니다.	사용자 정의 세부 템플릿 내부의 탭 탐색은 브라우저에 달려 있습니다.
세부정보 보기 내에서 그리드를 템플릿으로 만들 때<igc-column> 정의에 따라 상위 그리드도 해당 열을 렌더링합니다.	중첩된 그리드에 대해 autoGenerate=true를 사용하면 이 문제를 피할 수 있습니다. 해당 열의 일부 측면을 수정해야 하는 경우ColumnInit 이벤트를 사용할 수 있습니다.
세부정보 템플릿은 Excel로 내보내지지 않습니다.	세부 정보 템플릿에는 모든 유형의 콘텐츠가 포함될 수 있으므로 기본적으로 Excel로 내보낼 수 없습니다.
검색 기능은 세부 정보 템플릿의 요소를 강조 표시하지 않습니다.

API 참조

• IgcGridComponent
• IgcColumnComponent
• HierarchicalGridRow