Blazor 계층적 그리드 열 선택 개요
Ignite UI for Blazor의 Blazor 계층적 그리드 열 선택 기능은 한 번의 클릭으로 전체 열을 선택하고 강조 표시하는 간단하고 Excel과 유사한 방법을 제공합니다. 입력을 통해 활성화할 수 있습니다. ColumnSelection
풍부한 API 덕분에 이 기능을 사용하면 선택 상태를 쉽게 조작하고, 선택한 분수에서 데이터 추출, 데이터 분석 작업 및 시각화를 수행할 수 있습니다.
Blazor Hierarchical Grid Column Selection Example
아래 샘플은 세 가지 유형의 IgbHierarchicalGrid
열 선택 동작을 보여 줍니다. 아래의 열 선택 드롭다운을 사용하여 사용 가능한 각 선택 모드를 활성화합니다.
* 사진 및 Debut 에는 열 선택이 비활성화되어 있습니다.
Basic Usage
열 선택 기능은 다음을 통해 활성화할 수 있습니다. ColumnSelection
입력, 소요되는 GridSelectionMode
가치.
상호 작용
기본 선택 모드는 None
입니다. Single
또는 Multiple
으로 설정하면 표시되는 모든 열이 Selectable
집니다. 즉, 열을 선택하려면 하나를 클릭하기만 하면 됩니다. 그러면 해당 열이 Selected
로 표시됩니다. 열을 선택할 수 없는 경우 마우스를 가져가는 동안 헤더에 선택 스타일이 적용되지 않습니다.
[!Note] The Multi Column Headers feature does not reflect on the
Selectable
input. TheColumnGroupComponent
isSelectable
, if at least one of its children has the selection behavior enabled. In addition, the component is marked asSelected
if all of itsSelectable
descendants areSelected
.
* 위치 열 그룹 아래에서는 도시 열만 선택할 수 있습니다.
Keyboard Combinations
[!Note] The keyboard combinations are available only when the grid
ColumnSelection
input is set tomultiple
.
열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.
- 다중 열 선택 - 보유 Ctrl 키 + 딸깍 하는 소리 매 선택 가능 헤더 셀.
- 범위 열 선택 -Shift 키를 누른 채 클릭하면 사이에서 선택 가능한 모든 열이 선택됩니다.
API Manipulations
그만큼 API 몇 가지 추가 기능을 제공합니다. 눈에 보이지 않는 열은 모든 숨겨진 열은 다음과 같이 표시될 수 있습니다. Selected
해당 설정을 통해 세터.
[!Note] The above statement also applies to the
ColumnGroupComponent
, except that when theSelected
property is changed it changes the state of its descendants.
API 조작에 관한 자세한 내용은 API 참조 섹션에서 확인할 수 있습니다.
Styling
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 class
설정해야 합니다.
<IgbHierarchicalGrid class="grid"></IgbHierarchicalGrid>
그런 다음 관련 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가 더 있습니다.
IgbHierarchicalGrid
properties:
IgbColumn
properties:
IgbColumnGroup
properties:
IgbHierarchicalGrid
events:
OnColumnsSelectionChange
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.