Angular 계층형 그리드에 행 추가

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

    Angular Hierarchical Grid Row Adding Example

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

    Row Adding Usage

    To get started import the IgxHierarchicalGridModule in the app.module.ts file:

    // app.module.ts

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

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

    Then define a Hierarchical Grid with bound data source and rowEditable set to true and an Action Strip component with editing actions enabled. The addRow input controls the visibility of the button that spawns the row adding 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

    Every column excluding the primary key one is editable in the row adding UI by default. If you want to disable editing for a specific column, then you have to set the editable column's input to false.

    Note

    The IgxGridEditingActions input controlling the visibility of the add row button may use the action strip context (which is of type RowType) to fine tune which records the button shows for.

    The internal IgxBaseTransactionService is automatically provided for Hierarchical Grid. It holds pending cell changes until the row state is submitted or cancelled.

    Start Row Adding Programmatically

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

    Using beginAddRowById requires you to specify the row to use as context for the operation by its rowID (PK). The method then functions as though the end-user clicked on the add row action strip button for the specified row, spawning the UI under it. You can also make the UI spawn as the very first row in the grid by passing null for the first parameter.

    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

    The beginAddRowByIndex method works similarly but requires you to specify the index at which the UI should spawn. Allowed values range between 0 and the size of the data view - 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

    Customizing the text of the row adding overlay is possible using the igxRowAddTextDirective.

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

    Customizing Buttons

    Customizing the buttons of the row editing overlay is possible using the igxRowEditActionsDirective. If you want the buttons to be part of the keyboard navigation, then each on of them should have the 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

    Using igxRowEditActions directive will change edit actions for both editing and adding overlay buttons.

    Remote scenarios

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

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

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

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

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

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

    스타일링

    The row adding UI comprises the buttons in the IgxActionStrip editing actions, the editing editors and overlay, as well as the snackbar which allows end users to scroll to the newly added row. To style these components you may refer to these comprehensive guides in their respective topics:

    API References

    Additional Resources

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