Web Components 트리 그리드 행 추가

인IgcTreeGridComponent 라인 행 더하기를 통해 데이터 조작을 편리하게 수행할 수 있는 방법과 Web Components CRUD 연산을 위한 강력한 API를 제공합니다. 그리드 템플릿에서 편집 동작이 활성화된 컴포넌트를IgcActionStrip 추가하고, 행을 마우스로 올리고 제공된 버튼을 사용한 뒤, + +를 눌러 UI를 추가하는 행을 생성하거나, ALT SHIFT ++ +를 눌러 ALT 선택한 행에 자식을 추가하는 UI를 생성합니다.

Web Components Tree Grid Row Adding Example

Row Adding Usage

그다음 다음을 정의한다.IgcTreeGridComponent 바인딩 데이터 소스를 가진 경우,RowEditable true로 설정하고IgcActionStrip 편집 동작이 활성화된 컴포넌트입니다. 그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 Action strip 컨텍스트를 사용할 수 있습니다(이 유형은 버튼이 표시하는 레코드를 미세 조정하는 타입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이 방법은 비슷하게 작동하지만, 맥락으로 사용할 행은 인덱스에 의해 지정됩니다.

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 통해 자동으로 행 추가(add row) 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

행의 텍스트를 맞춤 설정하고 오버레이RowAddTextTemplate를 추가하는 것은 .

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

Styling

행 추가(row adding) UI는 편집 동작의IgcActionStrip 버튼, 편집 편집기 및 오버레이, 그리고 사용자가 새로 추가된 행으로 스크롤할 수 있는 스낵바로 구성됩니다. 이 구성 요소들을 스타일링하려면 해당 주제의 종합 가이드를 참고할 수 있습니다:

API References

RowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
EndEdit
PrimaryKey
IgcTreeGridComponent

Additional Resources

트리 그리드 편집

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