ToolbarGrid

대용량 Data 전용 Grid Component로 List Component에 비해 Data Load 속도가 빠르다. 다 건의 Data를 한 페이지에 보여 줄 때 주로 사용한다. Grid Component에 Toolbar가 결합된 형태의 Component이다.

[표1. List Component 속성 기능 차이]

Component 속성	Grid 구현	Description
Toolbar Position	O	Toolbar Button의 위치 설정 또는 변경(top, bottom)하는 설정
Tab Pane Id	O	Tab Component에 연결을 위한 ControlId를 설정
Use CheckBox	O	Row의 좌측 끝에 Checkbox를 추가하는 설정
Single Check	O	Row의 좌측 끝에 Radio button을 추가하는 설정
Use Drag and Copy	O	조회된 List 항목의 Drag 및 Copy 기능의 사용 설정
Page Navigation	△	Button 방식의 페이지 이동만 가능
Reverse Check	X	Checkbox가 화면에 Load될 때, 최초 상태가 체크가 되어있도록 하는 설정
Use Summary	X	Data의 합계, 평균을 표기하는 Summary Row의 사용 여부를 설정
Use Stripped Table	X	List의 Striped Style(1Row씩 띄어서 색칠하는 것)의 사용 여부를 설정
Search Type	△	상단 Static 검색 조건만 사용 가능 (Grid Component의 제약 사항)
Collapse Disabled	O	Component의 컨텐츠 접기 기능을 비활성화하도록 설정
Default Collapse State	O	Collapse Disabled 값이 No 일 경우 화면 초기 진입 상태 설정 속성
Inline Edit	X	Data를 추가, 수정, 삭제할 수 있도록 List의 Line 단위로 Edit 가능 여부를 설정
Mobile Display Type	X	모바일 전용 List display type을 설정
Personalization	O	사용자 별로 Control 표시 및 순서를 변경하는 개인화 설정
Display Number	O	List의 Data에 순번을 표기 여부를 설정
Display Full Size Fixed	O	List형태의 Data를 표현할 때 Component의 Size가 작거나 Data가 충분하지 않아도 Grid의 형태가 화면에 확장되어 보이게 설정

[표2. List Column 속성 기능 차이]

기능명칭	Grid 구현	Description
Translate	O	Symbolic String을 통한 Label의 다국어 표현 여부를 설정
UI Type	X	Column을 Progress Bar(Range UI), icon UI, Link UI 등의 형태로 표현하는 설정
Sort	O	Column별 Sort Icon을 표시하고 Sort 여부를 설정. Server 또는 Client 유형 선택이 가능하며, Client Sort 의 경우 조회된 Data 기준으로 정렬
Direct Edit	X	Cell에 마우스가 오버되면 Edit icon을 표시하고, 수정할 수 있도록 설정. 등록된 direct-edit-click Service로 Cell Data의 수정 처리. 구성 단위는 Column 단위로 설정.
Thousand Separator	O	숫자 Type의 Column에서 1000단위 구분자를 표시 여부 설정
Currency	X	숫자 형태의 Column에서 통화코드 Field를 연결하여 통화 코드(화폐단위)의 값을 설정
Summary	X	Component 속성 중 Use Summary를 체크하게 되면, Column별 Summary 수식 및 표현 방식을 설정
Search Condition	X	Static 또는 Default Field 검색의 경우, 검색 조건에 따른 연산자(equal, not equal, like 등)를 설정
Conditional Formatting	O	Column 값에 따라 Cell 및 Row의 Style및 Format을 설정
Use Fixed Header	X	Horizontal Scroll에 영향을 받지 않는 고정된 Header Field 설정

• How to Create

1. New Component Popup에서 ToolbarGrid 타입을 선택하고 Next를 Click한다.
2. Component Name 및 화면에서 표시되는 명칭(Symbolic String or Custom Name)을 등록하고, 작성된 Business Object 가운데 ToolbarGrid Component에서 사용될 Business Object를 선택 후, Next를 Click한다.
3. 선택한 Business Object에서 ToolbarGrid Component의 List에 표시될 Field를 선택한다. Business Object의 System Field는 기본으로 선택되어 있다.

1. Toolbar에서 사용될 Button 유형을 선택한다.

   

Note: 생성되는 Button은 Control 명칭만 정의된 상태이며, 각각의 Service를 직접 생성해야 한다.

• 적용 가능한 Component Attribute

1. Toolbar Position: Button 그룹의 위치를 설정하는 속성으로, 선택 가능한 값은 Top, Bottom이며, 기본값은 top이다.
2. Tab Pane Id: Tab Component로 Screen이 구성되는 경우, 하단에 해당 Component가 배치되는 경우 Tab Component의 Panel Id값을 등록하여 Tab과 연결하기 위하여 사용된다.
3. Use Checkbox: List의 각 Row의 좌측 끝에 Checkbox의 추가 여부를 설정한다. 복수의 Row를 선택할 수 있다
4. Single Check: List의 각 Row의 좌측 끝에 Radio Button의 표시 및 사용 여부를 설정한다. 기본값은 No이며, Yes로 설정하면 List 행의 좌측 첫번째에 Radio Button이 생성된다.
5. Use Drag and Copy: List에 Drag and Copy 기능의 사용 여부를 설정한다.
6. Collapse Disabled: Toolbar의 컨텐츠 접기 기능의 활성화 여부를 설정한다. 기본 값은 NO로 컨텐츠 접기 기능이 활성화 되어있으며, YES로 변경 시 Component가 항상 펼침 상태로 나타난다.
7. Default Collapse State: Collapse Disabled 값이 No인 경우 화면 초기 진입 상태를 설정하는 속성으로, 기본값은 N/A로 Collapse 펼침 기능이 활성화 되어있다. “Close`로 변경 시 화면 초기 진입 시 Collapse가 닫힌 상태로 나타난다.
8. Key Column: Grid와 ToolbarGrid Component에서만 제공되는 속성이며, Mapping된 BO의 PKField를 설정한다.
9. Use Page Total: ToolbarGrid의 속성으로 Grid 상단에 […] 표시로 전체 페이지와 건수를 표기하는 설정이다.
10. Personalization: 개인화 속성으로 사용자 별 Control의 표시 및 순서를 설정한다.
11. Display Row Number: List에 표출되는 Data의 순번을 표기 여부를 설정한다. 전체 Data의 Row Number가 아닌 조회 결과의 표시되는 순서이다.
12. Display Full Size Fixed: Screen에 Component의 크기 조정 없이 가득 차 보이도록 설정한다.
13. Style - Size: Component의 크기를 설정하는 스타일 속성으로 높이를 픽셀 또는 퍼센트 단위로 설정이 가능하다.
14. Style – Text Color: Text의 글자 색을 설정한다.
15. Style - Background Color: Component의 배경색을 설정한다.
16. Style – Flat Appearance: Border의 Size 및 Color를 설정할 수 있다.
17. Style – Outline: Component 아웃라인 유형을 설정할 수 있다.

• 사용 가능한 Service

Name	Platform	Description
load	Common	Data loading 시 발생되는 Event
row-click	Web	List에서 row Click 시 발생되는 Event
row-dbclick	Web	List에서 row Double Click 시 발생되는 Event

1. Load: Component가 Load될 때 발생되는 Event이며, Service를 등록하여 Data를 조회한다. (필수)

INFO

Load Event에 등록하는 Service의 Action Design은 Check Action과 Lambda를 사용한다.

Lambda를 선택하고, 수정 icon을 click 하면, 다음 단계로 넘어간다

Lambda를 /CalsComWebCommonSelectData로 선택하고, Type을 Data, Target을 List Component로 설정하고 저장한다.