트리 그리드 열 재정렬 및 이동

Ignite UI for Web Components의 Web Components Tree Grid Column Moving 기능을 사용하면 빠르고 쉽게 열을 재정렬할 수 있습니다. 이는 Column Moving API를 통해 수행하거나 마우스나 터치 제스처를 통해 헤더를 다른 위치로 끌어서 놓아서 수행할 수 있습니다. Web Components Tree Grid에서 고정 및 고정 해제된 열과 다중 열 헤더에 대한 열 이동을 활성화할 수 있습니다.

[!Note] Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns.

[!Note] If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the draggable attribute set to false!

[!Note] If the pinned area exceeds its maximum allowed width (80% of the total IgcTreeGridComponent width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area.

public headerTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
    `;
}

Web Components Tree Grid Column Moving Overview Example

개요

Column moving feature is enabled on a per-grid level, meaning that the IgcTreeGridComponent could have either movable or immovable columns. This is done via the Moving input of the IgcTreeGridComponent.

API

끌어서 놓기 기능 외에도 열 이동 기능은 프로그래밍 방식으로 열 이동/열 재정렬을 허용하는 API 메서드도 제공합니다.

MoveColumn - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter Position (representing a DropPosition value), which determines whether to place the column before or after the target column.

// Move the ID column after the Name column
const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");

grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);

move- 열을 지정된 가시 인덱스로 이동시킵니다. 전달된 인덱스 매개변수가 유효하지 않거나(음수이거나 열 수를 초과하거나), 열이 다른 그룹 내에 있을 경우 이 인덱스로 이동할 수 없으면 어떤 연산도 수행되지 않습니다.

// Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);

Note that when using the column moving feature, the ColumnMovingEnd event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the Moving property to true.

이벤트

열의 드래그 앤 드롭 작업을 활용할 수 있도록 열이 이동하는 것과 관련된 여러 이벤트가 있습니다. 이것들은 그리ColumnMovingStart 고ColumnMoving.ColumnMovingEnd​

열이 새로운 위치로 이동할 때 이벤트에 구독ColumnMovingEnd​IgcTreeGridComponent 하여 일부 사용자 정의 로직을 구현할 수 있습니다. 예를 들어, 다음 코드 스니펫에서 Change On Year(%)(%) 열에서 카테고리 열을 삭제하는 것을 취소할 수 있습니다.

<igc-tree-grid id="dataGrid" auto-generate="false" moving="true">
    <igc-column field="Category"></igc-column>
    <igc-column field="Change On Year(%)" data-type="Number" ></igc-column>
</igc-tree-grid>

constructor() {
    var dataGrid = this.dataGrid = document.getElementById('dataGrid') as IgcTreeGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnMovingEnd", this.onColumnMovingEnd);
}

public onColumnMovingEnd(event) {
    if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
        event.detail.cancel = true;
    }
}

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다.

일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<igc-tree-grid class="grid"></igc-tree-grid>

그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

.grid {
    --ig-grid-ghost-header-text-color: #f4d45c;
    --ig-grid-ghost-header-background: #ad9d9d;
    --ig-grid-ghost-header-icon-color: #f4d45c;
}

Demo

API References

• IgcColumnComponent
• IgcTreeGridComponent

Additional Resources

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

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components