Web Components 트리 그리드 행 추가

IgcTreeGridComponent 인라인 행 추가를 통해 데이터 조작을 수행하는 편리한 방법과 Web Components CRUD 작업을 위한 강력한 API를 제공합니다. 그리드의 IgcActionStrip 템플릿에서 편집 작업이 활성화된 구성 요소를 추가하고, 행을 마우스로 가리키고 제공된 버튼을 사용하고, + +를 눌러 ALT UI를 추가하는 행을 생성하거나 ALT SHIFT ++를 + 눌러 선택한 행에 대한 자식을 추가하기 위한 UI를 생성합니다.

Web Components Tree Grid Row Adding Example

Row Adding Usage

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

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" row-editable="true">
    <igc-column field="Name" data-type="String"></igc-column>
    <igc-column field="Title" data-type="String"></igc-column>
    <igc-column field="HireDate" data-type="Date"></igc-column>
    <igc-column field="OnPTO" data-type="Boolean" width="130px">
    </igc-column>
    <igc-column field="Age" data-type="Number"></igc-column>
    <igc-action-strip id="actionstrip">
        <igc-grid-editing-actions add-row="true">
        </igc-grid-editing-actions>
    </igc-action-strip>
</igc-tree-grid>

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

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

참고: add row 및 add child 버튼의 가시성을 제어하는 입력은 IgcGridEditingActions 액션 스트립 컨텍스트(버튼이 표시되는 레코드를 미세 조정하는 유형 IgcRowType)를 사용할 수 있습니다.

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

Start Row Adding Programmatically

IgcTreeGridComponent 두 개의 서로 다른 공용 메서드를 사용하여 Add Row UI를 프로그래밍 방식으로 생성할 수 있습니다. 하나는 UI가 생성되어야 하는 행을 지정하기 위해 행 ID를 허용하는 것이고 다른 하나는 인덱스로 작동하는 것입니다. 이러한 메서드를 사용하여 현재 데이터 뷰 내의 아무 곳에나 UI를 생성할 수 있습니다. 페이지를 변경하거나 필터링된 행을 지정하는 것은 지원되지 않습니다.

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

this.treeGrid.beginAddRowById('ALFKI', true);   // Spawns the add row UI to add a child for the row with PK 'ALFKI'
this.treeGrid.beginAddRowById(null);            // Spawns the add row UI as the first record

이 메서드는 beginAddRowByIndex 비슷하게 작동하지만 컨텍스트로 사용할 행은 index에 의해 지정됩니다.

this.treeGrid.beginAddRowByIndex(10, true);   // Spawns the add row UI to add a child for the row at index 10
this.treeGrid.beginAddRowByIndex(null);       // Spawns the add row UI as the first record

Positioning

행 추가 UI의 기본 위치는 최종 사용자가 행 추가 버튼을 클릭한 행 아래에 있습니다.
스크롤하면 IgcTreeGridComponent 행 추가 UI가 자동으로 완전히 표시됩니다.
행 추가 UI의 오버레이는 스크롤 중에 위치를 유지합니다.

Behavior

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

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

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

ALT + SHIFT + + - Enters edit mode for adding a child

ESC는 변경 사항을 제출하지 않고 행 추가 모드를 종료합니다.
Tab 키를 누르면 행의 편집 가능한 한 셀에서 다음 셀로, 가장 오른쪽의 편집 가능한 셀에서 CANCEL 및 DONE 버튼으로 초점을 이동합니다. 완료 버튼을 통한 탐색은 현재 편집된 행 내에서 편집 가능한 가장 왼쪽 셀로 이동합니다.

Feature Integration

의 데이터 뷰 IgcTreeGridComponent가 수정되면 모든 행 추가 작업이 중지됩니다. 최종 사용자가 변경한 모든 내용이 제출됩니다. 데이터 보기를 변경하는 작업에는 정렬, 그룹화, 필터링, 페이징 등이 포함되지만 이에 국한되지는 않습니다.
행 추가 작업이 완료된 후 요약이 업데이트됩니다. 정렬, 필터링 등과 같은 다른 데이터 보기 종속 기능에도 동일하게 적용됩니다.

Customizing Row Adding Overlay

Customizing Text

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

this.grid.rowAddTextTemplate = (ctx: IgcGridEmptyTemplateContext) => {
    return html`Adding Row`;
}

Styling

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

API References

rowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
endEdit
primaryKey
IgcTreeGridComponent

Additional Resources

트리 그리드 편집

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