Web Components 트리 그리드 열 크기 조정 개요

    Web Components 트리 그리드의 Ignite UI for Web Components 열 크기 조정 기능을 사용하면 사용자가 트리 그리드의 열 IgcTreeGridComponent 너비를 쉽게 조정할 수 있습니다. 기본적으로 드래그 크기 조정 작업이 적용되는 동안 임시 크기 조정 표시기가 표시됩니다. Resizing Columns in Pixels/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, Auto-Size Columns on Initialization과 같은 몇 가지 크기 조정 옵션을 사용할 수 있습니다.

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    열 크기 조정은 열 수준별로 사용하도록 설정되며, 이는 크기 조정이 IgcTreeGridComponent 가능한 열과 크기 조정이 불가능한 열을 혼합할 수 있음을 의미합니다. 이것은 의 IgcColumnComponent 입력을 resizable 통해 수행됩니다.

    <igc-column field="ID" width="100px" resizable="true"></igc-column>
html

    를 구독할 수 있습니다. ColumnResized의 이벤트 IgcTreeGridComponent 열의 크기가 조정될 때 일부 사용자 지정 논리를 구현합니다. 이전 및 새 열 너비와 함께 IgcColumnComponent 객체는 이벤트 인수를 통해 노출됩니다.

    <igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID">
    <igc-column field="Title" width="100px" resizable="true" width="100px"></igc-column>
    <igc-column field="HireDate" width="100px" resizable="true" width="100px"></igc-column>
</igc-tree-grid>
html
    constructor() {
    var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    treeGrid.data = this.data;
    treeGrid.columnResized = this.onResize;
}

public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}
ts

    픽셀/백분율 단위로 열 크기 조정

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

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

    <igc-tree-grid id="data" primary-key="ID" foreign-key="ParentID" auto-generate="false">
    <igc-column field="Title" resizable="true" width="10%"></igc-column>
    <igc-column field="HireDate" resizable="true" width="100px"></igc-column>
    <igc-column field="Age" data-type="Number" resizable="true"></igc-column>
</igc-tree-grid>
html

    픽셀 및 백분율로 설정된 열에 대해 크기 조정이 작동하는 방식에는 약간의 차이가 있습니다.

    픽셀

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

    백분율

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

    열 크기 조정 제한

    허용되는 최소 및 최대 열 너비를 구성할 수도 있습니다. 이것은 의 및 maxWidth 입력을 IgcColumnComponent 통해 minWidth 수행됩니다. 이 경우 크기 조정 표시기 끌기 작업이 제한되어 and maxWidth로 정의된 minWidth 경계 외부에서 열의 크기를 조정할 수 없음을 사용자에게 알립니다.

    <igc-column field="ID" width="100px" resizable="true"
            min-width="60px" max-width="230px"></igc-column>
html

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

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

    <igc-column field="ID" width="10%" resizable="true"
            min-width="60px" max-width="230px"></igc-column>
html

    또는

    <igc-column field="ID" width="100px" resizable="true"
            min-width="5%" max-width="15%"></igc-column>
html

    두 번 클릭 시 열 크기 자동 조정

    헤더의 오른쪽을 두 번 클릭하면 각 열의 크기가 자동으로 조정될 수 있습니다. 열의 크기는 헤더 자체를 포함하여 현재 표시되는 가장 긴 셀 값으로 조정됩니다. 이 동작은 기본적으로 활성화되어 있으며 추가 구성이 필요하지 않습니다. 그러나 해당 열에 maxWidth 설정되어 있고 새 너비가 해당 maxWidth 값을 초과하는 경우 열 크기가 자동으로 조정되지 않습니다. 이 경우 열은 미리 설정된 maxWidth 값에 따라 크기가 조정됩니다.

    또한 exposed autosize method on을 사용하여 동적으로 열 크기를 자동으로 조정할 수도 있습니다 IgcColumnComponent.

    constructor() {
    var id = this.id = document.getElementById('ID') as IgcColumnComponent;
    id.autosize();
}
typescript

    초기화 시 열 자동 크기 조정

    너비를 '자동'으로 설정하여 초기화 시 각 width 크기가 자동으로 조정되도록 설정할 수 있습니다.

    <igc-column width='auto'>
html

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

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    스타일링

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

    <igc-tree-grid class="grid"></igc-tree-grid>
html

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

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

    데모

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    API 참조

    추가 리소스

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