계층형 그리드 열 재정렬 및 이동

    Ignite UI for React의 React Hierarchical Grid Column Moving 기능을 사용하면 빠르고 쉽게 열을 재정렬할 수 있습니다. 이 작업은 Column Moving API를 통해 또는 마우스 또는 터치 제스처를 통해 헤더를 다른 위치로 끌어다 놓아 수행할 수 있습니다. React Hierarchical Grid에서 고정된 열과 고정되지 않은 열, 그리고 Multi-Column Headers에 대해서도 Column Moving을 활성화할 수 있습니다.

    열과 열 그룹 간의 재정렬은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 그룹에 있는 경우에만 허용됩니다. 최상위 열인 경우 열/열 그룹 간 이동이 허용됩니다.

    열 머리글이 템플릿화되어 있고 열 이동이 활성화되어 있거나 해당 열이 그룹화 가능한 경우 템플릿 요소는 draggable 속성을 false로 설정해야 합니다!

    고정된 영역이 최대 허용 너비(총 IgrHierarchicalGrid 너비의 80%)를 초과하는 경우 시각적 단서는 최종 사용자에게 놓기 작업이 금지되어 고정이 불가능하다는 것을 알립니다. 즉, 고정된 영역에 열을 놓을 수 없습니다.

    const headerTemplate = (ctx: IgrCellTemplateContext) => {
    return (
    <>
       <IgrIcon draggable={false} onClick={onClick}></IgrIcon>
    </>
    );
}
tsx

    React 계층형 그리드 열 이동 개요 예제

    EXAMPLE
    TSX
    CSS
    Edit in:

    개요

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

    <IgrHierarchicalGrid moving={true}>
    ...
    <IgrRowIsland moving={true}></IgrRowIsland>
</IgrHierarchicalGrid>
tsx

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

    move- 열을 지정된 표시 인덱스로 이동합니다. 전달된 인덱스 매개변수가 유효하지 않은 경우(음수이거나 열 수를 초과하는 경우) 또는 열이 이 인덱스로 이동할 수 없는 경우(다른 그룹 내에 있는 경우) 작업이 수행되지 않습니다.

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

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

    이벤트

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

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

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

<IgrHierarchicalGrid autoGenerate={false} moving={true} data={data} onColumnMovingEnd={onColumnMovingEnd}>
    <IgrColumn field="Category"></IgrColumn>
    <IgrColumn field="Change On Year(%)" dataType="number"></IgrColumn>
</IgrHierarchicalGrid>
tsx

    스타일링

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

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

    <IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>
tsx

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

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

    데모

    EXAMPLE
    TSX
    CSS
    Edit in:

    API 참조

    추가 리소스

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