Blazor 그리드 열 숨기기

    Ignite UI for Blazor Blazor 그리드 도구 모음을 통해 열의 표시 상태를 변경하는 데 사용할 수 있는 열 숨김 UI가 내장되어 있습니다. 개발자는 필요에 따라 페이지 내 어디에서나 열 숨김 UI를 유연하게 정의할 수 있습니다. Blazor 그리드 열 숨기기 기능은 그리드 크기를 줄이고 중복 필드를 탭으로 이동할 필요가 없을 때 특히 유용합니다.

    Blazor Grid Column Hiding Example

    Grid Setup

    IgbGrid 생성하고 이를 데이터에 바인딩하는 것부터 시작해 보겠습니다. 또한 열에 대한 필터링과 정렬을 모두 활성화합니다.

    <IgbGrid Data=northwindEmployees AutoGenerate=false Width="100%" Height="100%" AllowFiltering=true>
        <IgbColumn Field="ID" Sortable=true Hidden=true></IgbColumn>
        <IgbColumn Field="ContactName" Sortable=true Hidden=true></IgbColumn>
        <IgbColumn Field="ContactTitle" Sortable=true></IgbColumn>
        <IgbColumn Field="City"  Sortable=true></IgbColumn>
        <IgbColumn Field="CompanyName" Sortable=true></IgbColumn>
        <IgbColumn Field="Fax" Sortable=true></IgbColumn>
        <IgbColumn Field="Address" Sortable=true></IgbColumn>
        <IgbColumn Field="PostalCode" Sortable=true></IgbColumn>
        <IgbColumn Field="Country" Sortable=true></IgbColumn>
        <IgbColumn Field="Phone" Sortable=true></IgbColumn>
    </IgbGrid>
    

    Toolbar's Column Hiding UI

    내장된 열 숨김 UI는 DropDown에서 IgbGrid의 도구 모음입니다. 이 정확한 드롭다운을 사용하여 열 숨기기 UI를 표시하거나 숨길 수 있습니다.

    이를 위해 우리가 해야 할 일은 IgbGrid 내부에 IgbGridToolbarActionsIgbGridToolbarHiding 모두 설정하는 것뿐입니다. 또한 IgbGridToolbarTitle과 Grid 래퍼의 사용자 정의 스타일을 사용하여 도구 모음에 제목을 추가합니다.

    <IgbGrid Data=northwindEmployees>
        <IgbGridToolbar>
            <IgbGridToolbarActions>
                <IgbGridToolbarHiding></IgbGridToolbarHiding>
            </IgbGridToolbarActions>
        </IgbGridToolbar>
    </IgbGrid>
    

    IgbGrid 도구 모음의 열 숨기기 UI를 사용할 때 몇 가지 유용한 속성을 제공합니다.

    Title 속성을 사용하여 도구 모음의 드롭다운 버튼 안에 표시되는 제목을 설정하겠습니다.

    <IgbGrid Data=northwindEmployees>
        <IgbGridToolbar>
            <IgbGridToolbarActions>
                <IgbGridToolbarHiding @ref=HidingAction Title="Column Hiding"></IgbGridToolbarHiding>
            </IgbGridToolbarActions>
        </IgbGridToolbar>
    </IgbGrid>
    

    Blazor 열 숨기기 예제 섹션의 이 문서 시작 부분에서 위의 코드 결과를 볼 수 있습니다.

    Disable hiding of a column

    간단히 DisableHiding 속성을 true로 설정하면 사용자가 열 숨김 UI를 통해 열을 숨기는 것을 쉽게 방지할 수 있습니다.

    <IgbGrid Data=northwindEmployees AutoGenerate=false>
        <IgbColumn Field="ContactName" Sortable=true DisableHiding=true></IgbColumn>
        <IgbColumn Field="ContactTitle" Sortable=true DisableHiding=true></IgbColumn>
    </IgbGrid>
    

    Styling

    사용 가능한 CSS 변수 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 이를 달성하기 위해 먼저 그리드에 할당할 클래스를 사용합니다.

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

    그런 다음 관련 구성 요소에 대한 관련 CSS 변수를 설정합니다. igx-column-actions 에만 스타일을 적용하므로 그리드의 나머지 부분은 영향을 받지 않습니다.

    .grid  igx-column-actions {
        /* Main Column Actions styles */
        --ig-column-actions-background-color: #292826;
        --ig-column-actions-title-color: #ffcd0f;
    
        /* Checkbox styles */
        --ig-checkbox-tick-color: #292826;
        --ig-checkbox-label-color: #ffcd0f;
        --ig-checkbox-empty-color: #ffcd0f;
        --ig-checkbox-fill-color: #ffcd0f;
    
        /* Input styles */
        --ig-input-group-idle-text-color: white;
        --ig-input-group-filled-text-color: #ffcd0f;
        --ig-input-group-focused-text-color: #ffcd0f;
        --ig-input-group-focused-border-color: #ffcd0f;
        --ig-input-group-focused-secondary-color: #ffcd0f;
    
        /* Buttons styles */
        --ig-button-foreground: #292826;
        --ig-button-background: #ffcd0f;
        --ig-button-hover-background: #404040;
        --ig-button-hover-foreground: #ffcd0f;
        --ig-button-focus-background: #ffcd0f;
        --ig-button-focus-foreground: black;
        --ig-button-focus-visible-background: #ffcd0f;
        --ig-button-focus-visible-foreground: black;
        --ig-button-disabled-foreground: #ffcd0f;
    }
    

    Demo

    API References

    이 기사에서는 IgbGrid 도구 모음에 내장된 열 숨김 UI를 사용하는 방법을 배웠습니다. 열 숨김 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.

    • ColumnActionsComponent

    사용된 관련 API가 포함된 추가 구성요소:

    IgbColumn properties:

    IgbGridToolbar properties:

    • showProgress

    IgbGridToolbar methods:

    IgbGrid events:

    • ColumnVisibilityChanged

    Additional Resources

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