그리드 (18) 썸네일형 리스트형 컬럼정보를 사용하여 그리드 그룹핑을 예쁘게 해보자 Intro. Dataset 컴포넌트는 데이터를 담는 객체로 Column(열)과 Row(행)로 이루어진 이차원 배열 형태의 데이터 저장소입니다. 그 중 Column의 정보를 담고 있는 ColumnInfo와 그 활용방법에 대하여 다루고자 합니다. What will help? ColumnInfo는 Dataset 컴포넌트의 Column 정보를 갖는 오브젝트로 addColumnInfo / getColumnInfo 메소드로 정보를 추가하거나 반환받을 수 있습니다. 또한 고유의 값인 id(name)을 제외한 ColumnInfo의 모든 속성은 동적으로 편집 할 수 있습니다. 속성명 설명 사용정보 name ColumnInfo 의 이름을 갖는 읽기전용 속성 Column 생성 시 지정 type DataSet 의 Column.. 그리드 Row의 높이를 자동으로 조절하는 방법 Intro. 입력된 텍스트의 길이가 각 Row마다 달라 Row의 높이를 동적으로 설정하고자 하는 경우가 있다. 이 기능을 활용하면 해당 Row의 가장 긴 문자열의 높이에 맞춰 Row의 높이를 자동으로 설정할 수 있다. how to auto size 그리드 Row 높이를 동적으로 설정하는 기능은 2개의 속성으로 제어할 수 있다. autosizingtype Grid에 데이터가 모두 표시되도록 Row, Column의 크기를 자동조절 할 지 설정하는 속성 extendsizetype autosizingtype속성에 의해 Row의 높이가 자동조절될 때 각 Row별로 따로 조절 할 지 설정하는 속성 다음과 같이 설정하면 위의 예시와 같이 Row의 높이가 자동으로 조절 될수 있도록 설정할 수 있다. Grid00.set.. expr 고급지게 사용하는 노하우 2 - 그리드에서 데이터셋 사용자함수 활용 Intro. 지난 기고문에 이어 그리드 Expr을 활용하는 방법 중 데이터셋과 사용자함수를 이용한 활용 방법을 공유하도록 하겠다. how to expr 그리드 소계 텍스트를 Expr를 통해 설정하는 예시를 단계별로 설명하여 데이터셋 예약어 사용 및 사용자함수를 구현하는 방법에 대해 공유한다. 그리드에 소계를 표현하는데 소계 Row에 “소계”라는 텍스트를 출력하고 싶어요. 1. getRowLevel() 함수를 통해 현재 Row의 레벨 값을 구한다. 2. 레벨값이 0일 경우 기존 컬럼 정보를 보여준다. 3. 레벨값이 0 아닐 경우 [소계]를 보여준다. 4. 위의 기능을 Expr로 구현한다. Expr에 적용할 스크립트를 작성해 보면 다음과 같이 사용할 수 있다. expr 수식 : dataset.getRowLe.. 트리 그리드 잘 사용하고 잘 활용하는 방법 - 트리 그리드 셀 컨트롤 가이드 Intro. 트리 구조(tree 構造, 문화어: 나무구조)란 그래프의 일종으로, 여러 노드가 한 노드를 가리킬 수 없는 구조이다. 간단하게는 회로가 없고, 서로 다른 두 노드를 잇는 길이 하나뿐인 그래프를 트리라고 부른다. 넥사크로플랫폼은 데이터를 테이블 구조 즉, 리스트 형태로 담을 수 있는 그리드 컴포넌트를 제공합니다. 그리드를 구성하는 오브젝트 중 셀은 다양한 형태의 컴포넌트를 표현 할 수 있으며, 이 중, Treeitemcontrol은 각 레벨을 설정하여 데이터를 트리로 구성합니다. What will help? 트리는 기본적으로 접기/펼치기 가능한 아이템과 체크박스 옵션을 사용할 수 있습니다. 또한 트리 정보 값을 반환 받거나 상태관리를 설정 할 수 있는 메소드를 기본 제공합니다. Type Met.. 그리드 셀 자유롭게 컨트롤 하는 비법 전수 Intro. 그리드는 화면에 표현될 데이터셋 컴포넌트와 함께 사용됩니다. 데이터셋의 역할을 데이터를 가공하거나 정렬이나 필터 등의 기능을 제공하는 반면 그리드는 표현된 리스트의 데이터를 효과적으로 보여주는데 필요한 기능들을 제공합니다. 예를들어 엑셀과 같이 컬럼의 크기를 조정하거나 이동시키기도 하며 틀고정과 같은 기능도 제공합니다. What will help? 그리드 셀의 크기를 조정하고 위치를 변경하는 작업들을 사용자가 직접 편집할 수 있습니다. 또한 이러한 컬럼은 속성을 설정하여 간편하게 자동조정할 수 있습니다. 1. autofittype의 속성을 ‘col’로 설정할 경우 그리드의 가로 스크롤 없이 전체 컬럼이 표시되도록 너비를 자동 조절하는 속성입니다. 2. autosizingtype 속성을 이용하.. 그리드 복사하기 붙여넣기 샘플 샘플개요 그리드의 셀을 선택하여 복사 후 붙여넣기 할 수 있습니다. 복사/붙여넣기는 그리드 셀 안에서 뿐만 아니라 그리드에서 엑셀 또는 엑셀에서 그리드로도 가능합니다. 사용방법 1. 제공된 파일 gridCopyPaste.xfdl - 사용될 그리드 컴포넌트가 배치되며 사용할 그리드를 지정하는 화면 예제 폼 파일 gridCopyPaste.xjs - 동적으로 그리드 이벤트가 생성되고 사용될 로직이 작성된 스크립트 파일 2. 화면 동작 가이드 #1. 화면의 그리드의 셀을 선택 후 ctrl + c / ctrl + v 하여 복사 붙여넣기 합니다. #2. 그리드 - 엑셀, 엑셀 - 그리드 모두 사용 가능합니다. 주의사항 #1. NRE(nexacro Runtime Environment), WRE(Web Runtime .. Grid CheckBox No Dataset (그리드의 Checkbox를 Dataset 없이 사용하기) 샘플개요 그리드의 체크박스를 Dataset 연결 없이 사용할수 있는 함수 예시입니다. 그리드의 RowType 변경 없이 체크박스를 사용하고자 할 경우 활용 가능합니다. 전체 체크/체크해제 기능이 포함 되어있으며 필요에 따라 수정 가능합니다. 사용방법 1. 제공된 파일 gridchecknodataset.xfdll - Grid Check Box No Dataset를 구성하기 위한 컴포넌트 배치와 스크립트가 포함되어있습니다. 2. 화면 동작 가이드 #1. 화면 온로드시 Grid CheckBox No Dataset 초기화가 실행 됩니다. #2. 그리드 [팀명] 컬럼을 수정시 [상태] 컬럼이 수정으로 변경 됩니다. #3. 그리드 Body의 CheckBox 값을 변경 시 [상태] 컬럼이 변경되지 않습니다. #4. .. 단일 다중 정렬 적용하기 2 (다중정렬 팝업편집 추가) 샘플개요 Grid 컴포넌트의 헤더를 클릭하면 해당 컬럼이 정렬됩니다. 이미 정렬된 컬럼을 다시 클릭하면 반대의 상태로 정렬됩니다. 사용자가 shift나 ctrl 키를 누른채 헤더를 클릭하면 다중정렬이 실행됩니다. 기존 샘플에 옵션을 두어 헤더에서 마우스 우 클릭 하였을 때 정렬 메뉴 및 다중정렬을 팝업으로 사용 할 수 있도록 추가하였습니다. 사용방법 1. 제공된 파일 gridsortpop.xfdl - 사용될 컴포넌트가 배치되며 사용할 옵션을 설정하여 결과를 확인하는 화면 예제 폼 파일 gridsortpop.xjs - Grid 정렬에 사용될 로직이 작성된 스크립트 파일 sortPopup.xjs - 다중정렬 팝업화면 예제 폼 파일 2. 화면 동작 가이드 #1. Grid 헤더를 클릭하면 컬럼 단위로 단일 정렬.. 이전 1 2 3 다음
