매쉬업 작성기 > 위젯 > 표준 위젯 > 그리드 위젯 > 데이터 선택 구성
데이터 선택 구성
그리드는 RowSelection 위젯 속성의 구성에 따라 단일 행 및 여러 행 선택 모드를 지원합니다. 기본적으로 행 선택은 비활성화되어 있습니다. SelectedRowsLastClickedRow 위젯 속성을 사용하여 선택한 데이터 행을 매쉬업의 다른 위젯 또는 데이터 서비스에 전달할 수 있습니다. 예를 들어, 꺾은선형 차트 위젯에 표시할 데이터 행을 전달할 수 있습니다. 이러한 속성을 데이터 서비스에 대한 입력으로 사용할 수도 있습니다. 디자인 타임 시 그리드 위젯의 속성 패널에서 선택을 구성할 수 있습니다. 그리드는 직접 클릭을 사용하는 단일 선택 또는 행 선택 열을 사용하는 복수 선택을 지원합니다.
선택 없음(기본값)
기본적으로 그리드 위젯의 데이터 선택은 비활성화되어 있으며 사용자가 행을 클릭하여 선택할 때 가리킨 항목 상태만 표시됩니다.
단일 행 선택
단일 선택을 사용하면 사용자는 그리드에서 행 한 개를 선택할 수 있습니다. 행 내에서 아무 셀이나 클릭하여 행을 선택합니다. 선택한 행이 특정 색상을 사용하여 강조 표시됩니다. 그리드 스타일 속성에서 또는 스타일 테마를 사용하여 이 색상을 변경할 수 있습니다. 선택한 행은 SelectedRows 위젯 속성에 인포테이블로 저장됩니다.
* 
SelectedRows 속성에는 그리드에서 제외된 열의 데이터가 포함됩니다.
여러 행 선택
복수 선택이 활성화되면 선택 열이 그리드 데이터의 왼쪽에 추가됩니다. 머리글 행의 확인란을 사용하여 그리드 내의 모든 데이터를 선택하거나 행 옆에 있는 확인란을 선택하여 단일 행을 선택할 수 있습니다. 그리드 데이터를 선택 상태 기준으로 정렬하려면 열 머리글에서 정렬 버튼을 클릭합니다.
행 미리 선택
다음 두 가지 위젯 속성 중 하나를 사용하여 그리드가 런타임에 표시될 때 그리드에서 기본적으로 선택되는 데이터 행을 지정할 수 있습니다.
DefaultSelectedRows - 2–5와 같은 범위 또는 2,3,6과 같은 쉼표로 구분된 숫자 목록을 지정하는 값을 입력하거나 바인딩하여 그리드에서 데이터 행을 미리 선택합니다. 이 속성은 트리 그리드에 적용되지 않습니다.
SelectedRows - 선택할 데이터 행과 함께 인포테이블을 전달하여 데이터를 미리 선택합니다. 예를 들어, 가로 막대형 차트에 대한 데이터 서비스의 선택한 행 출력 속성을 그리드 위젯의 SelectedRows 입력 속성에 전달할 수 있습니다. 차트의 모든 선택 항목이 그리드에서 강조 표시됩니다.
* 
RowSelection 속성이 없음으로 설정되면 이러한 속성이 선택에 영향을 주지 않습니다. 하나 이상의 행을 선택하려면 RowSelection 속성을 단일 또는 여러로 설정해야 합니다.
ThingWorx 9.3.4 이상에서는 다음 속성을 사용하여 트리 그리드에서 선택을 구성할 수 있습니다.
SelectFocuedItem - 포커스 상자를 이동할 때 포커스가 있는 행 또는 셀이 자동으로 선택됩니다. FocusNavigationMode 속성을 사용하면 포커스 상자를 이동할 때 포커스를 적용할 요소를 구성할 수 있습니다.
IDPathSeperator - 동적으로 로드되는 행을 선택할 때 사용할 특수 문자를 설정합니다. id 열 아래의 행에 ID 경로를 제공할 수 있습니다. 기본 구분 기호는 :;입니다.
트리 그리드에서 동적으로 로드된 행 선택
아직 클라이언트에 로드되지 않은 트리 그리드에서 행을 확장하고 선택하려면 인포테이블에 선택한 행에 대한 행 ID의 전체 경로를 포함하는 IDFieldName 속성이 표시하는 ID 열을 하나 이상 제공합니다. 기본적으로 :; 문자 조합은 경로 구분 기호로 사용되지만 Mashup Builder 또는 JSON 구성 파일에서 IDPathSeparator 속성을 설정하여 변경할 수 있습니다.
예를 들어, ID가 ddd인 행을 선택하려면 다음 ID 값의 열이 있는 인포테이블을 만들어야 합니다.
//aaa:;bbb:;ccc:;ddd.
기본적으로 하위 행을 선택하면 하위 ID만 SelectedRows 인포테이블에 전달됩니다. 선택한 하위의 전체 ID 경로를 포함하려면 IncludeRowExpansionParents 속성을 true로 설정합니다. 선택한 행의 인포테이블이 그리드로 전송되고 나열된 행이 그리드에 의해 아직 로드되지 않은 경우 트리 그리드에서 바인딩된 데이터 서비스에 대한 요청을 자동으로 생성합니다.
그리드의 행 비활성화
그리드 데이터에 그리드에 있는 각 행의 비활성화를 제어하는 인포테이블 열을 추가할 수 있습니다. 그리드의 데이터를 비활성화하려면 다음 단계를 수행합니다.
1. 속성 패널에서 AllowDisabledNodes를 true로 설정합니다.
2. DisabledStateField 속성을 사용하여 비활성화 상태의 데이터가 있는 인포테이블 열을 선택합니다.
트리 그리드에서 비활성화된 상위 행 아래의 하위 행을 비활성화하려면 DisableChildNodes 속성을 활성화합니다.
3. 저장을 클릭한 다음 매쉬업을 봅니다.
비활성화 상태의 데이터는 런타임에 행에 적용됩니다.
선택한 데이터 전달
행 선택이 단일 또는 여러로 설정된 경우 그리드의 SelectedRows 속성을 사용하여 그리드에서 선택한 데이터를 전달할 수 있습니다. 이 속성에는 양방향 바인딩 방향이 있습니다. 이 속성을 출력 또는 입력으로 바인딩할 수 있습니다. 출력 바인딩을 사용하여 그리드 선택을 다른 데이터 서비스 또는 위젯에 전달할 수 있으며, 바인딩 입력으로 위젯 또는 데이터 서비스를 사용하여 행 선택을 제어할 수 있습니다. 행 선택이 비활성화된 그리드에서 데이터를 전달하려면 LastClickedRow 인포테이블 속성을 사용합니다. 이 속성에는 출력 바인딩 방향만 있으므로 이 속성을 사용하여 그리드에서 마지막으로 클릭한 행의 인포테이블 데이터를 전달할 수 있습니다.
행 선택 이벤트에 응답
사용자가 런타임에 행을 선택하거나 클릭하면 RowClicked 이벤트가 트리거됩니다. 단일 또는 복수 선택이 활성화되면 추가 SelectedRowsChanged 이벤트가 생성됩니다. 이러한 이벤트 중 하나를 사용하여 함수 및 위젯 내에서 데이터 서비스 또는 서비스를 실행할 수 있습니다.
도움이 되셨나요?