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

Ignite UI for Web Components for Web Components의 Web Components 트리 그리드 열 이동 기능을 사용하면 열을 빠르고 쉽게 다시 정렬할 수 있습니다. 이 작업은 Column Moving API를 통해 수행하거나 마우스 또는 터치 제스처를 통해 헤더를 다른 위치로 끌어다 놓아 수행할 수 있습니다. Web Components 트리 그리드에서 고정된 열과 고정되지 않은 열, 그리고 다중 열 헤더에 대해서도 열 이동을 사용하도록 설정할 수 있습니다.

[!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

개요

기둥 이동 기능은 그리드별 수준에서 활성화되며, 이는 이동 가능한 기둥 또는 이동 불가능한 기둥을 IgcTreeGridComponent 가질 수 있음을 의미합니다. 이것은 입력 IgcTreeGridComponent을 moving 통해 수행됩니다.

API

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

moveColumn- 다른 열(대상) 앞이나 뒤로 열을 이동합니다. 첫 번째 매개변수는 이동할 컬럼이고, 두 번째 매개변수는 대상 컬럼입니다. 또한 대상 열 앞이나 뒤에 열을 배치할지 여부를 결정하는 선택적인 세 번째 매개 변수 Position (DropPosition 값을 나타냄)을 허용합니다.

// 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);

열 이동 기능을 사용할 때 작업이 성공하면 ColumnMovingEnd 이벤트가 발생합니다. 또한 끌어서 놓기 기능과 비교할 때 열 이동 기능을 사용하려면 moving 속성을 true로 설정할 필요가 없습니다.

이벤트

열의 끌어서 놓기 작업을 탭하기 위한 수단을 제공하기 위해 열 이동과 관련된 여러 이벤트가 있습니다. 이는 ColumnMovingStart, ColumnMoving 및 ColumnMovingEnd 입니다.

를 구독할 수 있습니다. ColumnMovingEnd의 이벤트 IgcTreeGridComponent 열을 새 위치로 놓을 때 일부 사용자 지정 논리를 구현합니다. 예를 들어, 삭제를 취소할 수 있습니다. 범주 열 뒤의 전년 대비 변동률(%) 다음 코드 스니펫의 열입니다.

<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 포럼
• Ignite UI for Web Components GitHub