Blazor 그리드 열 크기 조정 개요

    The Ignite UI for Blazor Column Resizing feature in Blazor Grid allows users to easily adjust the width of the columns of the IgbGrid. By default, they will see a temporary resize indicator while the drag resizing operation is in effect. There are several resizing options available - Resizing Columns in Pixels/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, and Auto-Size Columns on Initialization.

    Blazor Grid Column Resizing Example

    Column resizing is also enabled per-column level, meaning that the IgbGrid can have a mix of resizable and non-resizable columns. This is done via the Resizable input of the IgbColumn.

    <IgbColumn Field="ID" Resizable=true Width="100px"></IgbColumn>

    You can subscribe to the ColumnResized event of the IgbGrid to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the IgbColumn object, are exposed through the event arguments.

    <IgbGrid Data=data AutoGenerate=false ColumnResized="onResize">
    <IgbColumn Field="ID" Resizable=true Width="100px"></IgbColumn>
    <IgbColumn Field="CompanyName" Resizable=true Width="100px"></IgbColumn>
</IgbGrid>

@code {
    private void onResize(IgbColumnResizeEventArgs args)
    {
        IgbColumnType col = args.Detail.Column;
        string pWidth = args.Detail.PrevWidth;
        string nWidth = args.Detail.NewWidth;
    }
}

    Resizing Columns in Pixels/Percentages

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

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

    <IgbGrid Data=data AutoGenerate=false ColumnResized="onResize">
    <IgbColumn Field="ID" Resizable=true Width="10%"></IgbColumn>
    <IgbColumn Field="CompanyName" Resizable=true Width="100px"></IgbColumn>
    <IgbColumn Field="ContactTitle" Resizable=true></IgbColumn>
</IgbGrid>

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

    픽셀

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

    백분율

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

    Restrict Column Resizing

    You can also configure the minimum and maximum allowable column widths. This is done via the MinWidth and MaxWidth inputs of the IgbColumn. In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by MinWidth and MaxWidth.

    <IgbColumn Field="ContactTitle" Resizable=true Width="100px" MinWidth="60px" MaxWidth="230px"></IgbColumn>

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

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

    <IgbColumn Field="ContactTitle" Resizable=true Width="10%" MinWidth="60px" MaxWidth="230px"></IgbColumn>

    또는

    <IgbColumn Field="ID" Resizable=true Width="100px" MinWidth="5%" MaxWidth="15%"></IgbColumn>

    Auto-Size Columns on Double Click

    Each column can be auto sized by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be auto-sized in case MaxWidth is set on that column and the new width exceeds that MaxWidth value. In this case the column will be sized according to preset MaxWidth value.

    You can also auto-size a column dynamically using the exposed Autosize method on IgbColumn.

    @code {
    private IgbGrid gridRef;

    private void AutosizeColumn()
    {
        IgbColumn column = gridRef.Columns.Where((col) => { return col.Field == "ID"; }).FirstOrDefault();
        column.Autosize(false);
    }
}

    Auto-Size Columns on Initialization

    Each column can be set to auto-size on initialization by setting Width to 'auto':

    <IgbColumn Width="auto"></IgbColumn>

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

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

    Styling

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

    <IgbGrid class="grid"></IgbGrid>

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

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

    Demo

    API References

    Additional Resources

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