Blazor Grid 열 선택 개요
Ignite UI for Blazor의 Blazor 격자 열 선택 기능은 한 번의 클릭으로 전체 열을 선택하고 강조 표시할 수 있는 간소화되고 엑셀과 유사한 방식을 제공합니다. 입력을ColumnSelection 통해 활성화할 수 있습니다. 풍부한 API 덕분에 선택 상태 조작, 선택된 분수에서 데이터 추출, 데이터 분석 작업 및 시각화가 용이합니다.
Blazor Grid Column Selection Example
아래 샘플은 세IgbGrid 가지 유형의 열 선택 동작을 보여줍니다. 아래 컬럼 선택 드롭다운을 사용하여 각 선택 모드를 활성화하세요.
* 연락처 제목, 도시 및 주소 열은 열 선택이 비활성화되어 있습니다.
Basic Usage
열 선택 기능은 다음으로 활성화할 수 있습니다.ColumnSelection 입력은 다음을GridSelectionMode 값.
상호 작용
기본 선택 모드는 다음과 같습니다None. 또는Single로 설정Multiple 하면 제시된 모든 열이Selectable 즉, 열을 선택하려면 하나의 열을 클릭하면 표시됩니다.Selected 열이 선택 불가능하면, 마우스를 올리는 동안 헤더에 선택 스타일이 적용되지 않습니다.
Note
다중 열 헤더 기능은 입력에Selectable 반영되지 않습니다.ColumnGroupComponentSelectable 즉, 적어도 한 자식 중 하나가 선택 동작이 활성화되어 있다면 그렇습니다. 또한, 이 구성 요소는 모든Selected 후손이 마치 그런Selectable 것처럼 표시Selected 됩니다.
* 국가 정보 열 그룹에서는 도시 및 우편번호 열만 선택할 수 있습니다.
Keyboard Combinations
Note
키보드 조합은 그리드ColumnSelection 입력이 설정multiple 되어 있을 때만 사용할 수 있습니다.
열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.
- 다중 열 선택 - 홀딩 Ctrl 키 + 클릭 모든 선택 헤더 셀.
- 범위 열 선택 - 보류 교대 + 클릭 모두 선택합니다. 선택 그 사이에 열이 있습니다.
API Manipulations
그 API 추가 기능을 제공합니다. 비가시적 열을 사용하여 모든 숨겨진 열은 다음과 같이 표시할 수 있습니다.Selected 해당 세터.
Note
위의 진술은 속성이 변경되면 그 후손들의 상태가 변한다는 점에서 해당ColumnGroupComponentSelected 성격에도 적용됩니다.
API 조작에 관한 자세한 내용은 API 참조 섹션에서 확인할 수 있습니다.
Styling
미리 정의된 테마 외에도, 일부 사용 가능한 CSS 속성을 설정하여 그리드를 추가로 맞춤화할 수 있었습니다. 색상을 바꾸고 싶다면, 먼저 그리드에 a를 설정class 해야 합니다:
<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
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.