Web Components 계층적 그리드 행 추가

    The Ignite UI for Web Components Row Adding feature in Web Components Hierarchical Grid enables users to input and submit new data records without navigating to a separate form or page. With the IgcHierarchicalGridComponent, users can manipulate data through inline row adding and a powerful API for CRUD operations. Add an IgcActionStrip component with editing actions enabled in the grid's template. After that hover a row and use the provided button. Finally press ALT + + to spawn the row adding UI.

    Web Components Hierarchical Grid Row Adding Example

    Row Adding Usage

    Then define a IgcHierarchicalGridComponent with bound data source, rowEditable set to true and an IgcActionStrip component with editing actions enabled. The AddRow input controls the visibility of the button that spawns the row adding UI.

    <igc-hierarchical-grid id="hGrid" auto-generate="false" primary-key="Debut" row-editable="true">
    <igc-column field="Artist" data-type="String"></igc-column>
    <igc-column field="HasGrammyAward" header="Has Grammy Award?" data-type="Boolean'">
    </igc-column>
    <igc-column field="Debut" data-type="Number"></igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="Number"></igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="Number"></igc-column>

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

    <igc-row-island key="Albums" auto-generate="false" primary-key="USBillboard200" row-editable="true">
        <igc-column field="Album" [data-type]="String"></igc-column>
        <igc-column field="LaunchDate" header="Launch Date" data-type="Date"></igc-column>
        <igc-column field="BillboardReview" header="Billboard Review" data-type="Number"></igc-column>
        <igc-column field="USBillboard200" header="US Billboard 200" data-type="Number"></igc-column>
        <igc-row-island key="Songs" auto-generate="false" primary-key="Number" row-editable="true">
            <igc-column field="Number" header="No." data-type="Number"></igc-column>
            <igc-column field="Title" data-type="String"></igc-column>
            <igc-column field="Released" data-type="Date"></igc-column>
            <igc-column field="Genre" data-type="String"></igc-column>

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

        </igc-row-island>

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

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

    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 IgcGridEditingActions input controlling the visibility of the add row button may use the action strip context (which is of type IgcRowType to fine tune which records the button shows for.

    The internal BaseTransactionService is automatically provided for IgcHierarchicalGridComponent. It holds pending cell changes until the row state is submitted or cancelled.

    Start Row Adding Programmatically

    IgcHierarchicalGridComponent allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported.

    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의 기본 위치는 최종 사용자가 행 추가 버튼을 클릭한 행 아래에 있습니다.

    • The IgcHierarchicalGridComponent scrolls to fully display the add row UI automatically.

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

    Behavior

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

    After a new row is added through the row adding UI, its position and/or visibility is determined by the sorting, filtering and grouping state of the IgcHierarchicalGridComponent. In a IgcHierarchicalGridComponent that does not have any of these states applied, it appears as the last record. A snackbar is briefly displayed containing a button the end user may use to scroll the IgcHierarchicalGridComponent to its position if it is not in view.

    Keyboard Navigation

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

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

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

    Feature Integration

    • Any row adding operation will stop if the data view of the IgcHierarchicalGridComponent gets modified. Any changes made by the end user are submitted. Operations that change the data view include but are not limited to sorting, grouping, filtering, paging, etc.

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

    • When spawning the UI for the IgcHierarchicalGridComponent, any child layout currently expanded for a row that the end user clicks the add row button for is collapsed.

    Customizing Row Adding Overlay

    Customizing Text

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

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

    Styling

    The row adding UI comprises the buttons in the IgcActionStrip 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

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