React 계층적 그리드 선택 개요

    React Hierarchical Grid의 Ignite UI for React Select 기능을 사용하면 간단한 마우스 조작을 사용하여 데이터와 쉽게 상호 작용하고 데이터를 조작할 수 있습니다. 다음과 같은 세 가지 선택 모드를 사용할 수 있습니다.

    • 행 선택
    • 셀 선택
    • Column selection

    이 부동산을rowSelection 통해 다음과 같이 지정할 수 있습니다:

    • 없음
    • 하나의
    • 다중 선택

    React Hierarchical Grid Selection Example

    아래 샘플은 세 가지 유형의 세포 선택 행동을 보여줍니다.IgrHierarchicalGrid 아래 버튼을 사용해 사용 가능한 선택 모드를 모두 활성화하세요.

    React Hierarchical Grid Selection Options

    Ignite UI for ReactIgrHierarchicalGrid 구성 요소는 세 가지 선택 모드를 제공합니다 -행 선택, 셀 선택, 그리고 열 선택. 기본적으로 멀티셀 선택 모드만 활성화IgrHierarchicalGrid 되어 있습니다. 선택 모드를 변경하거나 활성화하려면 속성 또는 속성을 사용할rowSelectioncellSelectionselectable 수 있습니다.

    React Hierarchical Grid Row Selection

    속성은rowSelection 다음과 같은 옵션을 지정할 수 있게 해줍니다:

    • None- 행 선택은 해당 조건에서IgrHierarchicalGrid 비활성화됩니다.
    • Single- 한 행만 선택할 수 있습니다.IgrHierarchicalGrid
    • Multiple- 다중 행 선택은 행 선택기를 사용해 +와 같은 CTRL​ ​click 키 조합을 사용하거나, 셀이 집중되면 누 space key를 수 있습니다.
    • MultipleCascade- 이 모드는 계단식 선택 모드로, 사용자가 사용자 상호작용으로 선택한 레코드 아래 트리의 모든 자식을 선택하는 결과를 낳습니다. 이 모드에서 부모의 선택 상태는 자식들의 선택 상태에 전적으로 의존합니다.

    자세한 내용은 행 선택 항목을 참조하세요.

    React Hierarchical Grid Cell Selection

    속성은cellSelection 다음과 같은 옵션을 지정할 수 있게 해줍니다:

    • None- 셀 선택은 비활성화됩니다.IgrHierarchicalGrid
    • Single- 선택 가능한IgrHierarchicalGrid 셀은 단 하나의 셀만 가능합니다.
    • Multiple- 현재 이 상태는 선택의 기본 상태입니다.IgrHierarchicalGrid 다중 셀 선택은 왼쪽 버튼 마우스를 연속으로 클릭한 후 셀 위를 마우스로 드래그하여 사용할 수 있습니다.

    자세한 내용은 셀 선택 항목을 참조하세요.

    React Hierarchical Grid Column Selection

    이 속성은selectable 각 항목IgrColumn 별로 다음과 같은 옵션을 지정할 수 있게 해줍니다. 해당 열 선택은 이 속성이 참 또는 거짓으로 설정되면 각각 활성화되거나 비활성화됩니다.

    이로 인해 다음 세 가지 변형이 발생합니다.

    • 단일 선택 - 열 셀을 마우스로 클릭합니다.
    • 다중 열 선택 - 열 셀을 누르고 CTRL + mouse click 누릅니다.
    • 범위 열 선택 - 홀딩 SHIFT + mouse click 그 사이의 모든 것을 선택합니다.

    자세한 내용은 열 선택 항목으로 이동하세요.

    Known Issues and Limitations

    그리드에 세트가 없primaryKey 고 원격 데이터 시나리오가 활성화되어 있을 때(페이징, 정렬, 필터링, 스크롤 시 원격 서버에 표시할 데이터를 가져오기 요청이 트리거될 때), 데이터 요청이 완료된 후 다음 상태가 줄로 사라집니다:

    • 행 선택
    • 행 확장/축소
    • 행 편집
    • 행 고정

    API References

    Additional Resources

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