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

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

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

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

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

        public RenderFragment<IgbColumnTemplateContext> headerTemplate => (context) =>
        {
            return @<IgbIcon Collection="fas" IconName="fa-thumbtack" draggable="false" @onclick="() => onClick()"></IgbIcon>;
        };
    razor

    Blazor 트리 그리드 열 이동 개요 예

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    개요

    열 이동 기능은 그리드별 수준에서 활성화됩니다. 즉, IgbTreeGrid 에는 이동 가능하거나 움직일 수 없는 열이 있을 수 있습니다. 이는 IgbTreeGridMoving 입력을 통해 수행됩니다.

    API

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

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

        public async void HandleClick()
        {
            IgbColumn Col1 = await this.grid.GetColumnByVisibleIndexAsync(0);
            IgbColumn Col2 = await this.grid.GetColumnByVisibleIndexAsync(1);
            this.Grid.MoveColumn(Col1,Col2, DropPosition.AfterDropTarget);
        }
    razor

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

        public async void HandleClick()
        {
            IgbColumn Col1 = await this.grid.GetColumnByVisibleIndexAsync(0);
            this.Col1.Move(3);
        }
    razor

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

    이벤트

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

    다음을 구독할 수 있습니다. ColumnMovingEnd의 이벤트 IgbTreeGrid 열이 새 위치로 삭제될 때 일부 사용자 정의 논리를 구현합니다. 예를 들어 삭제를 취소할 수 있습니다. 범주 이후의 열 연도별 변화율(%) 다음 코드 조각의 열입니다.

        <IgbTreeGrid ShowGroupArea="true" @ref='Grid' Width="100%" Height="100%"
                 AllowFiltering=true
                 FilterMode="FilterMode.ExcelStyleFilter"
                 AutoGenerate=true
                 Data=northwindEmployees
                 Moving="true"
                 ColumnMovingEndScript='onColumnMovingEnd'>
        </IgbTreeGrid>
    razor
    igRegisterScript("onColumnMovingEnd", (event) => {
        if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
            event.detail.cancel = true;
        }
    }, false);
    razor

    스타일링

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

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

    <IgbTreeGrid class="grid"></IgbTreeGrid>
    razor

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

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

    데모

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    API 참조

    추가 리소스

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