Web Components 그리드 행 추가

Web Components 그리드의 Ignite UI for Web Components 행 추가 기능을 사용하면 별도의 양식이나 페이지로 이동하지 않고도 새 데이터 레코드를 입력하고 제출할 수 있습니다. 이를 IgcGridComponent 통해 사용자는 인라인 행 추가 및 CRUD 작업을 위한 강력한 API를 통해 데이터를 조작할 수 있습니다. 그리드의 템플릿에서 IgcActionStrip 편집 작업이 활성화된 구성 요소를 추가합니다. 그런 다음 행을 가리키고 제공된 버튼을 사용합니다. 마지막으로 + +를 눌러 ALT UI를 추가하는 행을 생성합니다.

Web Components Grid Row Adding Example

Row Adding Usage

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

<igc-grid id="grid" primary-key="ProductID" auto-generate="false" row-editable="true">
    <igc-column field="ProductID" header="Product ID" data-type="Number"></igc-column>
    <igc-column field="ReorderLevel" header="ReorderLever" data-type="Number"></igc-column>
    <igc-column field="ProductName" header="ProductName" data-type="String"></igc-column>
    <igc-column field="UnitsInStock" header="UnitsInStock" data-type="Number"></igc-column>
    <igc-column field="OrderDate" data-type="Date"></igc-column>
    <igc-column field="Discontinued" header="Discontinued" data-type="Boolean"></igc-column>

    <igc-action-strip id="actionstrip">
        <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>

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

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

참고: 행 추가 버튼의 가시성을 제어하는 IgcGridEditingActions 입력은 버튼이 표시하는 레코드를 미세 조정하기 위해 IgcRowType 유형인 작업 스트립 컨텍스트를 사용할 수 있습니다.

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

Start Row Adding Programmatically

grid 사용하면 두 가지 다른 공개 메서드를 사용하여 행 추가 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의 기본 위치는 최종 사용자가 행 추가 버튼을 클릭한 행 아래에 있습니다.
The grid scrolls to fully display the add row UI automatically.
행 추가 UI의 오버레이는 스크롤 중에 위치를 유지합니다.

Behavior

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

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

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

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

Feature Integration

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

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
IgcGridComponent

Additional Resources

그리드 편집

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