이 컨트롤은 더 이상 사용되지 않고 그리드 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 새로운 기능은 제공되지 않으며 버그 수정은 우선순위에서 제외됩니다. 코드베이스를 Data Grid로 마이그레이션하는 데 도움이 필요하거나 질문이 있으면 지원팀에 문의하세요.

    Web Components Grid Column Resizing

    Ignite UI for Web Components 열 크기를 조정할 수 있는 기능을 지원하여 각 열의 너비에 따라 열을 표시하는 방법을 유연하게 결정할 수 있습니다.

    Web Components 그리드 열 크기 조정 예제

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    Ignite UI for Web Components DataGrid의 열 크기 조정은 기본적으로 켜져 있으며 그리드의 columnResizingMode 속성을 사용하여 제어할 수 있습니다. 이 속성에는 세 가지 옵션이 있습니다. 각 옵션은 아래에서 설명합니다.

    • Deferred: 기본 옵션입니다. 크기를 조정할 때 열의 크기를 조정할 때 얼마나 커지거나 작아지는지를 보여주는 구분 기호가 나타납니다.
    • Immediate: 크기를 조정할 때 구분 기호가 없습니다. 열의 가장자리를 끌고 그에 따라 크기를 조정하면 열의 너비가 포인터를 따라갑니다.
    • None: 열 크기를 조정할 수 없습니다.

    열 크기 조정이 Deferred로 설정된 경우 표시되는 구분 기호는 그리드의 columnResizingSeparatorBackgroundcolumnResizingSeparatorWidth 속성을 각각 사용하여 색상과 너비에서 수정할 수 있습니다.

    크기 조정 모드가 Deferred 전용으로 설정된 경우 크기가 조정될 때 열에 애니메이션을 적용할 수도 있습니다. 이는 columnResizingAnimationMode 속성을 Interpolate로 설정하여 수행됩니다.

    그리드의 각 열은 개별적으로 크기를 조정할 수 있는지 여부를 결정할 수 있습니다. 특정 열의 크기 조정을 활성화하거나 비활성화하려면 해당 열의 IsResizingEnabled 속성을 설정하면 됩니다.

    별 너비 열의 크기를 조정하면 해당 열이 고정 열로 변경됩니다.

    코드 조각

    다음 코드 조각은 Web Components 데이터 그리드에서 열 크기 조정을 구현하는 방법을 보여줍니다. 이 경우 Street 열은 크기 조정이 불가능합니다. 이 경우 열 크기 조정 구분 기호는 너비가 5픽셀이고 크기 조정이 가능한 열은 크기 조정 시 애니메이션이 적용됩니다.

    import { ColumnResizingMode } from 'igniteui-webcomponents-grids';
    import { ColumnResizingAnimationMode } from 'igniteui-webcomponents-grids';
    ts
    <igc-data-grid id="grid"
        auto-generate-columns="false"
        height="500px"
        width="500px"
        column-resizing-mode="Deferred"
        column-resizing-animation-mode="Interpolate"
        column-moving-separator-width="5" >
        <igc-text-column field="FirstName"></igc-text-column>
        <igc-text-column field="LastName"></igc-text-column>
        <igc-text-column field="Street" is-resizing-enabled=false></igc-text-column>
        <igc-text-column field="City"></igc-text-column>
    </igc-data-grid>
    html
    let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
    grid1.dataSource = data;
    ts
    Ignite UI for Web Components | CTA 배너

    API 참조