그리드 위젯
그리드 위젯을 사용하면 데이터 집합을 그리드 보기로 표시할 수 있습니다. 그리드는 열별로 색을 컨텍스트화하고 셀에서 이미지를 렌더링하는 등 여러 가지 방식으로 데이터를 렌더링합니다. Configure Grid Columns 선택을 사용하여 그리드 위젯의 구성 대화 상자를 통한 상태 서식 적용, 열 머리글, 볼 열, 열 순서를 포함한 기존 렌더링을 구성할 수 있습니다.
그리드에서는 열 머리글을 클릭하여 데이터를 정렬할 수 있을 뿐만 아니라 런타임 환경에서의 열 크기를 조정할 수도 있습니다.
편집 가능 그리드
그리드에는 그리드의 행/열 편집을 허용하는 Configure Grid Columns 옵션 내 및 위젯에 대한 특수 설정도 있습니다. 이를 통해 그리드에서 값을 편집한 다음 전체 콘텐츠를 서비스로 다시 전달할 수 있습니다. 또는 그리드에서 Selected Row를 표시 중인 경우 해당 행이 다시 전달될 수 있습니다. 테이블의 크기에 따라 메모리 사용량에 영향을 줄 수 있기 때문에 모범 사례는 Selected Row를 사용하는 것입니다.
자세한 내용은 다음 비디오 자습서를 참조하십시오.
 | 스타일 및 공통 위젯 속성은 아래 표에 포함되어 있지 않습니다. |
속성 이름 | 설명 | 기본 유형 | 기본값 | 바인딩 가능 여부 (Y/N) | 로컬리제이션 가능 여부 (Y/N) | ||
|---|---|---|---|---|---|---|---|
CustomClass | 위젯의 최상위 div에 적용할 사용자 정의 CSS 클래스입니다. 여러 클래스를 공백으로 구분하여 입력할 수 있습니다. | STRING | 해당 없음 | Y | N | ||
RowFormat | 행을 기준으로 동적(상태) 서식 적용을 적용할 옵션 규칙은 셀 상태 서식 적용에 의해 재정의될 수 있습니다. | STATE FORMATTING | 상태 서식 적용 | N | N | ||
MultiSelect | 항목을 여러 개 선택하도록 허용합니다. | BOOLEAN | False | N | N | ||
IsEditable | 그리드에 있는 값 편집을 허용할지 여부입니다. | BOOLEAN | False | N | N | ||
AutoSelectFirstRow | 데이터를 처음 로드할 때 자동으로 첫 번째 행을 선택합니다. | BOOLEAN | False | N | N | ||
CellTextWrapping | 셀에서 값을 괄호로 묶습니다. | BOOLEAN | False | N | N | ||
Data | 이 속성에 대한 데이터 소스인 인포테이블입니다. | INFOTABLE | 해당 없음 | Y | N | ||
CurrentScrollTop | 현재 스크롤 톱입니다. | NUMBER | 0 | Y | N | ||
ScrollTop | 지정할 스크롤 톱입니다. | NUMBER | 0 | Y | N | ||
EditedTable | 그리드를 사용하여 편집되는 테이블입니다. | INFOTABLE | 해당 없음 | Y | N | ||
RowHeight | 행의 높이입니다. | NUMBER | 30 | N | N | ||
ShowAllColumns | 사용 가능한 열을 모두 표시합니다. 인포테이블에 데이터 셰이프가 없는 경우 ShowAllColumns를 사용해야 합니다.
| BOOLEAN | False | N | N | ||
ShowDataLoading | 데이터를 로드하는 동안 표시합니다. | BOOLEAN | True | N | N | ||
DoubleClicked | 이벤트입니다. 데이터 객체를 한 번 클릭하여 선택할 수 있지만 탐색 링크 트리거를 위해 두 번 클릭 연결과 같이 다른 이벤트에 두 번 클릭을 사용할 수도 있습니다. | 해당 없음 | 해당 없음 | Y | N | ||
Visible | 런타임에 위젯 표시 여부를 나타냅니다. | BOOLEAN | True | Y | N |
그리드 구성
데이터 서비스를 그리드에 연결한 후 Grid Column Configuration 대화 상자를 엽니다. 열 숨기기 확인란(true = 표시, false = 숨기기)을 사용하여 표시해야 할 열을 선택할 수 있습니다. 표시된 열을 목록에서 위로 또는 아래로 끌어 순서를 다시 매깁니다.
열 제목은 데이터 서비스의 데이터 셰이프에 의해 자동으로 지정되지만 구성 대화 상자 내 열별 기준에 따라 재정의될 수 있습니다. 각 열에 대해 다음 작업도 수행할 수 있습니다.
• 셀에 대한 렌더러 선택(표시될 데이터의 특정 데이터 유형 처리에 사용됨 - 권장)
• 자동 너비 또는 고정 너비 선택
• 텍스트 정렬 선택
• 스타일 지정(고정 또는 상태 서식 적용) 선택
• 편집 가능한 열 지정(유효성 검사 포함 또는 미포함)
고정(비동적) 스타일을 적용하려면 고정 스타일을 선택하고 이전에 정의한 스타일 정의를 선택합니다. 동적 서식 적용(행에서 데이터를 반환할 때 기반으로 하는 색상 컨텍스트 등)을 수행하려면 상태 기반 서식 적용을 선택합니다.
상태 기반 서식 적용을 사용하여 데이터의 각 열을 개별적으로 구성하면 행 데이터 기반으로 열에 해당 스타일을 적용할 수 있습니다. 상태 포맷터를 정의할 각 열에 대해 다음을 수행해야 합니다.
• 서식 적용이 종속될 열 선택(반환 데이터 서비스의 숨겨지거나 숨겨지지 않은 모든 열일 수 있음)
• 사용할 상태 정의 선택(열당 하나이며 종속 필드의 데이터 유형과 일치해야 함)
• 상태 정의에 대한 기본값 적용 또는 해당 값을 이 그리드 정의 및 렌더링용으로 특별히 재정의
그리드가 편집 가능으로 설정되면 특정 열을 편집 가능으로 지정할 수도 있습니다. 또한 JavaScript 비교를 사용하여 열 이름을 기반으로 유효성 검사를 추가할 수 있습니다.
예:
Validation - Column1 > 5 && Column3 < 10
Message - You must have Col 1 > 5 and Col 3 < 10
Message - You must have Col 1 > 5 and Col 3 < 10