Blazor Grid 열 선택 개요

    Ignite UI for Blazor의 Blazor Grid Column Selection 기능은 한 번의 클릭으로 전체 열을 선택하고 강조 표시하는 간소화되고 Excel과 유사한 방법을 제공합니다. columnSelection 입력을 통해 활성화할 수 있습니다. 풍부한 API 덕분에 이 기능을 사용하면 선택 상태를 쉽게 조작하고, 선택한 분수에서 데이터를 추출하고, 데이터 분석 작업을 수행하고, 시각화할 수 있습니다.

    Blazor Grid 열 선택 예제

    아래 샘플은 IgbGrid열 선택 동작의 세 가지 유형을 보여줍니다. 사용 가능한 각 선택 모드를 활성화하려면 아래 열 선택 드롭다운을 사용하세요.

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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    기본 사용법

    열 선택 기능은 다음을 통해 활성화할 수 있습니다. ColumnSelection 입력, 소요되는 GridSelectionMode 가치.

    상호 작용

    기본 선택 모드는 None 입니다. Single 또는 Multiple으로 설정하면 표시되는 모든 열이 Selectable 집니다. 즉, 열을 선택하려면 하나를 클릭하기만 하면 됩니다. 그러면 해당 열이 Selected로 표시됩니다. 열을 선택할 수 없는 경우 마우스를 가져가는 동안 헤더에 선택 스타일이 적용되지 않습니다.

    다중 열 머리글 기능은 선택 가능한 입력에 반영되지 않습니다. ColumnGroupComponent는 하위 항목 중 하나 이상이 선택 동작을 활성화한 경우 선택 가능합니다. 또한 선택 가능한 하위 항목이 모두 선택되면 구성 요소가 선택됨으로 표시됩니다.

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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    키보드 조합

    키보드 조합은 그리드 ColumnSelection 입력이 다중으로 설정된 경우에만 사용할 수 있습니다.

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

    • 다중 열 선택 - 보유 Ctrl 키 + 딸깍 하는 소리선택 가능 헤더 셀.
    • 범위 열 선택 -Shift 키를 누른 채 클릭하면 사이에서 선택 가능한 모든 열이 선택됩니다.

    API 조작

    그만큼 API 몇 가지 추가 기능을 제공합니다. 눈에 보이지 않는 열은 모든 숨겨진 열은 다음과 같이 표시될 수 있습니다. Selected 해당 설정을 통해 세터.

    위의 문은 Selected 속성이 변경될 때 해당 하위 항목의 상태가 변경된다는 점을 제외하고 ColumnGroupComponent에도 적용됩니다.

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

    스타일링

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

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

    그런 다음 관련 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;
    }
    css

    데모

    EXAMPLE

    API 참조

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

    IgbGrid properties:

    IgbColumn properties:

    IgbColumnGroup properties:

    IgbGrid events:

    • OnColumnsSelectionChange

    추가 리소스

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