Blazor Grid 열 선택 개요

    The Blazor Grid Column Selection feature in Ignite UI for Blazor offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the ColumnSelection input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations.

    Blazor Grid Column Selection Example

    The sample below demonstrates the three types of IgbGrid's column selection behavior. Use the column selection dropdown below to enable each of the available selection modes.

    * 연락처 제목, 도시 및 주소 열은 열 선택이 비활성화되어 있습니다.

    Basic Usage

    The column selection feature can be enabled through the ColumnSelection input, which takes GridSelectionMode values.

    상호 작용

    The default selection mode is None. If set to Single or Multiple, all of the presented columns will be Selectable. With that being said, in order to select a column, we just need to click on one, which will mark it as Selected. If the column is not selectable, no selection style will be applied on the header, while hovering.

    [!Note] The Multi Column Headers feature does not reflect on the Selectable input. The ColumnGroupComponent is Selectable, if at least one of its children has the selection behavior enabled. In addition, the component is marked as Selected if all of its Selectable descendants are Selected.

    * 국가 정보 열 그룹에서는 도시 및 우편번호 열만 선택할 수 있습니다.

    Keyboard Combinations

    [!Note] The keyboard combinations are available only when the grid ColumnSelection input is set to multiple.

    ​열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.

    • 다중 열 선택 - 홀딩 Ctrl 키 + 클릭 모든 선택 헤더 셀.
    • 범위 열 선택 - 보류 교대 + 클릭 모두 선택합니다. 선택 그 사이에 열이 있습니다.

    API Manipulations

    The API provides some additional capabilities when it comes to the non-visible columns such that, every hidden column could be marked as Selected by setting the corresponding setter.

    [!Note] The above statement also applies to the ColumnGroupComponent, except that when the Selected property is changed it changes the state of its descendants.

    API 조작에 관한 자세한 내용은 API 참조 섹션에서 확인할 수 있습니다.

    Styling

    In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

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

    그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

    .grid {
    --ig-grid-row-selected-background: #0062A3;
    --ig-grid-row-selected-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
    --ig-grid-header-selected-text-color: #ecaa53;
    --ig-grid-header-selected-background: #0062A3;
    --ig-grid-row-selected-hover-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
}

    Demo

    API References

    열 선택 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.

    IgbGrid properties:

    IgbColumn properties:

    IgbColumnGroup properties:

    IgbGrid events:

    • OnColumnsSelectionChange

    Additional Resources

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