Grid 컴포넌트를 이용한 Tree형태 표현
Grid 에서 edittype, displaytype = tree 로 설정하여 Dataset내용을 tree구조로 보여줄 수 있습니다.
TreeBasic_0
Tree구성을 위한 데이타 구조
TreeBasic_2
Tree형태를 표현하기 위해서는 DataSet컬럼에 Tree형태를 표현하기 위한 Level컬럼과 Label컬럼이 필요합니다.
Tree로 보여주기 위해서는 Dataset 구조를 Tree구조로 만들어야 합니다.
그리드 Cell의 displaytype, edittype 설정하기
TreeBasic_1
Grid에서 tree구조로 설정하기 위해서는 cell 속성을 아래와 같이 설정합니다. displaytype= tree edittype = tree
Tree 항목에 보여질 컬럼을 지정합니다.
TreeBasic_3
Tree의 Level를 지정합니다.
TreeBasic_4
- 소스 위치
Sample\Grid\np_Tree_Basic.xfdl
level에 따라 Text color설정방법
tree에서 level에 따라 text를 각자 다른 색상으로 지정할 수 있습니다.
Lebel_Color_0
Cell 속성 color에 expr를 이용하여 level별 색상지정
Tree_LevelColor_1
- 소스 위치
Sample\Grid\np_Tree_LebelColor.xfdl
Tree에서 이용 가능한 이미지 속성
Tree Image_0
treeitemimage
tree cell에서 tree State가 leaf일 때 사용할 이미지를 설정하는 속성입니다. 즉, 하위 자식 노드가 없는 row에 적용되는 image입니다.
treecollapseimage
tree cell에서 tree가 축소(collapse) 상태일 경우에 사용할 이미지의 값을 설정하는 속성입니다. 즉 ,닫혀진 (tree cell 버튼이 open [+] ) row에 적용되는 image입니다.
treeexpandimage
tree cell에서 tree가 확장(expand) 상태일 경우에 사용할 이미지의 값을 설정하는 속성입니다. 즉 ,펼쳐진 (tree cell 버튼이 close [-] ) row에 적용되는 image입니다.
- 소스 위치
Sample\Grid\np_Tree_ImageType.xfdl
Tree 이미지 속성별 적용방법
Tree에서 이미지를 지정하는 방식에 대해 설명합니다.
Tree_Image_0
테마이미지
ADL에 선언된 테마에 포함되어 있는 image를 이용하는 방법입니다. Tool에서 이용하는 테마를 선택하면 테마에 포함된 image리스트를 볼 수 있습니다.
Tree_Image_2
Grid cell 설정
Tree_Image_3
웹 이미지
웹 상의 이미지를 이용하는 방법입니다. 호출 가능한 웹 url 경로를 입력해 줍니다. Grid cell에서 아래와 같이 설정할 수 있습니다.
Tree_Image_4
로컬이미지
로컬의 이미지를 prefix를 이용하여 로컬 경로를 설정 후, 호출할 수 있습니다. Prefix 지정은 TypeDefinition 더블클릭 > Services 탭에서 지정할 수 있습니다.
TypeDefinition 설정
Tree_Image_5
Grid cell 설정(prefix명 :: 이미지명)
Tree_Image_6
Global Image
GlobalVariables의 Images Tag에 선언된 이미지를 호출하여 설정할 수 있습니다. GlobalVariables에 image를 추가하는 방법입니다. GlobalVariables 오른쪽마우스클릭 > Insert GlobalVariables Item > Image를 선택하면 파일다이얼로그 창이 뜨며, image를 선택하여 열기 하면 Images에 image가 추가 됩니다.
Tree_Image_7
Grid cell 설정(이미지명)
Tree_Image_8
- 소스 위치
Sample\Grid\np_Tree_Image.xfdl
level별 간격조절
Tree_Sapce_0
Tree의 Padding 속성을 이용하여 level 별 간격을 다르게 표현할 수 있습니다.
expr를 이용한 padding설정
Tree_lebelSpace_1
padding에서 지정한 함수의 내용은 아래와 같습니다.
this.fn_getlvl = function(lvl){
if(lvl==2) return '0 0 0 50';
}return 순서 (Top Right Bottom Left)
- 소스 위치
Sample\Grid\np_Tree_Space.xfdl
Tree text컬럼 편집하기
Grid를 트리로 사용하는 경우 일반적으로 셀의 편집은 바인딩을 이용한 입력용 컴포넌트를 이용합니다. Grid에서 직접 편집을 원하는 경우 edittype 속성을 변경하여 구현을 할 수 있습니다.
Grid_TreeEdit_0
Cell속성 editautoselect 설정
np_Grid_Column_TreeEdit_1
Grid 셀 편집 시 데이터를 전체 선택할 수 있도록 Grid Contents Editor에서 editautoselect 속성을 ‘true’로 변경합니다.
주요 소스 내용
this.grd_output_onselectchanged = function(obj:Grid, e:nexacro.GridSelectEventInfo)
{
this.grd_output.setCellProperty( "Body", 0, "edittype", "tree");
}
this.grd_output_oncelldblclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
if (e.col == 0)
{
this.grd_output.setCellProperty( "Body", 0, "edittype", "normal");
}
}Tree Label컬럼에서 cell을 DoubleClick식 edittype를 normal로 변경하고 컬럼의 값이 변경되면 다시 tree형태로 변경해 주는 작업을 코딩으로 구현합니다.
트리
- 소스 위치
Sample\Grid\np_Tree_Edit.xfdl