React Tree Grid 열 크기 조정 개요

    React 트리 그리드의 Ignite UI for React 열 크기 조절 기능은 사용자가 열의IgrTreeGrid 너비를 쉽게 조절할 수 있게 해줍니다. 기본적으로 드래그 크기 조정 작업이 작동하는 동안 임시 크기 조정 표시기가 표시됩니다. 여러 가지 크기 조절 옵션이 있습니다 - 픽셀/퍼센트 단위로 열 크기 조절, 열 크기 제한, 더블 클릭 시 열의 자동 크기 조절, 초기화 시 열의 자동 크기 조절 등이 있습니다.

    React Tree Grid Column Resizing Example

    열 크기 조정도 열별 레벨별로 활성화되어 있어,IgrTreeGrid 크기 조절 가능한 열과 크기 조절 불가능한 열을 혼합할 수 있습니다. 이 작업은 의 입력resizable을 통해IgrColumn 이루어집니다.

    <IgrColumn field="ID" resizable={true} width="100px"></IgrColumn>

    컬럼 크기 변경이 이루어질 때 이벤트에 구독ColumnResized​IgrTreeGrid 하여 커스텀 로직을 구현할 수 있습니다. 이전 및 새로운 열 너비IgrColumn와 객체 모두 이벤트 인자를 통해 노출됩니다.

    const onResize = (event: IgrColumnResizeEventArgs) => {
  const col = event.detail.column;
  const pWidth = event.detail.prevWidth;
  const nWidth = event.detail.newWidth;
}

<IgrTreeGrid data={data} autoGenerate={false} primaryKey="ID" foreignKey="ParentID" onColumnResized={onResize}>
    <IgrColumn field="Title" width="100px" resizable={true}></IgrColumn>
    <IgrColumn field="HireDate" width="100px" resizable={true}></IgrColumn>
</IgrTreeGrid>

    Resizing Columns in Pixels/Percentages

    사용자 시나리오에 따라 열 너비는 픽셀, 백분율 또는 두 가지의 혼합으로 정의될 수 있습니다. 이러한 모든 시나리오는 열 크기 조정 기능으로 지원됩니다. 기본적으로 열에 너비가 설정되지 않은 경우 너비가 픽셀 단위로 설정된 사용 가능한 공간에 맞춰집니다.

    이는 다음 구성이 가능함을 의미합니다.

    <IgrTreeGrid data={data} autoGenerate={false} primaryKey="ID" foreignKey="ParentID" onColumnResized={onResize}>
    <IgrColumn field="Title" resizable={true} width="10%"></IgrColumn>
    <IgrColumn field="HireDate" resizable={true} width="100px"></IgrColumn>
    <IgrColumn field="Age" dataType="number" resizable={true}></IgrColumn>
</IgrTreeGrid>

    [!Note] There is a slight difference in the way resizing works for columns set in pixels and percentages.

    픽셀

    너비(픽셀)로 열 크기를 조정하는 작업은 열 크기에서 마우스 이동의 수평 크기를 직접 더하거나 빼는 방식으로 수행됩니다.

    백분율

    너비(%)로 열 크기를 조정할 때 마우스 이동의 수평 크기(픽셀)는 대략 그리드 너비에 대한 백분율 크기로 변환됩니다. 열은 계속 반응하며 향후 그리드 크기 조정은 여전히 열에 반영됩니다.

    Restrict Column Resizing

    최소 및 최대 허용 열의 너비도 설정할 수 있습니다. 이 작업은 의 와minWidth 입력maxWidth을 통해IgrColumn 수행됩니다. 이 경우 크기 조절 인디케이터 드래그 작업은 사용자가minWidth 열을 그리고 정의maxWidth 된 경계 밖으로는 크기 조절할 수 없음을 알려주기 위해 제한됩니다.

    <IgrColumn field="ID" width="100px" resizable={true}
            minWidth="60px" maxWidth="230px"></IgrColumn>

    최소 및 최대 열 너비 값 유형(픽셀 또는 백분율)을 혼합하는 것이 허용됩니다. 최소값과 최대값에 대해 설정된 값이 백분율로 설정되면 각 열 크기는 픽셀과 유사한 정확한 크기로 제한됩니다.

    이는 다음과 같은 구성이 가능함을 의미합니다.

    <IgrColumn field="ID" width="10%" resizable={true}
            minWidth="60px" maxWidth="230px"></IgrColumn>

    또는

    <IgrColumn field="ID" width="100px" resizable={true}
            minWidth="5%" maxWidth="15%"></IgrColumn>

    Auto-Size Columns on Double Click

    각 열은 헤더 오른쪽을 더블 클릭하면 자동으로 크기를 조절 할 수 있으며, 열은 헤더 자체를 포함해 현재 보이는 가장 긴 셀 값으로 크기가 조정됩니다. 이 동작은 기본적으로 활성화되어 있으며, 추가 설정이 필요하지 않습니다. 하지만 해당 열에 설정된 경우 새로운 너비가 그maxWidth 값보다 커지면 열은 자동 크기maxWidth가 되지 않습니다. 이 경우 열은 미리 설정된maxWidth 값에 따라 크기가 조정됩니다.

    노출autosize 된 메서드를 사용IgrColumn 해 열을 동적으로 자동 크기 조절할 수도 있습니다.

    const column = grid.getColumnByName('ID');
column.autosize();

    Auto-Size Columns on Initialization

    각 열은 초기화 시 'auto'로 설정하여width 자동 크기 설정이 가능합니다:

    <IgrColumn width='auto'>

    열이 뷰에서 처음 초기화되면 너비가 표시되는 가장 긴 셀이나 머리글의 크기로 확인됩니다. 표시되는 행 외부에 있는 셀은 포함되지 않습니다.

    이 접근 방식은 초기화 후 자동 크기 조정보다 성능이 더 최적화되어 있으며 특히 많은 수의 열 크기를 자동 조정해야 하는 경우에 권장됩니다.

    Styling

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 크기 조정 핸들의 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <IgrTreeGrid className="grid"></IgrTreeGrid>

    그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

    .grid {
    --ig-grid-resize-line-color: #f35b04;
}

    Demo

    API References

    Additional Resources

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