Angular 계층형 그리드에 행 추가

계층적 그리드는 인라인 행 추가와 Angular CRUD 작업을 위한 강력한 API를 통해 데이터 조작을 수행하는 편리한 방법을 제공합니다. 그리드 템플릿에서 편집 작업이 활성화된 Action Strip 구성 요소를 추가하고, 행에 마우스를 놓고 제공된 버튼을 사용하거나 ALT + +를 눌러 행 추가 UI를 생성합니다.

Angular Hierarchical Grid Row Adding Example

다음 샘플은 계층적 그리드에 기본 행 추가를 활성화하는 방법을 보여줍니다. 셀 값을 변경한 다음 동일한 행의 다른 셀을 클릭하거나 탐색하면 완료 버튼을 사용하여 확인하거나 취소 버튼을 사용하여 삭제될 때까지 행 값이 업데이트되지 않습니다.

Row Adding Usage

시작하려면 IgxHierarchicalGridModule에서 app.module.ts 파일:

// app.module.ts

...
import { IgxHierarchicalGridModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxHierarchicalGridModule],
    ...
})
export class AppModule {}

그런 다음 바인딩된 데이터 소스와 rowEditable true로 설정된 계층적 그리드와 편집 작업이 활성화된 Action Strip 구성 요소를 정의합니다. addRow 입력은 행 추가 UI를 생성하는 버튼의 가시성을 제어합니다.

<igx-hierarchical-grid igxPreventDocumentScroll [data]="localdata"
    [autoGenerate]="false" [primaryKey]="'Debut'" [rowEditable]="true">
    <igx-column field="Artist" [dataType]="'string'"></igx-column>
    <igx-column field="HasGrammyAward" header="Has Grammy Award?" [dataType]="'boolean'">
    </igx-column>
    <igx-column field="Debut" dataType="number"></igx-column>
    <igx-column field="GrammyNominations" header="Grammy Nominations" dataType="number"></igx-column>
    <igx-column field="GrammyAwards" header="Grammy Awards" dataType="number"></igx-column>

    <igx-action-strip #actionstrip1>
        <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
    </igx-action-strip>

    <igx-row-island [key]="'Albums'" [autoGenerate]="false" [primaryKey]="'USBillboard200'" [rowEditable]="true">
        <igx-column field="Album" [dataType]="'string'"></igx-column>
        <igx-column field="LaunchDate" header="Launch Date" [dataType]="'date'"></igx-column>
        <igx-column field="BillboardReview" header="Billboard Review" dataType="number"></igx-column>
        <igx-column field="USBillboard200" header="US Billboard 200" dataType="number"></igx-column>
        <igx-row-island [key]="'Songs'" [autoGenerate]="false" [primaryKey]="'Number'" [rowEditable]="true">
            <igx-column field="Number" header="No." dataType="number"></igx-column>
            <igx-column field="Title" [dataType]="'string'"></igx-column>
            <igx-column field="Released" [dataType]="'date'"></igx-column>
            <igx-column field="Genre" [dataType]="'string'"></igx-column>

            <igx-action-strip #actionstrip3>
                <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
            </igx-action-strip>

        </igx-row-island>

        <igx-action-strip #actionstrip2>
            <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
        </igx-action-strip>
    </igx-row-island>
</igx-hierarchical-grid>

Note

행 추가 작업에는 기본 키 설정이 필수입니다.

Note

기본 키를 제외한 모든 열은 기본적으로 UI를 추가하는 행에서 편집 가능합니다. 특정 열에 대한 편집을 비활성화하려면 editable 열의 입력을 false로 설정해야 합니다.

Note

행 추가 버튼의 가시성을 제어하는 IgxGridEditingActions 입력은 액션 스트립 컨텍스트(RowType 유형)를 사용하여 버튼에 표시되는 레코드를 미세 조정할 수 있습니다.

Hierarchical Grid에는 내부 IgxBaseTransactionService가 자동으로 제공됩니다. 행 상태가 제출되거나 취소될 때까지 보류 중인 셀 변경 사항을 보유합니다.

Start Row Adding Programmatically

계층적 그리드를 사용하면 두 가지 다른 공용 메서드를 사용하여 행 추가 UI를 프로그래밍 방식으로 생성할 수 있습니다. 하나는 UI가 생성되어야 하는 행을 지정하기 위해 행 ID를 허용하고 다른 하나는 인덱스로 작동합니다. 이러한 메서드를 사용하면 현재 데이터 보기 내 어디에서나 UI를 생성할 수 있습니다. 페이지를 변경하거나 필터링된 행을 지정하는 것은 지원되지 않습니다.

​beginAddRowById 사용하려면 해당 rowID(PK)를 통해 작업의 컨텍스트로 사용할 행을 지정해야 합니다. 그런 다음 메서드는 최종 사용자가 지정된 행에 대한 행 추가 작업 스트립 버튼을 클릭한 것처럼 작동하여 그 아래에 UI를 생성합니다. 첫 번째 매개변수에 null 전달하여 UI가 그리드의 첫 번째 행으로 생성되도록 할 수도 있습니다.

this.grid.beginAddRowById('ALFKI');  // spawns the add row UI under the row with PK 'ALFKI'
this.grid.beginAddRowById(null);     // spawns the add row UI as the first record

​beginAddRowByIndex 메서드는 비슷하게 작동하지만 UI가 생성되어야 하는 인덱스를 지정해야 합니다. 허용되는 값의 범위는 0과 데이터 보기 크기 - 1 사이입니다.

this.grid.beginAddRowByIndex(10);   // spawns the add row UI at index 10
this.grid.beginAddRowByIndex(0);    // spawns the add row UI as the first record

Positioning

• 기본 위치 행 추가 UI는 최종 사용자가 행 추가 버튼을 클릭한 행 아래에 있습니다.

• 계층형 그리드가 스크롤되어 행 추가 UI가 자동으로 완전히 표시됩니다.

• 행 추가 UI의 오버레이는 스크롤 중에 위치를 유지합니다.

Behavior

행 추가 UI는 최종 사용자에게 일관된 편집 환경을 제공하도록 설계되었으므로 행 편집 UI와 동작이 동일합니다. 자세한 내용은 계층적 그리드 행 편집 항목을 참조하세요.

행 추가 UI를 통해 새 행이 추가된 후 해당 행의 위치 및/또는 가시성은 계층형 그리드의 정렬, 필터링 및 그룹화 상태에 따라 결정됩니다. 이러한 상태가 적용되지 않은 계층형 그리드에서는 마지막 레코드로 나타납니다. 최종 사용자가 계층형 그리드가 표시되지 않는 경우 해당 위치로 스크롤하는 데 사용할 수 있는 버튼이 포함된 스낵바가 간략하게 표시됩니다.

Keyboard Navigation

• ALT + +- 행 추가를 위한 편집 모드로 들어갑니다.

• ESC는 변경 사항을 제출하지 않고 행 추가 모드를 종료합니다.

• Tab 키를 누르면 행의 편집 가능한 한 셀에서 다음 셀로, 가장 오른쪽의 편집 가능한 셀에서 CANCEL 및 DONE 버튼으로 초점을 이동합니다. 완료 버튼을 통한 탐색은 현재 편집된 행 내에서 편집 가능한 가장 왼쪽 셀로 이동합니다.

Feature Integration

• 계층적 그리드의 데이터 보기가 수정되면 모든 행 추가 작업이 중지됩니다. 최종 사용자가 변경한 모든 내용이 제출됩니다. 데이터 보기를 변경하는 작업에는 정렬, 그룹화, 필터링, 페이징 등이 포함되지만 이에 국한되지는 않습니다.

• 행 추가 작업이 완료된 후 요약이 업데이트됩니다. 정렬, 필터링 등과 같은 다른 데이터 보기 종속 기능에도 동일하게 적용됩니다.

• 계층적 그리드용 UI를 생성할 때 최종 사용자가 행 추가 버튼을 클릭하는 행에 대해 현재 확장된 모든 하위 레이아웃은 축소됩니다.

Customizing Row Adding Overlay

Customizing Text

​igxRowAddTextDirective 사용하면 오버레이를 추가하는 행의 텍스트를 사용자 정의할 수 있습니다.

<ng-template igxRowAddText>
	Adding Row
</ng-template>

Customizing Buttons

​igxRowEditActionsDirective 사용하면 행 편집 오버레이의 버튼을 사용자 정의할 수 있습니다. 버튼을 키보드 탐색의 일부로 사용하려면 각 버튼에 igxRowEditTabStopDirective가 있어야 합니다.

<ng-template igxRowEditActions let-endRowEdit>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>

Note

​igxRowEditActions 지시어를 사용하면 오버레이 버튼 편집 및 추가에 대한 편집 작업이 변경됩니다.

Remote scenarios

대부분의 원격 데이터 시나리오에서 기본 키 할당은 서버 생성 요청 시 발생합니다. 이 경우 클라이언트에 추가된 레코드는 서버의 데이터베이스에 저장될 때까지 최종 기본 키 값을 갖지 않습니다. 이 경우 계층적 그리드에서 이 업데이트를 처리하는 권장 방법은 다음과 같습니다.

• 계층적 그리드가 트랜잭션을 사용하지 않는 경우.

  생성 요청이 성공적으로 완료되고 추가된 레코드 데이터가 반환되면 로컬 데이터 레코드 인스턴스에서 해당 레코드의 ID를 바꿀 수 있습니다.

• 계층적 그리드가 트랜잭션을 사용하는 경우.

  생성 요청 또는 일괄 업데이트 요청이 성공적으로 완료되고 추가된 레코드 인스턴스(db 생성 ID 포함)가 반환되면 관련 ADD 트랜잭션은 명확한 API 메서드를 사용하여 트랜잭션 로그에서 지워야 합니다. 이는 로컬 트랜잭션에 생성된 ID 필드가 있기 때문에 필요합니다. 이 필드는 데이터베이스에서 생성된 것과 다를 수 있으므로 지워야 합니다. 그런 다음 로컬 데이터 인스턴스에 대한 응답으로 전달된 레코드를 추가할 수 있습니다.

이렇게 하면 원격으로 생성된 ID가 항상 로컬 데이터에 반영되고 후속 업데이트/삭제 작업이 올바른 레코드 ID를 대상으로 하게 됩니다.

스타일링

행 추가 UI는 IgxActionStrip 편집 작업의 버튼, 편집 편집기 및 오버레이, 최종 사용자가 새로 추가된 행으로 스크롤할 수 있는 스낵바로 구성됩니다. 이러한 구성 요소의 스타일을 지정하려면 해당 항목의 포괄적인 가이드를 참조할 수 있습니다.

• 계층적 그리드 행 편집
• IgxSnackbar
• IgxActionStrip

API References

• 행편집 가능
• onRowEditEnter
• onRowEdit
• 행편집완료
• onRowEdit취소
• end편집
• 기본 키
• IgxHierarchicalGridComponent
• IgxActionStrip구성 요소
• IgxGridEditingActionsComponent

Additional Resources

• 계층적 그리드 개요
• 계층적 그리드 편집
• 계층적 그리드 트랜잭션

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub