React 계층적 그리드 선택 개요
React Hierarchical Grid의 Ignite UI for React Select 기능을 사용하면 간단한 마우스 조작을 사용하여 데이터와 쉽게 상호 작용하고 데이터를 조작할 수 있습니다. 다음과 같은 세 가지 선택 모드를 사용할 수 있습니다.
- 행 선택
- 셀 선택
- Column selection
rowSelection 속성을 사용하면 다음을 지정할 수 있습니다.
React Hierarchical Grid Selection Example
아래 샘플은 에서 세 가지 유형의 셀 선택 동작을 IgrHierarchicalGrid 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from "@infragistics/igniteui-react-core";
import SingersData from './SingersData.json';
import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from "@infragistics/igniteui-react-layouts";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
const mods: any[] = [
IgrPropertyEditorPanelModule,
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private propertyEditorHierarchicalGrid: IgrPropertyEditorPanel
private propertyEditorHierarchicalGridRef(r: IgrPropertyEditorPanel) {
this.propertyEditorHierarchicalGrid = r;
this.setState({});
}
private cellSelectionEditorHierarchicalGrid: IgrPropertyEditorPropertyDescription
private cellSelectionEditorRowIsland: IgrPropertyEditorPropertyDescription
private hierarchicalGrid: IgrHierarchicalGrid
private hierarchicalGridRef(r: IgrHierarchicalGrid) {
this.hierarchicalGrid = r;
this.setState({});
}
private rowIsland: IgrRowIsland
constructor(props: any) {
super(props);
this.propertyEditorHierarchicalGridRef = this.propertyEditorHierarchicalGridRef.bind(this);
this.webRowIslandCellSelectionChange = this.webRowIslandCellSelectionChange.bind(this);
this.hierarchicalGridRef = this.hierarchicalGridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="options vertical">
<IgrPropertyEditorPanel
ref={this.propertyEditorHierarchicalGridRef}
componentRenderer={this.renderer}
target={this.hierarchicalGrid}
descriptionType="WebHierarchicalGrid"
isHorizontal="true"
isWrappingEnabled="true">
<IgrPropertyEditorPropertyDescription
label="Hierarchical Grid Cell Selection"
propertyPath="CellSelection"
name="CellSelectionEditorHierarchicalGrid"
valueType="EnumValue">
</IgrPropertyEditorPropertyDescription>
<IgrPropertyEditorPropertyDescription
label="Row Island Cell Selection"
propertyPath=""
name="CellSelectionEditorRowIsland"
valueType="EnumValue"
dropDownNames={["None", "Single", "Multiple", "MultipleCascade"]}
dropDownValues={["None", "Single", "Multiple", "MultipleCascade"]}
changed={this.webRowIslandCellSelectionChange}>
</IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>
</div>
<div className="container fill">
<IgrHierarchicalGrid
autoGenerate={false}
data={this.singersData}
primaryKey="ID"
id="hierarchicalGrid"
ref={this.hierarchicalGridRef}>
<IgrColumn
field="Artist"
header="Artist"
dataType="string">
</IgrColumn>
<IgrColumn
field="HasGrammyAward"
header="Has Grammy Award"
dataType="boolean">
</IgrColumn>
<IgrColumn
field="Debut"
header="Debut"
dataType="number">
</IgrColumn>
<IgrColumn
field="GrammyNominations"
header="Grammy Nominations"
dataType="number"
hasSummary={true}>
</IgrColumn>
<IgrColumn
field="GrammyAwards"
header="Grammy Awards"
dataType="number"
hasSummary={true}>
</IgrColumn>
<IgrRowIsland
childDataKey="Albums"
autoGenerate={false}>
<IgrColumn
field="Album"
header="Album"
dataType="string">
</IgrColumn>
<IgrColumn
field="LaunchDate"
header="Launch Date"
dataType="date">
</IgrColumn>
<IgrColumn
field="BillboardReview"
header="Billboard Review"
dataType="string">
</IgrColumn>
<IgrColumn
field="USBillboard200"
header="US Billboard 200"
dataType="string">
</IgrColumn>
</IgrRowIsland>
</IgrHierarchicalGrid>
</div>
</div>
);
}
private _singersData: any[] = SingersData;
public get singersData(): any[] {
return this._singersData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebHierarchicalGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webRowIslandCellSelectionChange(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
const rowIsland = document.getElementsByTagName("igc-row-island")[0] as IgrRowIsland;
rowIsland.cellSelection = args.newValue.toLocaleLowerCase();
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
React Hierarchical Grid Selection Options
Ignite UI for React IgrHierarchicalGrid 구성 요소는 세 가지 선택 모드를 제공합니다. 행 선택, 셀 선택 그리고 열 선택. 기본적으로만 다중 셀 선택 모드는 에서 활성화됩니다. IgrHierarchicalGrid. 선택 모드를 변경/활성화하려면 다음을 사용할 수 있습니다. rowSelection, cellSelection 또는 selectable 속성.
React Hierarchical Grid Row Selection
rowSelection 속성을 사용하면 다음 옵션을 지정할 수 있습니다.
MultipleCascade- 계단식 선택 모드로, 사용자가 사용자 상호 작용으로 선택하는 레코드 아래의 트리에서 모든 자식을 선택합니다. 이 모드에서 부모의 선택 상태는 전적으로 자식의 선택 상태에 따라 달라집니다.
자세한 내용은 행 선택 항목을 참조하세요.
React Hierarchical Grid Cell Selection
속성 cellSelection 사용하면 다음 옵션을 지정할 수 있습니다.
자세한 내용은 셀 선택 항목을 참조하세요.
React Hierarchical Grid Column Selection
selectable 속성을 사용하면 각 IgrColumn에 대해 다음 옵션을 지정할 수 있습니다. 이 속성이 각각 true 또는 false로 설정된 경우 해당 열 선택이 활성화되거나 비활성화됩니다.
이로 인해 다음 세 가지 변형이 발생합니다.
- 단일 선택 - 열 셀을 마우스로 클릭합니다.
- 다중 열 선택 -Ctrl + 마우스를 누른 채 열 셀을 클릭합니다.
- 범위 열 선택 -Shift 키를 누른 채 마우스를 클릭하면 그 사이의 모든 항목이 선택됩니다.
자세한 내용은 열 선택 항목으로 이동하세요.
Known Issues and Limitations
그리드에 primaryKey 설정되지 않고 원격 데이터 시나리오가 활성화된 경우(그리드에 표시할 데이터를 검색하기 위해 원격 서버에 대한 페이징, 정렬, 필터링, 스크롤 트리거 요청 시) 행은 데이터 이후 다음 상태를 잃습니다. 요청이 완료되었습니다:
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
