/**
* 그리드에서 정의 가능한 속성입니다.
*/
export interface Props {
/**
* 페이징 모드가 아닌 일반 그리드에서 마우스 휠(wheel)에 의한 수직 스크롤의 반응도를 결정합니다.
* 예를 들어 이 속성의 값을 2로 주면 마우스 휠로 반응하는 행의 개수가 2로 변경됩니다.
* @defaultValue 3
*/
wheelSensitivity?: number;
/**
* 마우스 휠을 움직일 때 그리드의 스크롤이 최하단 또는 최상단으로 간 경우 그리드 밖의 스크롤에 영향을 줄지 여부를 결정합니다.
* 이 속성을 true 로 설정하면, 최하단 또는 최상단으로 간 경우 그리드 밖의 스크롤이 휠에 반응합니다.
* @defaultValue true
*/
wheelDefaultOnLast?: boolean;
/**
* 마우스 휠(wheel) 활성화 여부를 지정합니다.
* 이 속성을 false 로 설정하면, 마우스 휠로 그리드의 스크롤이 반응하지 않습니다.
* @defaultValue true
*/
enableMouseWheel?: boolean;
/**
* 스크롤의 높이(수직 스크롤인 경우 넓이)를 지정합니다.
* @defaultValue 14
*/
scrollHeight?: number;
/**
* autoScrollSize=true 설정한 경우, 터치가 지원되는 모바일 화면(아이에서의 스크롤 높이(수직 스크롤인 경우 넓이)를 지정합니다.
* @defaultValue 4
*/
scrollHeight4Mobile?: number;
/**
* 터치가 지원되는 모바일 기기(아이폰, 아이패드, 안드로이드 기기 등)에서 스크롤 높이(수직 스크롤인 경우 넓이)를 자동으로 작게 만들지 여부를 지정합니다.
* 만약 true 로 설정한다면 모바일 기기에서는 scrollHeight4Mobile 설정값으로 스크롤 크기가 적용되고 일반 데스크탑에서는 scrollHeight 설정값으로 스크롤 크기가 자동 적용 됩니다.
* @defaultValue false
*/
autoScrollSize?: boolean;
/**
* 그리드 셀을 수정 중일 때 그리드 외의 HTML 바탕을 mouseDown 한 경우 수정을 종료 시킬지 여부를 지정합니다.
* 이 속성이 true 라면 그리드 셀 외의 다른 HTML 엘리먼트를 mouseDown 한 경우 편집 종료 이벤트가 발생합니다.
* 즉, 그리드 외의 다른 영역을 mouseDown 한 경우 자동 편집 종료가 됩니다.
* @defaultValue true
*/
autoEditCompleteMode?: boolean;
/**
* 터치가 지원되는 모바일 기기(아이폰, 아이패드, 안드로이드 기기 등)로 접속 시 셀 편집을 탭(tap)하여 수정하게 만들지 여부를 지정합니다.
* 즉, autoEditBeginMode=true 설정하면 editBeginMode 가 "doubleClick" 이라도 모바일 기기로 접속하면 탭으로 수정 가능합니다.(PC는 기존 더블클릭 유지함)
* @defaultValue false
*/
autoEditBeginMode?: boolean;
/**
* 스크롤 썸(thumb)의 높이(수직 스크롤인 경우 넓이)를 지정합니다.
* @defaultValue 10
*/
scrollThumbHeight?: number;
/**
* 칼럼의 가로 사이즈(width) 기본(default)값을 지정합니다.
* 기본값은 칼럼 레이아웃에서 width 속성을 지정하지 않은 칼럼에게 적용됩니다.
* @defaultValue 80
*/
defaultColumnWidth?: number;
/**
* 행 줄번호(로우 넘버링) 칼럼의 출력 여부를 지정합니다.
* 이 속성 값이 true 이면 최좌측에 행번호 칼럼이 생성됩니다.
* @defaultValue true
*/
showRowNumColumn?: boolean;
/**
* 행 줄번호(로우 넘버링) 칼럼의 가로 사이즈(width)를 지정합니다.
* showRowNumColumn=true 설정인 경우만 유효합니다.
* @defaultValue 40
*/
rowNumColumnWidth?: number;
/**
* 엑스트라 행 체크박스 출력 여부를 지정합니다.
* 이 속성 값이 true 이면 최좌측에 체크박스 칼럼이 생성됩니다.
* @defaultValue false
*/
showRowCheckColumn?: boolean;
/**
* 엑스트라 행 체크박스 대신 라디오버턴 그룹으로 변환시켜 출력할지 여부를 지정합니다.
* showRowCheckColumn=true 설정인 경우만 유효합니다.
* @defaultValue false
*/
rowCheckToRadio?: boolean;
/**
* 엑스트라 행 체크박스 칼럼의 가로 사이즈(width)를 지정합니다.
* showRowCheckColumn=true 설정인 경우만 유효합니다.
* @defaultValue 25
*/
rowCheckColumnWidth?: number;
/**
* 행 줄번호(로우 넘버링)의 시작을 0에서 시작할 지, 1에서 시작할지 여부를 지정합니다.
* true 인 경우 0에서부터 시작합니다.
* @defaultValue false
*/
zeroBazeAtRowNum?: boolean;
/**
* 푸터와 메인 그리드 사이의 간격, 공백을 지정합니다.
* @defaultValue 4
*/
footerVGap?: number;
/**
* 헤더의 높이를 지정합니다.
* @defaultValue 24
*/
headerHeight?: number;
/**
* 헤더를 그룹형(계층형)으로 작성한 경우, 계층(depth) 별로 개별 헤더 높이를 지정합니다.
* 예를 들어 헤더 계층이 3계층이라면(즉, 헤더 행의 개수가 3개) 다음과 같이 배열로 개별 3개를 지정합니다.
* headerHeights : [24, 24, 50],
* 만약 그룹형 헤더일 때 headerHeights 를 지정하지 않은 경우 기본 헤더 높이 속성인 headerHeight 값을 따르게 됩니다.
* 이 말은 다시 말해 headerHeights 의 배열 인자가 정수가 아닌 경우 headerHeight 이 적용됩니다.
* @defaultValue null
*/
headerHeights?: number[];
/**
* 푸터의 높이를 지정합니다.
* @defaultValue 30
*/
footerHeight?: number;
/**
* 행의 높이를 지정합니다. 행의 높이는 20보다 작아질 수 없습니다. (즉, 행 높이 최소값은 20)
* @defaultValue 26
*/
rowHeight?: number;
/**
* 이 속성값이 true 인 경우 자동 word-wrap 이 발생하며 각 행의 높이가 설정한 텍스트에 맞게 가변적으로 렌더링됩니다.
* wordWrap 의 사용은 그리드 퍼포먼스에 가장 큰 영향을 미치는 속성 중 하나입니다.
* 칼럼 레이아웃에서 설정한 열의 개수와 보여지는 행의 개수(실제 데이터 개수가 아닌 화면에 보이는 행의 개수)에 비례하여 퍼포먼스는 낮아집니다.
* 따라서 wordWrap 사용은 꼭 필요한 상황에 최소한으로 사용하십시오
* @defaultValue false
*/
wordWrap?: boolean;
/**
* 개별 행 아이템의 고유 값을 갖는 키(key)필드에 해당되는 필드를 지정합니다.
* DB 의 Record 에 비유하면 Primary Key 입니다.
* 그리드의 개별 행 아이템에 쉽게 접근하고 제어하기 위해서 지정할 필요가 있습니다.
* 이 필드에 속하는 데이터 필드 값(value)는 고유값이여야 합니다. 즉, 중복된 값이 없어야 합니다.
* 예로 rowIdField 를 "id" 로 설정한 경우 모든 데이터의 개별 행에 id 필드가 존재해야 하며 그 값들은 모두 고유값이여야 합니다.
* 이 필드를 지정하면 그리드가 빨리 생성됩니다. 10만 행(rows) 데이터 이상에서는 빠른 렌더링을 위해 설정을 추천합니다.
* 편집 모드(editable=true)에서 rowIdField 로 지정된 필드는 수정이 불가능해집니다.
* @defaultValue "_$uid"
*/
rowIdField?: string;
/**
* 현재 행(row) 의 위치를 나타냅니다.
* rowPosition 이 곧 현재 화면에 보이는 그리드의 최상단 행의 인덱스와 같습니다.
* 페이징 모드인 경우는 현재 페이지의 최상단 행의 인덱스와 같습니다.
* @defaultValue 0
*/
rowPosition?: number;
/**
* 수평 스크롤의 위치를 나타냅니다.
* 이 값은 픽셀입니다.
* @defaultValue 0
*/
hScrollPosition?: number;
/**
* 헤더 출력 여부를 지정합니다.
* @defaultValue true
*/
showHeader?: boolean;
/**
* 푸터 출력 여부를 지정합니다.
* @defaultValue false
*/
showFooter?: boolean;
/**
* 정렬 가능 여부를 지정합니다.
* @defaultValue true
*/
enableSorting?: boolean;
/**
* 칼럼 리사이징 가능 여부를 지정합니다.
* 칼럼 리사시징은 헤더와 헤더의 경계선을 마우스 드래그&드랍을 통해 가능합니다.
* 만약 헤더의 경계선을 더블 클릭한 경우 모든 행들의 셀 값 중 가장 길이(length)가 큰 텍스트로 사이즈가 결정됩니다.
* 헤더에 HTML 을 표현한 경우 무시됩니다.
* 또한 TempleteRenderer 를 사용하는 경우 더블클릭을 통한 리사이징은 무시합니다.
* @defaultValue true
*/
enableColumnResize?: boolean;
/**
* 칼럼 셀 병합(cell merge) 가능 여부를 지정합니다.
* 셀 병합은 가로 병합, 세로 병합 중 한가지만 가능합니다. 가로 병합과 세로 병합을 같이 사용하여 혼합된 병합으로 출력은 불가능합니다.
* @defaultValue false
*/
enableCellMerge?: boolean;
/**
* 그리드 상단에 그룹핑 가능한 패널 사용 여부를 지정합니다.
* 이 속성이 true 이면 칼럼 헤더를 드래그하여 그룹핑 패널에 드랍하면 그룹핑을 사용자가 할 수 있습니다.
* @defaultValue false
*/
useGroupingPanel?: boolean;
/**
* 그리드 상단에 그룹핑 가능한 패널의 높이를 지정합니다.
* @defaultValue 40
*/
groupingPanelHeight?: number;
/**
* 그리드 상단에 그룹핑 가능한 패널에 표시되는 메세지를 지정합니다.
* @defaultValue "Drag a column header and drop here to group by that"
*/
groupingMessage?: string;
/**
* 칼럼의 최소 사이즈를 지정합니다.
* 여기서 지정한 칼럼 사이즈보다 칼럼은 작아지지 않습니다.
* @defaultValue 12
*/
minColumnWidth?: number;
/**
* 계층형 그리드(트리 그리드) 에서 자식 행과 부모 행의 왼쪽 간격(indent)를 지정합니다.
* @defaultValue 18
*/
treeLevelIndent?: number;
/**
* 계층형 그리드(트리 그리드) 에서 트리 아이콘을 출력시킬 칼럼 인덱스를 지정합니다.
* @defaultValue 0
*/
treeColumnIndex?: number;
/**
* 계층형 그리드(트리 그리드) 에서 열기/닫기 실행 시 재귀적으로(recursivly) 열/닫을 실행할지 결정합니다.
* 재귀란 바로 아래 자식 뿐 아니라 자손까지 영향을 미칠지를 나타냅니다.
* @defaultValue false
*/
treeOpenRecursivly?: boolean;
/**
* 계층형 그리드(트리 그리드) 에서 최초로 보여지는 그리드의 브랜치 아이템이 모두 열린 상태로 출력될지 닫힌 상태로 출력될지를 결정합니다.
* 이 값이 true 라면 모두 열린 상태이고, false 라면 최상위 브랜치만 표시됩니다.
* 참고 : treeLazyMode 를 사용하는 경우 이 속성은 무시됩니다.
* @defaultValue false
*/
displayTreeOpen?: boolean;
/**
* 고정 칼럼의 개수를 지정합니다.
* 고정 칼럼은 수평 스크롤에 영향을 받지 않고 항상 표시되는 칼럼을 말합니다.(틀 고정)
* @defaultValue 0
*/
fixedColumnCount?: number;
/**
* 고정 행(row)의 개수를 지정합니다.
* 고정 행은 수직 스크롤에 영향을 받지 않고 항상 표시되는 행을 말합니다.(틀 고정)
* 참고 : 페이징 모드(usePaging=true)인 경우 fixedRowCount 속성은 무시됩니다.
* @defaultValue 0
*/
fixedRowCount?: number;
/**
* 그룹핑을 할 칼럼의 데이터 필드를 지정합니다.
* 그룹핑은 동일한 값을 갖는 데이터를 묶어서 계층형으로 자료를 출력합니다.
* 예를 들어 이 값을 ["country", "product"] 로 설정한 경우 country 의 동일한 값을 묶은 후 다시 country 의 그룹 내에서 product 의 동일한 값으로 묶어서 출력하게 됩니다.
* 그룹핑을 설정한 후 각 그룹별 소계(Summary Rows) 출력이 가능합니다.
* 참고 : 설정한 그룹핑의 개수만큼 해당 계층이 형성됩니다. 계층이 많아지면 그룹핑 시 많은 시간이 필요합니다. 계층이 많은 경우 퍼포먼스에 악영향을 끼칩니다.
* @defaultValue null
*/
groupingFields?: string[];
/**
* 그룹핑 시 소계 행(Summary Rows)을 생성하고자 할 때 이 속성을 설정하십시오. 소계 행 출력을 위해서는 groupingFields 설정이 선행되어야 합니다.
* 참고 : 설정한 그룹핑(groupingFields)의 개수만큼 해당 계층이 형성되며 소계(groupingSummary)는 모든 계층에 대한 소계를 구하게 되어합니다. 계층이 많은 경우 퍼포먼스에 악영향을 끼칩니다.
* @defaultValue null
*/
groupingSummary?: {
dataFields?: string[];
excepts?: string[];
labelTexts?: string[];
rows?: {
operation?: 'SUM' | 'MIN' | 'MAX' | 'AVG' | 'COUNT';
text?: any;
constraintField?: string;
exceptFunction?: (item: any) => boolean;
expFunction?: (items: any[], dataField: string) => number;
};
};
/**
* 셀 선택모드를 지정합니다. 유효 속성값은 다음과 같습니다.
* singleCell, singleRow, multipleCells, multipleRows, none
* @defaultValue "singleCell"
*/
selectionMode?: 'singleCell' | 'singleRow' | 'multipleCells' | 'multipleRows' | 'none';
/**
* 편집 수정 가능 여부를 지정합니다.
* @defaultValue false
*/
editable?: boolean;
/**
* 마우스로 편집, 수정 모드로 들어가는 정책을 지정합니다.
* 더블클릭과 클릭 중 택할 수 있습니다. 유효값: doubleClick, click
* 키보드로 편집, 수정 모드 들어가는 방법은 F2입니다.
* @defaultValue "doubleClick"
*/
editBeginMode?: 'doubleClick' | 'click';
/**
* 엑셀(xlsx), CSV, TXT 등으로 내보내기(Export) 할 때 내보내기 된 내용물을 다운로드 형식으로 응답해 줄 서버단 URL 주소를 지정합니다.
* 해당 서버단 파일은 PHP, JSP 등이 될 수 있습니다. 제공된 샘플의 server_script 폴더에 샘플 JSP, PHP, ASP 가 있습니다.
* 해당 파일을 WAS 에 업로드 할 해당 주소를 지정해 주십시오.
* @defaultValue null
*/
exportURL?: string | null;
/**
* 편집 가능 상태(editable = true)일 때 F2 또는 클릭(더블클릭)으로 수정 모드로 들어간 경우, 탭키나 엔터키로 수정을 완료 한다면 다음 셀을 수정 가능 상태로 만들지 여부를 나타냅니다.
* 만약 keepEditing = true 로 설정한 경우, 다음 셀이 바로 수정 가능한 상태로 입력 창이 열리게 됩니다.
* 터치 기반의 모바일 디바이스에서는 무시됩니다.
* @defaultValue false
*/
keepEditing?: boolean;
/**
* 기본적으로 편집 가능 상태(editable = true)일 때 수정 모드 진입은 F2, 더블클릭(클릭)입니다. 그러나 엑셀과 같이 바로 해당 셀에서 어떤 키(any keys)를 누르든 수정 가능 상태로 만들지 여부를 나타냅니다.
* 바로 편집 가능 상태로 진입한 경우 엔터/탭 키 완료는 물론 키보드 방향 키로도 편집 완료가 가능합니다.(엑셀 UI)
* @defaultValue true
*/
editingOnKeyDown?: boolean;
/**
* 칼럼 헤더를 드래그앤드랍으로 자리를 옮기는 기능 활성화 여부를 지정합니다.
* 만약 enableMovingColumn = true 라면, 사용자가 칼럼 헤더를 드래깅하여 자리를 바꿀 수 있습니다.
* 단, 고정 칼럼(fixedColumnCount)으로 설정된 칼럼은 드래깅으로 변경 불가능합니다.
* @defaultValue false
*/
enableMovingColumn?: boolean;
/**
* 칼럼 필드 필터링 기능 활성화 여부를 지정합니다.
* @defaultValue true
*/
enableFilter?: boolean;
/**
* 칼럼의 필터링 아이콘 클릭 시 나오는 필터링 메뉴에서 해당 칼럼의 값들이 많을 경우 모두 체크박스로 출력되지 않습니다.
* filterMenuItemMaxCount 은 필터링 가능한 체크박스의 최대값을 지정합니다.
* 보이지 않는 값들을 필터링하고자 할 때 자동완성(auto complete) 기능으로 검색하여 체크박스 선택하십시오.
* @defaultValue 50
*/
filterMenuItemMaxCount?: number;
/**
* 그리드의 데이터 중 값이 없는 셀이 있는 경우 필터 메뉴에 표현 할 "필드 값 없음" 텍스트를 대체할 다른 텍스트를 지정합니다.
* @defaultValue "(필드 값 없음)"
*/
filterNoValueText?: string;
/**
* 필터 메뉴에 표현 될 "필드 값 없음" 의 위치를 지정합니다.
* 그리드의 데이터 중 값이 없는 셀이 있는 경우 "필드 값 없음" 으로 필터 메뉴에 출력되는데 이 "필드 값 없음"이 표시 될 위치를 최상단에 위치시키고자 한다면 "top" 로 설정하십시오.
* 유효값은 "top" 와 "bottom" 입니다.
* @defaultValue "bottom"
*/
filterNoValuePosition?: 'top' | 'bottom';
/**
* 칼럼의 필터링 아이콘 클릭 시 나오는 필터링 메뉴에서 실제 값들이 더 많다는 메세지를 출력할 수 있습니다.
* 즉, 실제 필터링 가능한 값이 filterMenuItemMaxCount 보다 큰 경우 filterItemMoreMessage 가 하단에 출력됩니다.
* @defaultValue "Too many items...Search words"
*/
filterItemMoreMessage?: string;
/**
* 그리드가 표현할 데이터가 존재 하지 않을 때 자동으로 메세지를 출력할지 여부를 지정합니다.
* 출력 메세지는 noDataMessage 속성의 값이 출력되니 메세지를 변경하고자 할 때는 noDataMessage 를 변경하십시오.
* @defaultValue true
*/
showAutoNoDataMessage?: boolean;
/**
* showAutoNoDataMessage 가 true 인 경우 출력시킬 메세지를 지정합니다.
* @defaultValue "No Data to display"
*/
noDataMessage?: string;
/**
* 필터 유형이 numeric 인 경우 필터링 체크박스에 표시할 비교 연산자명을 지정합니다.
* @defaultValue ["같다(=)", "크다(>)", "크거나 같다(>=)", "작다(<)", "작거나 같다(<=)", "같지 않다(!=)"]
*/
filterNumberOperatorList?: string[];
/**
* 필터 메뉴에 표현 할 "전체선택" 텍스트를 대체할 다른 텍스트를 지정합니다.
* @defaultValue "(전체선택)"
*/
filterCheckAllText?: string;
/**
* 필터 메뉴에 표현 할 "필터 초기화" 텍스트를 대체할 다른 텍스트를 지정합니다.
* @defaultValue "필터 초기화"
*/
filterClearText?: string;
/**
* 필터 메뉴에 표현 할 "검색 전체선택" 텍스트를 대체할 다른 텍스트를 지정합니다.
* @defaultValue "(검색 전체선택)"
*/
filterSearchCheckAllText?: string;
/**
* 필터 메뉴에 표현 할 "확 인" 텍스트를 대체할 다른 텍스트를 지정합니다.
* @defaultValue "확인"
*/
filterOkText?: string;
/**
* 필터 메뉴에 표현 할 "취 소" 텍스트를 대체할 다른 텍스트를 지정합니다.
* @defaultValue "취 소"
*/
filterCancelText?: string;
/**
* 페이징을 사용하는 경우 출력되는 페이지의 버턴 개수를 지정합니다.
* 지정할 수 있는 최대값은 20입니다.
* @defaultValue 10
*/
showPageButtonCount?: number;
/**
* 페이징을 사용 여부를 지정합니다.
* @defaultValue false
*/
usePaging?: boolean;
/**
* 페이징을 사용하는 경우 페이징의 방식을 지정합니다. 유효값은 "default", "simple", "button" 입니다.
* "simple" 로 설정한 경우 이전, 다음 버턴과 현재페이지/전체페이지 만 출력됩니다.
* "button" 로 설정한 경우 페이징 패널 없이 그리드 하단에 오버레이되어 이전, 다음 버턴만 출력됩니다.
* @defaultValue "default"
*/
pagingMode?: 'default' | 'simple' | 'button';
/**
* 페이징을 사용하는 경우 한 페이지에 출력되는 행의 수를 지정합니다.
* 지정할 수 있는 최대값은 500입니다.
* 이 값을 높이 설정하면 개수만큼 모든 행의 DOM 을 작성하기 때문에 퍼포먼스에 악영향을 미칩니다.
* @defaultValue 20
*/
pageRowCount?: number;
/**
* 페이징을 사용하는 경우 페이징이 출력되는 하단의 페이징 영역이 높이를 지정합니다.
* @defaultValue 34
*/
pagingPanelHeight?: number;
/**
* 페이징을 사용하는 경우 페이징 오른쪽에 출력되는 현재페이지와 전체페이지 출력 텍스트를 사용자 정의할 수 있는 라벨펑션을 지정합니다.
* 함수의 반환값이 곧 출력값이 됩니다.
* @defaultValue null
*/
pagingInfoLabelFunction?: (currentPage: number, totalPageCount: number, currentTopNumber: number, currentBottomNumber: number, dataLen: number) => string;
/**
* 행(row) 단위로 동적 스타일을 적용할 수 있는 스타일 함수를 지정합니다.
* 함수의 반환값은 CSS 에서 이미 선언되어 있는 CSS 클래스여야 합니다.
* 다중의 CSS 클래스는 지원하지 않습니다. 예를 들어 "right-style bold-style font12-style" 과 같은 구조는 지원하지 않습니다.
* 엑셀 내보내기 시에는 해당 스타일의 글자색, 배경색, 볼드체, 이탤릭체만 적용됩니다.
* @defaultValue null
*/
rowStyleFunction?: (rowIndex: number, item: any) => any;
/**
* 엑스트라 행 체크박스에 있는 행 체크박스를 사용자가 변경하고자 할 때 변경을 허락할지 여부를 지정할 수 있는 함수 입니다.
* @defaultValue null
*/
rowCheckableFunction?: (rowIndex: number, isChecked: boolean, item: any) => boolean;
/**
* 엑스트라 행 체크박스에 있는 행 체크박스를 비활성화(disabled) 처리하고자 할 때 비활성화 여부를 지정할 수 있는 함수 입니다.
* @defaultValue null
*/
rowCheckDisabledFunction?: (rowIndex: number, isChecked: boolean, item: any) => boolean;
/**
* 엑스트라 행 체크박스에 있는 행 체크박스를 숨기기(hidden) 처리하고자 할 때 보이기/숨기기 여부를 지정할 수 있는 함수 입니다.
* @defaultValue null
*/
rowCheckVisibleFunction?: (rowIndex: number, isChecked: boolean, item: any) => boolean;
/**
* 가로 병합(cellColMerge)을 설정한 경우 특정 행의 가로 병합 실행 여부를 지정할 수 있는 함수 입니다.
* @defaultValue null
*/
cellColMergeFunction?: (rowIndex: number, columnIndex: number, item: any) => boolean;
/**
* 컨텍스트 메뉴 사용 여부를 지정합니다.
* 컨텍스트 메뉴를 사용한다면 기본적으로 필터 메뉴가 생성됩니다. 기본 컨텍스트 메뉴를 사용하고자 한다면 enableFilter = true 설정도 함께 해주십시오.
* @defaultValue false
*/
useContextMenu?: boolean;
/**
* 헤더 컨텍스트 메뉴 사용 여부를 지정합니다.
* 헤더 컨텍스트 메뉴의 기본 메뉴는 존재하지 않습니다. 반드시 contextMenuHeaderItems 속성을 설정하여 헤더 컨텍스트 메뉴를 구성하십시오.
* @defaultValue false
*/
useContextHeaderMenu?: boolean;
/**
* 컨텍스트 메뉴 아이템을 사용자 정의 할 수 있는 속성입니다.
* @defaultValue Array
*/
contextMenuItems?: {
label?: string;
style?: string;
disable?: boolean;
children?: any[];
callback: (event: {
columnIndex: number;
contextIndex: number;
contextDepth: number;
contextItem: any;
dataField: string;
item: any;
pid: string;
rowIndex: number;
target: string;
value: any;
}) => void;
}[];
/**
* 헤더 컨텍스트 메뉴 아이템을 사용자 정의 할 수 있는 속성입니다.
* @defaultValue Array
*/
contextMenuHeaderItems?: {
label?: string;
style?: string;
disable?: boolean;
children?: any[];
callback: (event: {
columnIndex: number;
contextIndex: number;
contextDepth: number;
contextItem: any;
dataField: string;
pid: string;
depth: number;
target: string;
value: any;
isGroup: boolean;
}) => void;
}[];
/**
* 그리드의 가로 사이즈를 픽셀 단위로 지정합니다. 이 가로 사이즈를 지정하지 않으면 부모 DIV 의 width 만큼 할당됩니다.(즉, 부모 width의 100%)
* @defaultValue NaN
*/
width?: number | string;
/**
* 그리드의 세로 사이즈를 픽셀 단위로 지정합니다. 이 세로 사이즈를 지정하지 않으면 부모 DIV 의 height 만큼 할당됩니다.(즉, 부모 height의 100%)
* @defaultValue NaN
*/
height?: number | string;
/**
* 그리드의 셀 또는 행을 복사(Ctrl+C) 할 때 원래 데이터 값을 복사할 지 그리드에 의해 포매팅된 값을 복사할 지 여부를 나타냅니다.
* 예를 들어 실 데이터는 1000 이나, 그리드에 의해 "1,000원" 으로 포매팅되어 출력되고 있을 때 Ctrl+C 로 복사할 대상이 1000 또는 "1,000원" 인지를 지정합니다.
* copyDisplayValue = true 인 경우 "1,000원" 이 복사됩니다.
* @defaultValue false
*/
copyDisplayValue?: boolean;
/**
* 다중 칼럼 필드 정렬(Sorting) 여부를 지정합니다. (선행 : enableSorting 속성 true 설정)
* 이 값이 true 라면 multiSortingKey( 기본 : shiftKey )에 따라 다중 칼럼 헤더 클릭 시 멀티 정렬이 실행됩니다.
* @defaultValue true
*/
enableMultipleSorting?: boolean;
/**
* 다중 칼럼 정렬을 실행 할 때 클릭과 더블어 함께 할 키(key)를 지정합니다.
* 예를 들어 이 값을 "shiftKey" 로 설정한 경우 쉬프트키와 함께 칼럼 헤더 클릭 시 다중 정렬이 실행됩니다.
* 유효값은 "shiftKey", "ctrlKey", "always" 입니다.
* "always" 값은 단순 클릭만으로 항상 다중 정렬이 실행됩니다.
* @defaultValue "shiftKey"
*/
multiSortingKey?: 'shiftKey' | 'ctrlKey' | 'always';
/**
* groupingSummary 속성을 설정하였을 때 합계 필드에 출력되는 텍스트를 지정합니다.
* @defaultValue "합계"
*/
summaryText?: string;
/**
* 트리 그리드에서 트리를 출력하는 칼럼에 표시되는 아이콘을 동적으로 변경 할 수 있는 함수입니다.
* @defaultValue null
*/
treeIconFunction?: (rowIndex: number, isBranch: boolean, isOpen: boolean, depth: number, item: any) => string;
/**
* 그리드 데이터를 유효한 데이터로 재작성 할지 여부를 나타냅니다.
* 예를 들어 dataType 이 "numeric" 으로 선언된 칼럼에 대입되는 데이터들은 숫자여야 합니다. 그러나 JSON, XML 작성 시 완전한 숫자 형식으로 데이터를 작성하기 힘들 때가 있습니다.
* JSON 으로 데이터를 작성한 형태가 다음 2가지가 존재한다고 가정해 보면:
* 1. [{ "id" : "id1", "price" : "1000"}, { "id" : "id2", "price" : "2000"} ..... ]
* 2. [{ "id" : "id1", "price" : 1000}, { "id" : "id2", "price" : 2000} ..... ]
* 1번은 price 의 값이 숫자이지만 따옴표로 묶여 문자처리가 되어 있습니다. 이를 그대로 데이터에 삽입하면 문자로 인식됩니다.
* 따라서 정렬이나 비교 연산 시 문자 비교를 하게 됩니다. 이를 방지하고자 온전한 숫자로 캐스팅할 필요가 있습니다.
* 만약 1번처럼 데이터를 작성했다면 processValidData 를 true 로 설정하십시오. 그러면 그리드가 자체 캐스팅을 합니다.
* 데이터 수가 10만, 20만 등 대용량일 경우 processValidData 를 true 로 설정했다면 퍼포먼스가 낮아질 수 있으니 JSON 데이터 작성 시 2번 형태로 작성하십시오.(1번 형태는 anti-pattern임)
* XML 데이터를 사용할 경우는 반드시 processValidData 를 true 로 설정해야 비교 연산 시 숫자 연산을 하게 됩니다.
* 만약 정렬 기능과 같이 비교 연산을 사용하지 않는 경우 processValidData 를 false 로 설정하는게 유리합니다.
* @defaultValue false
*/
processValidData?: boolean;
/**
* selectionMode 를 "singleRow" 또는 "multipleRows" 로 지정 한 경우 같은 행에서 다른 칼럼으로 선택자가 변경된 경우 기본적으로 selectionChange 이벤트가 발생하지 않습니다.
* 즉, 1번 행의 0번째 칼럼을 선택 한 후 1번 행의 1번째 칼럼으로 선택을 바꿨다면 "singleRow" 또는 "multipleRows" 에선 selectionChange 이벤트가 발생하지 않습니다.
* 그러나 triggerSelectionChangeOnCell 속성을 true 로 설정하면 "singleRow" 또는 "multipleRows" 에서도 selectionChange 이벤트가 발생하게 됩니다.
* 행 선택자를 지정 한 후, 같은 행에서 다른 칼럼으로 이동할 때 selectionChange 이벤트를 발생하고자 한다면 이 속성을 true 설정 하십시오.
* @defaultValue false
*/
triggerSelectionChangeOnCell?: boolean;
/**
* 편집 가능(editable=true) 상태에서 고정 칼럼, 고정 행을 설정했을 때 해당 셀 편집 가능 여부를 지정합니다.
* editableOnFixedCell = true 로 설정한다면, 고정 칼럼, 행으로 지정된 셀을 편집 할 수 있습니다.
* @defaultValue false
*/
editableOnFixedCell?: boolean;
/**
* 그리드 좌측에 행의 상태를 나타내는 칼럼 출력 여부를 결정합니다.
* editable 을 true 로 설정한 경우 삭제, 수정, 추가 행에 대한 정보가 이 칼럼에 아이콘을 출력됩니다.
* 만약 editable 을 false 로 설정한 경우 showStateColumn = true 를 설정하면 선택행에 대한 정보가 아이콘으로 출력됩니다.
* @defaultValue false
*/
showStateColumn?: boolean;
/**
* 행 상태 칼럼(showStateColumn = true)을 설정한 경우 해당 칼럼의 가로 사이즈를 지정합니다.
* @defaultValue 16
*/
stateColumnWidth?: number;
/**
* 수정 가능한 상태(editable = true) 인 경우 셀을 수정하면 해당 셀에 수정된 표시(마크)를 출력할 지 여부를 나타냅니다.
* @defaultValue true
*/
showEditedCellMarker?: boolean;
/**
* 수정 가능한 상태(editable = true) 인 경우 행을 삭제하면 그리드에서 바로 제거하지 않고, 삭제된 표시를 하고 남겨 둘 지 여부를 나타냅니다.
* 삭제된 표시는 기본적으로 가운데 줄이 그어지는 형태입니다.
* softRemoveRowMode=true 인 경우, 삭제된 행은 복구(삭제 취소) 할 수 있습니다.(restoreSoftRows 메소드 참고)
* 속성 dropToOthers 을 true 로 설정한 경우 softRemoveRowMode 는 강제적으로 false 입니다.
* @defaultValue true
*/
softRemoveRowMode?: boolean;
/**
* 이 속성을 true 설정하면 셀을 수정하고 완료를 하기 위해 엔터(Enter) 키를 입력할 때 수정 완료 행위만 하고 다음 행으로 선택자를 내리지 않습니다.
* @defaultValue false
*/
onlyEnterKeyEditEnd?: boolean;
/**
* 그룹핑 합계필드(groupingSummary)를 사용할 때 합계 필드에 사용되는 데이터가 칼럼의 expFunction 에 의해 생성된 데이터를 사용할지 여부를 나타냅니다.
* 즉, 의존적 칼럼 관계로 생성된 데이터를 그룹핑 합계 필드에 활용하고자 하는 경우 이 속성을 true 설정하십시오.
* @defaultValue false
*/
useSummaryExpData?: boolean;
/**
* 그룹핑 시 브랜치에 해당되는 행 출력 여부를 지정합니다. 이 속성은 그룹핑과 셀병합를 함께 적용할 때만 유효합니다.
* 그룹핑을 지정하면 계층 구조로 데이터가 변하게 됩니다.(TreeGrid 형태) 이 때 그룹핑의 브랜치에 해당되는 행이 동적으로 생성되면서 마치 빈행이 보이는 것처럼 느껴질 때가 있습니다.
* 이 속성을 false 로 지정하면 그룹핑 시 브랜치 행이 표시되지 않습니다.(enableCellMerge = true 인 경우만 유효)
* @defaultValue true
*/
showBranchOnGrouping?: boolean;
/**
* 셀 선택 시 선택된 셀에 테두리(border) 를 표시할지 여부를 나타냅니다.
* @defaultValue true
*/
showSelectionBorder?: boolean;
/**
* 그리드 툴팁 표시 여부를 지정합니다.
* @defaultValue false
*/
showTooltip?: boolean;
/**
* 그리드 데이터 복사하기(Ctrl+C), 붙여넣기(Ctrl+V) 활성화 여부를 지정합니다.
* @defaultValue true
*/
enableClipboard?: boolean;
/**
* 행번호 칼럼에서 행 번호를 반대로 출력할지 여부를 나타냅니다.
* reverseRowNum 을 true 로 설정하면 행번호 칼럼의 넘버링이 큰수에서 작은수로 출력됩니다.
* @defaultValue false
*/
reverseRowNum?: boolean;
/**
* 데이터 변경 시 수평 스크롤의 위치를 초기화 할지 여부를 나타냅니다. 이 속성을 false 로 설정하면 데이터 변경 시 수평 스크롤의 위치가 변하지 않습니다.
* @defaultValue true
*/
resetHScroll?: boolean;
/**
* 데이터 변경 시 수직 스크롤의 위치를 초기화 할지 여부를 나타냅니다. 이 속성을 false 로 설정하면 데이터 변경 시 수직 스크롤의 위치가 변하지 않습니다.
* @defaultValue true
*/
resetVScroll?: boolean;
/**
* 그리드에 입력되는 데이터가 계층구조의 데이터는 아니지만, id, parent 구조를 갖는 일반 데이터인 경우 트리 그리드로 출력할지 여부를 나타냅니다.
* flat2tree 속성은 반드시 treeIdField, treeIdRefField 가 선행적으로 설정되어야 합니다.
* @defaultValue false
*/
flat2tree?: boolean;
/**
* 그리드에 입력되는 데이터가 계층구조의 데이터는 아니지만, 트리 그리드로 출력하고자 할 때 행이 id, parent 필드를 갖어야 합니다.
* 이 때 id에 해당되는 데이터의 필드명을 treeIdField 값으로 지정하십시오.
* 이 속성은 flat2tree, treeIdRefField 속성과 관련이 있습니다.
* @defaultValue null
*/
treeIdField?: string | null;
/**
* 그리드에 입력되는 데이터가 계층구조의 데이터는 아니지만, 트리 그리드로 출력하고자 할 때 행이 id, parent 필드를 갖어야 합니다.
* 이 때 내 부모행에 해당되는 참고필드를 treeIdRefField 값으로 지정하십시오.
* 이 속성은 flat2tree, treeIdField 속성과 관련이 있습니다.
* @defaultValue null
*/
treeIdRefField?: string | null;
/**
* isColumnOriented = true 설정이라면 Home, End 키가 칼럼의 시작과 끝으로 각각 이동 합니다.
* 키보드의 Home, End 키가 칼럼이 아닌 행의 시작과 끝으로 이동하고자 한다면 이 속성을 false 설정하십시오.
* @defaultValue true
*/
isColumnOriented?: boolean;
/**
* 마우스 오른쪽 버턴 클릭 할 때 클릭 한 지점의 셀이 선택되도록 할지 여부를 지정합니다.
* 즉, 컨텍스트 메뉴를 보기 위해 오른쪽 클릭을 한 경우 클릭 지점이 왼쪽 클릭과 같이 셀 선택을 할지를 나타냅니다.
* @defaultValue false
*/
enableRightDownFocus?: boolean;
/**
* 그리드에 키보드 포커스 설정을 할지 여부를 지정합니다.
* 만약, enableFocus 를 false 로 지정하면 키포드 포커싱을 받지 못하기 때문에 키보드로 바로 셀 값 수정 및 화살표 키로 이동 등 키보드 이용을 사용할 수 없습니다.
* @defaultValue true
*/
enableFocus?: boolean;
/**
* 트리 그리드(계층형 데이터 그리드)에서 정렬을 할 때 최하단의 Depth 에 해당되는 행(rows)만 정렬을 실행할지 여부를 지정합니다.
* @defaultValue false
*/
onlyTreeLastDepthSorting?: boolean;
/**
* 고정 행(fixedRows) 를 지정한 경우, 정렬(sorting)을 할 때 고정 행으로 설정된 행이 정렬에서 제외 될지 여부를 지정합니다.
* excludeFixedRowsOnSorting=true 인 경우 고정 행으로 지정된 행은 항상 그대로 유지됩니다.
* @defaultValue true
*/
excludeFixedRowsOnSorting?: boolean;
/**
* 마지막 칼럼에서 오른쪽 화살표 키 또는 Tab 키를 누른 경우 다음 행의 시작 칼럼으로 이동할지 여부를 나타냅니다.
* 반대로 시작 칼럼에서 왼쪽 화살표 키 또는 Shift+Tab 키를 누른 경우 이전 행의 마지막 칼럼으로 이동 여부입니다.
* @defaultValue false
*/
wrapSelectionMove?: boolean;
/**
* 툴팁 표시를 설정한 경우(showTooltip:true 설정) 툴팁이 표시되는 시간을 ms 로 지정합니다.
* 즉, 특정 셀에 마우스 오버를 한 경우 tooltipSensitivity 값 이후에 툴팁이 출력됩니다.
* 예를 들어 tooltipSensitivity=1000 을 지정한 경우 1 초 후 툴팁이 표시됩니다. 마우스 오버 시 바로 툴팁 표시를 원하면 0 을 설정하십시오.
* @defaultValue 700
*/
tooltipSensitivity?: number;
/**
* 칼럼 레이아웃 작성 시 칼럼의 width 를 퍼센티지(%) 로 설정한 경우 퍼센티지 적용 대상이 명시적 칼럼 사이즈를 제외하고 남는 width를 대상으로 할지 여부를 지정합니다.
* 예를 들어 칼럼을 3개 만든 경우 각각 "100", "50%", "50%" 로 작성했을 때 다음 처럼 반응합니다.
* applyRestPercentWidth = false 인 경우 : 100 픽셀을 무시하고 전체 그리드 사이즈의 50% 공간을 각각 2번째, 3번째 칼럼 사이즈로 할당합니다.
* applyRestPercentWidth = true 인 경우 : 전체 그리드 사이즈에서 100 픽셀을 제외한 공간에서 각각 50% 씩 칼럼 사이즈로 할당합니다.
* 이 속성은 칼럼의 width 속성을 명시적 사이즈와 퍼센티지 사이즈를 혼용해서 사용할 때만 유효합니다.
* @defaultValue false
*/
applyRestPercentWidth?: boolean;
/**
* 칼럼을 사용자가 드래깅으로 리사이징(resizing) 할 때 칼럼의 minWidth 속성이 설정되었다면 해당 minWidth 를 무시할 지 여부를 지정합니다.
* 기본적으로 칼럼의 가로 사이즈는 minWidth 값보다 작아지지 않습니다. 그러나 ignoreColumnMinWidth=true 설정을 하면 minWith 는 무시됩니다.
* @defaultValue false
*/
ignoreColumnMinWidth?: boolean;
/**
* 그룹핑을 할 때 원래 데이터의 순서대로 출력시킬지 여부를 지정합니다.
* 기본적으로 그룹핑을 하면 String은 순서대로 출력을 시킵니다. 그러나 String 이나 Number 체제로 변환해도 무방한 값에는 순서대로 출력을 시키지 않습니다.
* 예를 들어 연도로 그룹핑을 한다고 할 때, 연도 데이터 값이 "2013", "2014", "2015" 라면 그룹핑 시 순서대로 나오지 않습니다.
* Number 체제의 작은 값이 위에 나옵니다. 이런 경우 원래 데이터의 순서대로 나오게 하는 속성이 keepOrderingOnGrouping=true 입니다.
* 주의 : 이 속성은 일반적으로 불필요 합니다. 데이터의 값이 Number 인 경우(또는 Number 로 캐스팅해도 같은 경우) true 설정하십시오.
* 데이터의 개수가 많은 경우 그리드 그룹핑 성능에 영향을 미치므로 무조건적인 true는 피하십시오.
* @defaultValue false
*/
keepOrderingOnGrouping?: boolean;
/**
* 행번호 칼럼 설정한 경우(showRowNumColumn=true) 행번호 칼럼의 헤더에 출력할 텍스트를 지정합니다.
* @defaultValue "No."
*/
rowNumHeaderText?: string;
/**
* softRemoveRowMode=true 설정한 경우 삭제된 행 아이템은 삭제 표시가 남습니다.
* 그러나 서버에서 가져온 원래 데이터(그리드에 최초에 삽입한 데이터)가 아닌 사용자가 추가한 행을 삭제할 때, 사용자가 추가한 행은 softRemoveRowMode 를 적용하지 않을 수 있습니다.
* 즉, 사용자가 추가한 행은 삭제 표시가 아닌 바로 제거하도록 할려면 softRemovePolicy="exceptNew" 를 설정하십시오.
* softRemovePolicy 의 유효값은 "all", "exceptNew" 입니다.
* @defaultValue "exceptNew"
*/
softRemovePolicy?: 'all' | 'exceptNew';
/**
* 헤더의 필터 아이콘을 클릭했을 때 나오는 필터 기본 메뉴의 높이를 픽셀 단위로 지정합니다.
* @defaultValue 320
*/
filterLayerHeight?: number;
/**
* 헤더의 필터 아이콘을 클릭했을 때 나오는 필터 기본 메뉴의 넓이를 픽셀 단위로 지정합니다.
* @defaultValue 260
*/
filterLayerWidth?: number;
/**
* 헤더의 필터 아이콘을 클릭했을 때 나오는 필터 기본 메뉴의 검색 입력 필드(input filed)의 placeholder 텍스트를 지정합니다.
* @defaultValue "검색"
*/
filterSearchPlaceholder?: string;
/**
* 리모트 리스트 렌더러를 사용할 때 사용자가 입력 전 출력시킬 placeholder 텍스트를 지정합니다.
* placeholder 는 브라우저에 의존적입니다. 따라서 무시될 수 있습니다.(브라우저 영향)
* @defaultValue "검색어를 입력하세요."
*/
remoterPlaceholder?: string;
/**
* 개별 칼럼에 editable=false 를 설정한 경우 키보드 방향키(또는 Tab, Home, End)가 해당 칼럼(읽기 전용 칼럼)을 건너 뛰어 셀렉션을 표현할지 여부를 지정합니다.
* 주의 : cellEditBegin 이벤트로 동적 편집 불가 설정은 한 셀에 대해서는 적용되지 않습니다.
* @defaultValue false
*/
skipReadonlyColumns?: boolean;
/**
* 엔터키가 다음 행으로 이동하지 않고, 다음 칼럼으로 이동할지 여부를 지정합니다.
* @defaultValue false
*/
enterKeyColumnBase?: boolean;
/**
* 엑스트라 행 체크박스(showRowCheckColumn=true)를 설정한 경우, 헤더 부분에 전체 선택 체크박스를 표시할지 여부를 지정합니다.
* @defaultValue true
*/
showRowAllCheckBox?: boolean;
/**
* 칼럼과 칼럼 사이의 구분자를 더블 클릭 할 때 해당 칼럼의 셀 내용에 맞게 사이즈가 최적화 됩니다.
* 이 때 헤더 텍스트도 고려할지 여부를 지정합니다.
* 만약, 이 속성을 false 처리하면 헤더 텍스트는 무시하고 실제 셀 텍스트에 맞게 칼럼의 사이즈가 조정됩니다.
* @defaultValue true
*/
isFitColumnSizeHeaderText?: boolean;
/**
* 다수의 행을 클립 보드 붙여넣기(Ctrl+V) 할 때 그리드의 마지막 하단 행보다 클립보드 양이 많은 경우, 새 행을 만들고 붙여넣기 할지 여부를 지정합니다.
* 기본값은 클립보드의 양이 많은 경우 자동으로 그리드에 새 행을 추가하고 모든 클립보드 데이터를 붙여 넣습니다.
* 그러나 isGenNewRowsOnPaste=false 처리 시 그리드 출력 행보다 많은 클립보드 데이터는 무시하게 됩니다. 즉, 새 행을 만들지 않습니다.
* @defaultValue true
*/
isGenNewRowsOnPaste?: boolean;
/**
* 푸터의 위치를 지정합니다. 기본적으로 푸터는 그리드 하단에 출력합니다.
* 그러나 푸터를 그리드 상단에 위치시켜 Header Summary 기능으로 활용하고자 한다면 이 값을 "top"으로 지정하십시오.
* 유효값은 "top", "bottom" 입니다.
* @defaultValue "bottom"
*/
footerPosition?: 'top' | 'bottom';
/**
* 편집 가능 그리드(editable=true)에서 수정, 추가, 삭제 행을 원래 상태로 복구 가능하게 할지 여부를 지정합니다.
* enableRestore 를 true 로 설정한 경우, 행 상태 칼럼(showStateColumn=true) 의 상태 아이콘을 클릭하면 복구가 됩니다.
* 즉, 수정을 한 경우 연필 아이콘이 나오는데 이를 클릭하면 수정 전으로 복구되고, 추가된 행인 경우 플러스 아이콘이 나오는데 이를 클릭하면 추가 취소로 복구됩니다.
* 마찬가지로 삭제 아이콘을 클릭하면 삭제 취소로 복구됩니다.
* @defaultValue true
*/
enableRestore?: boolean;
/**
* 편집 가능 그리드(editable=true)에서 실행 취소(Undo), 다시 실행(Redo) 기능을 사용할지 여부를 지정합니다.
* enableUndoRedo 를 true 로 설정하면, Ctrl+Z, Ctrl+Y 단축키가 활성화 됩니다.
* @defaultValue true
*/
enableUndoRedo?: boolean;
/**
* 실행 취소(Undo), 다시 실행(Redo) 기능을 사용할 때 Undo, Redo 가능한 커맨드 스택의 총량(Stack length)을 지정합니다.
* 예를 들어 이 속성의 값을 30 으로 설정하면, 30개의 커맨드만 관리 됩니다.
* 0인 경우 길이의 제한은 없습니다. 그러나, 내부적으로 필요에 의해 스택 사이즈 초기화가 이루어집니다.
* @defaultValue 0
*/
undoRedoStackSize?: number;
/**
* 편집 가능 그리드에서 "F2 또는 (더블)클릭" 으로 편집 상태로 들어간 경우 위, 아래 화살표 키가 편집 완료 역할 할지 여부를 지정합니다.
* 기본적으로 "F2 또는 (더블)클릭" 으로 편집 상태 들어간 경우는 해당 입력기(inputer) 안에서 키보드가 이동합니다.
* 이 속성은 editRenderer 의 기본 유형(default type)인 InputEditRenderer 에만 유효합니다.
* @defaultValue true
*/
updownArrowEditEnd?: boolean;
/**
* 트리 그리드에서 엑스트라 행 체크박스를 사용하는 경우, 부모를 체크 할 때 그 자손들도 체크하게 할지 여부를 지정합니다.
* 즉, 부모를 체크하면 하위 자손들도 체크되고, 체크 해제 하면 그 하위 자손들도 체크 해제 됩니다.
* 이 속성은 트리 그리드에서만 유효합니다.
* @defaultValue false
*/
rowCheckDependingTree?: boolean;
/**
* 엑스트라 체크박스(showRowCheckColumn=true) 를 설정한 경우 헤더에 위치한 전체 선택/해제 체크박스가 독립적인 행위를 할지 여부를 지정합니다.
* 독립적인 행위란, 기본적으로 전체 선택/해제를 할 경우 개별 행들의 체크박스가 선택/해제가 이루어집니다.
* 그러나 independentAllCheckBox=true 설정 시 전체 선택/해제 이벤트만 발생 할 뿐 개별 행들의 체크박스를 선택/해제 하지 않습니다.
* 전체 선택/해제를 원하는 방식으로 사용자 정의하고자 한다면 independentAllCheckBox 를 true 설정하여 rowAllCheckClick 이벤트를 바인딩하여 제어하십시오.
* @defaultValue false
*/
independentAllCheckBox?: boolean;
/**
* 고정 칼럼 세로 선이 그리드 행 개수와 상관없이 그리드 높이에 맞게 출력 시킬 지 여부를 지정합니다.
* 만약 showFullFixedRule 속성을 true 로 지정하면, 고정 칼럼 세로 선은 항상 그리드 최하단까지 출력됩니다.
* @defaultValue false
*/
showFullFixedRule?: boolean;
/**
* selctionMode 을 행 선택자("singleRow" 또는 "multpleRows") 로 설정하고, enableCellMerge 를 true 로 설정했을 때 행 선택자가 병합된 셀까지 선택되도록 할지를 지정합니다.
* 예를 들어 1~5행의 첫번째 칼럼이 병합된 경우, rowSelectionWithMerge=true 설정을 하면 1~5번의 어떤 행을 선택하든 병합된 첫번째 칼럼은 선택되어집니다.
* @defaultValue true
*/
rowSelectionWithMerge?: boolean;
/**
* 엑스트라 체크박스 체커블 함수(rowCheckableFunction)을 정의한 경우, checkable 이 아닌 체크박스를 disabled 처리도 함께 시킬지 여부를 지정합니다.
* rowCheckableFunction 으로 정의된 함수를 그리드가 렌더링 시 빈번히 호출됩니다.
* 따라서 rowCheckableFunction 으로 정의된 함수의 로직이 복잡하다면, 이 속성 rowCheckableWithDisabled = false 처리 후 rowCheckDisabledFunction 을 따로 정의하십시오.
* @defaultValue false
*/
rowCheckableWithDisabled?: boolean;
/**
* 그리드의 셀 또는 행을 복사(Ctrl+C) 할 때 원래 데이터 값을 복사할 지 그리드에 의해 포매팅된 값을 복사할 지 여부를 결정할 수 있는 함수입니다.
* 예를 들어 실 데이터는 1000 이나, 그리드에 의해 "1,000원" 으로 포매팅되어 출력되고 있을 때 Ctrl+C 로 복사할 대상이 1000 또는 "1,000원" 인지를 동적으로 결정하게 됩니다.
* copyDisplayFunction 는 copyDisplayValue 속성보다 우선 순위가 높습니다. 따라서 copyDisplayFunction 를 지정하면 copyDisplayValue 는 무시됩니다.
* @defaultValue null
*/
copyDisplayFunction?: any;
/**
* 셀렉션모드(selectionMode) 가 "singleRow" 또는 "multipleRows" 인 경우 복사(Ctrl+C) 할 때 단일 셀을 복사할지 여부를 지정합니다.
* 기본적으로 "singleRow", "multipleRows" 인 경우, 행 단위로 복사가 이루어집니다.
* 그러나 행 모드인 경우 선택된 단일 셀을 복사하고자 한다면 이 속성을 true 설정하십시오.
* @defaultValue false
*/
copySingleCellOnRowMode?: boolean;
/**
* 그리드에 삽입된 데이터 양이 적어 수직 스크롤이 생성되지 않았을 때 마우스 휠(wheel)이 수평 스크롤에 반응할지 여부를 지정합니다.
* 만약, enableMouseWheel=false 설정하면 enableHScrollByWheel 는 무시됩니다.
* @defaultValue true
*/
enableHScrollByWheel?: boolean;
/**
* 셀 병합인 경우 (enableCellMerge=true) 널 데이터(null, undefined, "")에 대한 세로 병합 정책을 결정합니다.
* 세로 병합에 한해 널 데이터의 병합 정책을 결정 짓습니다. 이와 무관하게 가로 병합은 온전히 값이 같아야 병합됩니다.
* 유효 값은 "default", "withNull", "valueWithNull" 입니다.
* @defaultValue "default"
*/
cellMergePolicy?: 'default' | 'withNull' | 'valueWithNull';
/**
* 그리드에 일반 데이터(즉, 트리 계층형 데이터가 아닌 일반 배열 데이터)를 삽입 한 경우, 하위 데이터가 없는 트리 그리드로 출력합니다.
* 이 그리드는 온전한 트리 그리드의 모습을 갖추고 있으나 하위 데이터가 없기 때문에 해당 행의 트리의 열기/닫기 아이콘을 눌렀을 때 그 행에 맞는 하위 데이터를 요청하는 형태의 트리 그리드로 출력합니다.
* 따라서 트리 그리드의 하위 행을 동적으로 열기/닫기 아이콘을 눌렀을 때 서버 요청하여 적용하고자 하는 경우 treeLazyMode 를 true 설정하십시오.
* @defaultValue false
*/
treeLazyMode?: boolean;
/**
* 수직 스크롤이 있는 그리드에서 현재 화면의 최하단 행(반절 가려진 행)을 마우스로 클릭 시 온전하게 해당 행이 보이도록 스크롤을 자동으로 내릴지 여부를 지정합니다.
* @defaultValue true
*/
lastRowScrollOnClick?: boolean;
/**
* 그룹핑 합계 필드(소계) 셀 가로 병합 실행 여부를 지정합니다.
* 선행적으로 그리드 속성인 enableCellMerge 을 true 설정 해야 합니다.
* @defaultValue false
*/
enableSummaryMerge?: boolean;
/**
* enableSummaryMerge를 true 로 설정한 경우 즉, 그룹핑 소계 셀 병합 정책을 결정합니다.
* 유효값은 다음과 같습니다.
* "default" : 그룹핑 필드 자신의 이전에서만 가로 병합 실행
* "all" : 그룹핑 필드 지정 개수 만큼 병합 실행
* @defaultValue "default"
*/
summaryMergePolicy?: 'default' | 'all';
/**
* 터치 기기(touch devices)에서 길게 누르기(Long Tap) 이벤트를 활성화 할지 여부를 지정합니다.
* @defaultValue false
*/
enableLongTap?: boolean;
/**
* 터치 기기(touch devices)에서 길게 누르기(Long Tap)를 할 때 이 속성 값의 시간(ms단위)만큼 누르고 있을 경우 발생합니다.
* 선행 조건으로 enableLongTap 를 true 로 설정해야 하며 단위는 ms입니다.(최소값:500)
* @defaultValue 700
*/
longTapDelay?: number;
/**
* 정의한 칼럼 레이아웃을 가로 스크롤 없이 현재 그리드 영역에 꽉차도록 칼럼들을 비율로 계산하여 출력합니다.
* 이 속성을 true 로 설정하면 어떤 경우도 가로 스크롤이 생성되지 않습니다. 또한 모든 칼럼들의 넓이(width)는 비율로 계산되어 적용됩니다.
* 참고 : fillColumnSizeMode 를 true 로 설정하면 fixedColumnCount 속성은 무시됩니다.
* @defaultValue false
*/
fillColumnSizeMode?: boolean;
/**
* 그리드 셀을 수정 중일 때 global resize 이벤트가 발생한 경우 수정을 종료 시킬지 여부를 지정합니다.
* global resize 이벤트는 일반적으로 최상위 계층인 window 창의 크기가 변경된 경우를 의미 합니다.
* 터치 디바이스의 경우 소프트 키보드의 유무에 의해 global resize 이벤트가 발생하기 때문에 이 속성은 false 로 처리됩니다.
* @defaultValue true
*/
autoEditCompleteOnResize?: boolean;
/**
* 행 드래깅 가능 여부를 지정합니다.
* 만약 현재 그리드가 정렬된 상태이거나 필터링된 상태라면 그 상태에서는 행 드래깅이 불가능합니다.
* 정렬 및 필터링이 해제된 상태여야 합니다.
* @defaultValue false
*/
enableDrag?: boolean;
/**
* 행 드래깅 손잡이 뿐만 아니라 셀을 바로 드래깅해서 행 이동(복사) 가능 여부를 지정합니다.
* 이 속성을 설정하면 selectionMode 가 "multipleCells" 또는 "multipleRows" 인 경우 다중 셀(행) 선택을 하지 않고 바로 드래깅 행위를 하게 됩니다.
* 속성 enableDrag=true 설정이 선행되어야 합니다.
* @defaultValue false
*/
enableDragByCellDrag?: boolean;
/**
* 다수의 행을 한번에 드래깅 가능 여부를 지정합니다.
* selectionMode 를 "multipleCells" 또는 "multipleRows" 인 경우 유효합니다. 또한 속성 enableDrag=true 설정이 선행되어야 합니다.
* 만약 계층형 그리드(TreeGrid)인 경우 계층형 그리드는 기본적으로 다수 행 드래깅을 지원하지 않으므로 이 속성은 false 처리 됩니다.
* @defaultValue true
*/
enableMultipleDrag?: boolean;
/**
* 행 드래깅 하였을 때 드랍 가능 여부를 지정합니다.
* 만약 이 속성을 false 설정하면 어떤 경우라도 드랍을 허용하지 않습니다.
* 드랍을 받을 수 있는 최상위 속성입니다.
* @defaultValue true
*/
enableDrop?: boolean;
/**
* 행 드래깅 하였을 때 드랍이 가능한 그리드가 자신을 포함하여 다른 곳에도 있는지 여부를 지정합니다.
* 그리드와 그리드 간의 드래그&드랍을 위해선 반드시 이 속성을 true 설정해야 합니다.
* 드래깅 하는 그리드와 드랍 받는 그리드는 동일한 문서 객체 모델(DOM)에 존재해야 합니다. 이종간의 문서 객체 모델(DOM) 에서 드래그&드랍은 불가능합니다.
* @defaultValue false
*/
dropToOthers?: boolean;
/**
* 다른 그리드에 드랍 가능 여부 일 때 받아줄 수 있는 그리드의 pid 를 배열의 요소로 지정합니다.
* 즉, 그리드와 그리드 간의 드래그&드랍일 때 선택적으로 허용 여부를 결정 지을 수 있습니다.
* 이 속성을 null 로 설정하면 모든 그리드 간의 드래그&드랍을 허용합니다. 단, 모든 그리드의 속성 enableDrop=true 설정했을 경우입니다.
* 만약 이 속성을 dropAcceptableGridIDs=["#grid_wrap2"] 로 설정한다면 #grid_wrap2 에 있는 그리드에만 드랍을 허용합니다.
* @defaultValue null
*/
dropAcceptableGridIDs?: string[] | null;
/**
* 행 드래깅 시 마우스 커서 옆에 출력되는 텍스트를 지정합니다.
* @defaultValue "$value 행(들)"
*/
dragRowsText?: string;
/**
* 정렬(sorting) 할 때 빈값(undefined, null, "")에 해당되는 값은 오름차순, 내림차순과 관계 없이 항상 아래에 위치시킬지 여부를 지정합니다.
* 만약 nullsLastOnSorting=fasle 설정한다면 빈값에 해당되는 값은 오름차순 시 상단에, 내림차순 시 하단에 위치합니다.
* @defaultValue true
*/
nullsLastOnSorting?: boolean;
/**
* selectionChange 이벤트 발생 시 간소화된 정보만 받을지 여부를 지정합니다.
* 간소화한 경우 selectionChange 이벤트의 파라메터 요소인 event.selectedItems 를 포함시키지 않습니다.
* selectionChange 이벤트가 발생될 때 선택한 셀이 수천~수만을 넘어 가면 퍼포먼스에 악영향을 미칩니다.
* 선택한 셀을 모두 보고자 하는 경우가 아니라면 true 설정을 권장합니다.
* @defaultValue false
*/
simplifySelectionEvent?: boolean;
/**
* 페이징을 사용할 때 1 페이지에 출력할 행의 개수를 변경할 수 있는 select UI 를 하단에 출력할지 여부를 지정합니다.
* @defaultValue false
*/
showPageRowSelect?: boolean;
/**
* 페이징의 행의 개수를 변경할 수 있는 select 의 option들을 지정합니다.
* 반드시 정수형의 배열을 설정해야 합니다.
* @defaultValue [10, 20, 30, 40, 50]
*/
pageRowSelectValues?: number[];
/**
* 삽입한 모든 데이터를 세로 스크롤 없이 출력하고 데이터에 맞게 그리드의 높이를 자동 결정할지를 지정합니다.
* 데이터를 삽입하기 전(또는 데이터 없는 경우)에는 최초 지정된 높이로 그리드가 출력되며 데이터를 삽입하거나 행을 추가하면 유동적으로 그리드의 높이는 맞게 변경됩니다.
* 이 속성을 true 로 설정하면 resize 메소드를 통해 사용자가 높이를 지정할 수 없습니다.
* wordWrap 을 true 로 설정한 경우 이 속성은 무시됩니다. (단, usePaging=true, wordWrap=true 인 경우 autoGridHeight 은 사용 가능)
* 그리드의 세로 스크롤이 없이 데이터를 모두 출력하므로 많은 양의 데이터를 초기에 넣지 마십시오. 퍼포먼스에 악영향을 미칩니다.
* @defaultValue false
*/
autoGridHeight?: boolean;
/**
* rowIdField 에 대한 신뢰 모드로 사용할지 여부를 지정합니다.
* 새 행 추가 시 rowIdField 에 대한 값을 그리드가 결정합니다. rowIdField 에 대한 값은 중복 되지 않는 고유의 값이여야 하기 때문입니다.
* rowIdTrustMode 를 true 로 설정하면 rowIdField 설정 값이 중복되지 않는 값으로 신뢰하여 그리드가 해당 값을 만들지 않습니다.
* 예로 rowIdField 를 id 로 설정한 경우 행 추가되는 Object 의 id 필드는 기존 데이터의 id 필드와 중복되지 않는 온전한 값으로 존재한다고 믿습니다.
* 참고 : rowIdField 를 설정하지 않은 경우 이 속성은 무시됩니다.
* @defaultValue false
*/
rowIdTrustMode?: boolean;
/**
* 수정할 때 사용자가 입력한 빈 값("")을 명시적인 null 로 처리할지 여부를 지정합니다.
* 기본적으로 사용자가 빈 값을 입력하면 "" 로 수정 완료 처리됩니다.
* true 인 경우 빈 값을 null 로 false 인 경우 빈 값을 "" 로 적용 시킵니다.
* @defaultValue false
*/
blankToNullOnEditing?: boolean;
/**
* dataType을 "numeric" 으로 설정한 셀을 수정할 때 사용자가 입력한 빈 값("")을 명시적인 null 로 처리할지 여부를 지정합니다.
* 기본적으로 사용자가 빈 값을 입력하면 "numeric" 필드로 설정했기 때문에 0 으로 수정 완료 처리됩니다.
* true 인 경우 빈 값을 null 로 false 인 경우 빈 값을 0 으로 적용 시킵니다.
* @defaultValue false
*/
blankNumericToNullOnEditing?: boolean;
/**
* 칼럼 헤더의 가로 병합(colSpan)을 설정한 경우 칼럼 감추기/보이기 메소드로 병합된 칼럼을 감추기/보이기 할 때 가로 병합 대상이 된 칼럼도 같이 감추기/보이기 할지 여부를 지정합니다.
* 이 속성을 true 설정한 경우 칼럼 감추기/보이기 메소드 사용 시 가로병합에 해당되는 칼럼 모두가 감추기/보이기 됩니다.
* @defaultValue true
*/
dependentColSpan?: boolean;
/**
* 다수의 행을 클립 보드 붙여넣기(Ctrl+V) 할 때 그리드의 마지막 하단 행보다 클립보드 양이 많은 경우, 새 행을 만들고 붙여넣기가 실행됩니다.
* 이때 만들어진 새 행의 모든 셀 값에 대하여 cellEditBegin 이벤트를 송출 시킬지 여부를 지정합니다.
* true 를 설정한다면 cellEditBegin 이벤트를 송출하지 않습니다.
* false 를 설정한다면 cellEditBegin 이벤트가 송출됩니다.
* @defaultValue false
*/
notBeginEventNewRowsOnPaste?: boolean;
/**
* 그룹핑을 할 때 그룹핑 필드들이 첫 칼럼로 옮겨지며 기본적으로 출력됩니다.
* 이때 칼럼 레이아웃에서 정의한 칼럼 순서 그대로를 유지할지 여부를 지정합니다.
* 이 속성을 true 설정하면 그룹핑 할 때 칼럼 순서의 변화 없이 기존 칼럼 순서 그대로 유지하며 그룹핑이 됩니다.
* @defaultValue false
*/
keepColumnOrderOnGrouping?: boolean;
/**
* 그룹핑 소계 행(Summary Rows)의 앞 부분에 값을 채울지 여부를 지정합니다.
* 이 속성을 true 설정하면 그룹핑 소계 행에서 그룹핑 필드에 해당되는 셀도 세로 병합의 대상이 됩니다.
* @defaultValue false
*/
fillValueGroupingSummary?: boolean;
/**
* 그룹핑 소계 행(Summary Rows)을 그룹핑의 마지막 필드에 일괄적으로 열(column) 맞춤하여 출력시킬지 여부를 지정합니다.
* 이 속성은 fillValueGroupingSummary=true 설정이 선행되어야 합니다.
*
* @defaultValue false
*/
adjustSummaryPosition?: boolean;
/**
* 그룹핑 소계 행(Summary Rows)의 출력 위치를 지정합니다.
* 소계 행의 출력 위치는 기본적으로 하단에 출력됩니다. 상단에 출력하고자 한다면 "top" 을 설정하십시오.
* 유효값은 "top", "bottom" 입니다.
* @defaultValue "bottom"
*/
groupingSummaryPosition?: 'top' | 'bottom';
/**
* 셀 세로 병합을 하는 경우(enableCellMerge=true) 실제 rowspan 처리 하여 보일지 여부를 지정합니다.
* 이 속성을 false 로 설정하면 실제 rowspan 은 처리하지 않고 상단에만 값을 출력하고 그 아래 대상의 셀은 빈 값으로 보이게 처리합니다.
* false 설정하면 실제 rowspan 을 하지 않았기 때문에 병합된 셀 블럭이 아닌 개별 셀을 선택하고 수정 할 수 있습니다.
* @defaultValue true
*/
cellMergeRowSpan?: boolean;
/**
* 붙여넣기로 새행이 생길 때 칼럼의 editable=false 설정한 칼럼의 값을 새행이 생기는 경우에도 고칠 수 없을지 여부를 지정합니다.
* false 인 경우에는 붙여넣기로 새행이 생길 때 클립보드 데이터가 적용됩니다.
* true 인 경우에는 붙여넣기로 새행이 생길 때 클립보드 데이터 적용되지 않습니다.
* @defaultValue false
*/
uneditableNewRowsOnPaste?: boolean;
/**
* 그룹핑을 설정한 경우 그룹핑 필드에 해당하는 셀의 수정 가능 여부를 지정합니다.
* 이 속성을 true 로 설정한 경우 cellMergeRowSpan 속성을 true 로 설정하기를 권장합니다.
* @defaultValue false
*/
editableOnGroupFields?: boolean;
/**
* 푸터를 설정한 경우 푸터 행의 개수를 지정합니다.
* @defaultValue 1
*/
footerRowCount?: number;
/**
* 푸터의 행 개수를 다수로 설정한 경우 개별 푸터 행 높이를 지정합니다.
* @defaultValue null
*/
footerHeights?: number[] | null;
/**
* 정렬을 할 때 데이터 기반이 아닌 그리드에 출력된 값을 기반으로 정렬을 실행할지 여부를 지정합니다. (선행 : enableSorting 속성 true 설정)
* 예로 드랍다운리스트의 key-value 모드를 사용하는 경우 실제 데이터는 key 값이, 보여지는 값은 value 입니다.
* 여기서 정렬을 할 때 기본은 데이터 기반으로 정렬이 됩니다. 그러나 이 속성을 true 설정하면 보여지는 값인 value 기반으로 정렬을 실행합니다.
* 데이터 기반의 정렬보다 퍼포먼스에 영향을 미치므로 무조건적인 true 설정은 피하십시오.
* @defaultValue false
*/
sortableByFormatValue?: boolean;
/**
* 수정 가능한 그리드에서 Del 키, Ctrl + X 키로 값을 삭제 불가능한 렌더러(renderer), 에디트렌더러(editRenderer) 의 유형(type) 을 정의합니다.
* 여기서 정의한 renderer, editRenderer는 Del 키, Ctrl + X 키로 값을 삭제 할 수 없습니다.
* 다음은 기본값으로 정의된 모습니다.
* preventDelKeyMap = {
* DropDownListRenderer : true,
* LinkRenderer : true,
* CalendarRenderer : true,
* JQCalendarRenderer : true,
* BTCalendarRenderer : true,
* CheckBoxEditRenderer : true,
* SwitchRenderer : true
* };
* @defaultValue Object
*/
preventDelKeyMap?: any;
/**
* 그리드 상위 태그의 CSS transform 에 scale을 한 경우 그리드에 동일한 scale 값을 지정하여 일관된 좌표 공간이 되도록 설정합니다.
* 이는 그리드 상위 태그의 CSS transform 에 scale 과 matrix를 설정한 경우만 유효합니다.
* 예로 80%의 scale 을 설정했다면 상위 태그의 CSS transform 은 다음과 같고 그리드 속성 scaleFactor 는 동일한 값인 0.8 을 설정해야 합니다.
* 1. transform: scale(0.8);
* 2. transform: matrix(0.8, 0, 0, 0.8, 0, 0);
* @defaultValue 1
*/
scaleFactor?: number;
/**
* 그리드 검색 기능을 실행 할 때 포매팅된 값을 대상으로 검색을 실행할지 여부를 지정합니다.
* 기본은 그리드의 포매팅된 값이 아닌 원본 데이터 값을 검색합니다.
* 예로 그리드에 드랍다운리스트의 key-value 모드로 001 을 "영업본부" 로 출력하고 있는 경우 검색을 할 때 검색의 대상이 되는 값은 원본 데이터는 001 입니다.
* 그러나 searchByFormatValue 을 설정한다면 사용자가 "영업본부" 로 검색하면 001에 대한 셀을 찾아 갑니다.
* @defaultValue false
*/
searchByFormatValue?: boolean;
/**
* 엑스트라 체크박스(showRowCheckColumn)에서 쉬프트키(ShiftKey)를 누른 채 클릭해서 다중 체크하게 할지 여부를 지정합니다.
* @defaultValue true
*/
enableRowCheckShiftKey?: boolean;
/**
* 세로 병합된 셀을 선택했을 때 병합된 셀의 첫번째 셀 선택이 아닌 직접적으로 선택된 셀을 구분해서 선택할지 여부를 지정합니다.
* 예로 3개의 셀이 세로 병합된 경우 가운데 셀을 클릭하면 병합되었기 때문에 첫번째 셀이 선택됩니다. 이 속성을 false 처리하면 가운데 셀만 선택시킵니다.
* @defaultValue false
*/
separatedSelectionOnMerge?: boolean;
/**
* 행 드래그&드랍을 도와주는 엑스트라 칼럼을 최좌측에 생성합니다.
* 생성된 엑스트라 칼럼의 셀을 드래깅하여 행을 이동 시킬 수 있습니다.
* @defaultValue false
*/
showDragKnobColumn?: boolean;
/**
* 행 드래그&드랍을 도와주는 엑스트라 칼럼의 넓이를 지정합니다.
* @defaultValue 32
*/
dragKnobColumnWidth?: number;
/**
* 그리드에 삽입하는 데이터와 무관하게 계층형 그리드(트리 그리드)로 출력시킬지 여부를 지정합니다.
* 계층형 그리드(트리 그리드)는 삽입하는 데이터가 계층형인 경우 트리 그리드로 출력을 시키는게 기본입니다.
* 그러나 forceTreeView = true 설정하면 데이터와 무관하게 계층형(트리 그리드)로 출력 시킵니다.
* @defaultValue false
*/
forceTreeView?: boolean;
/**
* 페이징 모드(usePaging=true)인 경우 세로 스크롤 최하단의 여백을 추가로 지정합니다.
* 예로 속성의 값을 10으로 설정하면 10 픽셀만큼 추가로 세로 스크롤을 통해 더 내릴 수 있습니다.
* @defaultValue 1
*/
pagingBottomGap?: number;
/**
* 그리드 헤더 하단에 필터값을 바로 입력할 수 있는 입력 행을 출력 시킬지 여부를 지정합니다.
* 인라인 필터 행에 값을 입력하면 매 입력마다 필터링이 됩니다.(선행 속성 enableFilter = true 설정)
* @defaultValue false
*/
showInlineFilter?: boolean;
/**
* 인라인 필터에서 필터 값 입력 시 반응 딜레이를 설정합니다.
* 예로 500 설정 시 사용자가 입력 종료 500ms 시간이 지난 이후 필터링을 실행합니다.
* 0을 설정하면 매 입력마다 필터링을 실행합니다.
* 많은 수의 데이터나 사용자의 매 입력의 불필요한 필터링을 원치 않으면 300~500 설정을 권합니다.
* @defaultValue 300
*/
inlineFilterDelay?: number;
/**
* 그리드 홀수 행, 짝수 행에 각각의 지정된 배경색 스타일이 적용될지 여부를 지정합니다.
* @defaultValue true
*/
showRowBgStyles?: boolean;
/**
* 엑스트라 렌더러의 출력 순서를 결정합니다.
* 엑스트라 렌더러는 드래깅 손잡이(showDragKnobColumn), 행 번호(showRowNumColumn), 행 상태(showStateColumn), 행 체크박스(showRowCheckColumn) 4가지가 존재합니다.
* 엑스트라 렌더러 활성화 속성 이름을 배열에 지정하면 해당 순서에 맞게 출력 시킵니다.
* 예로 작성하면 다음과 같습니다.
* // 엑스트라 체크박스 칼럼을 맨 앞으로, 나머지 칼럼은 기본 순서 유지 (나머지 칼럼 유지는 배열에 지정하지 않으면 유지 시킴)
* extraColumnOrders = ["showDragKnobColumn"];
*
* // 엑스트라 체크박스, 행 번호, 상태, 드래깅 손잡이 순으로 순서 지정하기
* extraColumnOrders = ["showRowCheckColumn", "showRowNumColumn", "showStateColumn", "showDragKnobColumn"];
* @defaultValue ["showDragKnobColumn", "showRowNumColumn", "showStateColumn", "showRowCheckColumn"]
*/
extraColumnOrders?: string[];
/**
* 칼럼의 최적의 사이즈를 구할 때 적용되는 추가 픽셀을 지정합니다.
* 예로 칼럼과 칼럼의 경계를 더블 클릭하여 크기(width)를 내용물에 맞출 때 추가로 적용 시킬 픽셀 사이즈를 적용 시킵니다.
* @defaultValue 1
*/
widthFitGap?: number;
/**
* 그룹핑을 할 때 데이터의 순서를 그룹핑 필드의 값 오름차순으로 출력 시킬지 여부를 지정합니다.
* 이 속성을 true 설정하면 그룹핑 필드 설정된 칼럼의 데이터 순서는 오름차순으로 출력됩니다.
* 실제 그리드 정렬(sorting)과는 무관한 단순 출력 방식 지정 입니다.
* @defaultValue false
*/
orderAscOnGrouping?: boolean;
/**
* 엑스트라 체크박스의 헤더 전체 체크박스 설정/해제가 현재 데이터 기반으로 될지 여부를 지정합니다.
* 예로 필터링되어 현재 3개의 행만 보일 때 전체 체크를 하면 현재 보이는 3개의 행만 선택됩니다.
* 페이징 모드(usePaging = true)에서 현재 페이지의 행들 대상으로 전체 체크 설정/해제 하고자 한다면 이 속성을 설정하십시오.
* 현재 데이터에 변화가 생긴 경우 전체 체크는 풀립니다
* 참고 : 계층형 그리드(트리 그리드)에서 해당 속성 설정은 무시됩니다.
* @defaultValue false
*/
isRowAllCheckCurrentView?: boolean;
/**
* 다수 값을 붙여 넣기 할 때 수정 불가능한 칼럼은 값 자체를 무시할지 여부를 지정합니다.
* 예로 A, B, C 칼럼이 존재하고 B칼럼이 수정 불가 일 때 1, 2, 3 으로 대표되는 값을 A열에서 붙여 넣기 하면
* true 인 경우에는 A열에 1, B열 수정 불가, C열은 3으로 붙여 넣기 됩니다. 즉, 해당 열이 수정 불가라 그 자리에 들어가야 할 값 자체를 무시합니다.
* false 인 경우에는 A열에 1, B열 수정 불가, C열은 그 다음 값인 2로 붙여 넣기 합니다.
* @defaultValue true
*/
skipUneditableOnPaste?: boolean;
/**
* 정렬의 오름차순, 내림차순 순서를 지정합니다.
* 헤더 클릭하여 정렬을 할 때 기본 순서는 오름차순, 내림차순, 원복의 순서 입니다.
* 이 순서를 변경하거나 항목에서 제외 시킬 수 있습니다.
* @defaultValue [0, 1, -1]
*/
sortingSequence?: number[] | null;
/**
* 엑스트라 체크박스의 헤더에 표시되는 전체 체크박스를 표시하지 않을 때 출력할 텍스트를 지정합니다.
* @defaultValue ""
*/
checkHeaderText?: string;
/**
* 드래깅으로 행을 이동할 때 보여지는 툴팁의 표시 여부를 지정합니다.
* @defaultValue true
*/
showDragRowsTooltip?: boolean;
/**
* 기본 내장 태그인 dialog(HTMLDialogElement) 를 Modal로 이용하여 그 안에 그리드를 출력하는 경우 dialogId 를 설정합니다.
* 그리드 속성 dialogId 를 설정하면 기존 body 의 자식으로 붙던 레이어들이 dialog를 기준으로 표시됩니다.
* dialog 에 그리드를 출력한 경우 반드시 dialogId 를 설정해야 드랍다운리스트, 달력, 필터 등의 레이어들이 dialog 상단에 표시됩니다.
* @defaultValue ""
*/
dialogId?: string;
/**
* 수평 스크롤이 있는 그리드에서 현재 화면의 칼럼이 반절 가려진 경우 마우스로 셀을 클릭할 때 온전하게 보이도록 스크롤을 자동으로 이동할지 여부를 지정합니다.
* @defaultValue true
*/
lastColumnScrollOnClick?: boolean;
/**
* 마우스 오버 시 표시될 모드를 지정합니다. 유효 속성값은 다음과 같습니다.
* "singleCell", "singleRow", "none"
* @defaultValue "singleCell"
*/
hoverMode?: 'singleCell' | 'singleRow' | 'none';
/**
* updateRow 메소드로 어떤 필드든 변경 시킬 수 있는지 여부를 지정합니다.
* 만약 true 설정하면 그리드 칼럼 레이아웃에서 정의한 칼럼이 아닌 경우임에도 임의의 필드를 수정할 수 있게 합니다.
* 임의의 필드를 수정하면 그 행은 수정된 행 상태로 변경됩니다. 따라서 getEditedRowItems 메소드를 통해 얻을 수 있습니다.
* @defaultValue false
*/
updatableAnyField?: boolean;
/**
* selectionMode 를 "multipleCells" 로 설정한 경우, 병합된 셀 1개을 선택할 때 자동으로 해당 병합된 셀 전체가 선택되게 할지 여부를 지정합니다.
* @defaultValue false
*/
selectionMultiOnMerge?: boolean;
/**
* 엑스트라 체크박스를 세로 병합하여 출력 시킬 때 그 기준이 되는 칼럼의 dataField를 지정합니다.
* 예로 이 속성을 "name" 으로 설정하면 그리드의 "name" 칼럼과 동일하게 엑스트라 체크박스를 세로 병합시켜 출력 시킵니다.
* 따라서 엑스트라 체크박스를 세로 병합하기 위해서는 미리 그 기준이 되는 칼럼을 병합 시켜야 합니다.
* 관련 데모 보기
* @defaultValue ""
*/
rowCheckMergeField?: string;
/**
* 그룹핑 할 때 소계 행(SummaryRows)을 따로 만들지 않고 그룹핑 트리 브랜치에 소계를 같이 출력할지 여부를 지정합니다.
* @defaultValue false
*/
displaySummaryTreeBranch?: boolean;
/**
* 셀 병합(merge)을 할 때 포매팅한 결과 값을 기준으로 병합 할지 여부를 지정합니다.
* 포매팅한 결과 값의 의미는 실제 데이터가 아닌 labelFunction, formatString 등으로 가공된 최종 뷰(view)적인 표현 값을 의미합니다.
* 만약 false 설정한다면 실 데이터 모델의 값 기준(dataField 값 기준)으로 병합 여부를 결정 짓습니다.
* @defaultValue true
*/
mergeByFormatValue?: boolean;
/**
* 페이징 모드(usePaging=true)에서 하단에 출력되는 페이징 패널(페이징 이동 버턴이 출력되는 하단 영역)을 출력할지 여부를 지정합니다.
* 이 속성을 false 설정하면 페이징 모드 하단에 페이징 패널을 출력시키지 않습니다.
* @defaultValue true
*/
usePagingPanel?: boolean;
/**
* selectionChange 이벤트가 마우스를 누른 채 이동하는 경우도 발생할지 여부를 지정합니다.
* 즉, 마우스를 누르고 드래깅하여 다중 셀을 선택하고 있는 경과를 그대로 selectionChange 이벤트로 송출할지 여부를 지정합니다.
* 기본값은 마우스를 누르고 이동한 후 최종적으로 뗀 경우(mouseUp 한 경우)에만 발생합니다.
* @defaultValue false
*/
dispatchSelectionChangeMoving?: boolean;
/**
* 세로 병합이나 가로 병합된 셀을 수정할 때 수정 적용되는 대상이 병합 전체에 대해 수정 적용될지 여부를 지정합니다.
* 예로 이 속성을 true 설정하면 3개의 셀이 병합된 경우 셀 수정 하면 3개의 셀이 모두 동일한 값으로 수정 적용됩니다.
* 이 속성을 false 설정하면 3개의 셀 중 상단 1개만 수정 되고 셀 병합에서 풀리게 됩니다.
* 붙여 넣기(Paste)까지 병합 전체에 대해 적용되기를 희망한다면 selectionMode 를 "multipleCells" 로 설정해야 합니다.
* @defaultValue false
*/
editableMergedCellsAll?: boolean;
/**
* 마우스 휠이 수평 스크롤에 반응 할 때 반드시 Shift Key 를 누를 경우만 해당되는지 여부를 지정합니다.
* 만약 이 속성을 false 설정하면 세로 스크롤이 없는 그리드인 경우 Shift Key 없이 단순 마우스 휠로 세로 스크롤 대신 가로 스크롤에 반응 합니다.
* @defaultValue true
*/
enableHScrollByOnlyShiftKey?: boolean;
/**
* 트리 그리드(계층형 그리드)에서 드래그&드랍을 할 때 드랍의 행위로 단순 행 이동이 아닌 자식(child)으로 드랍 행 이동도 가능하게 할지 여부를 지정합니다.
* @defaultValue false
*/
enableDropTreeChild?: boolean;
/**
* 그리드의 현재 데이터의 셀을 전체 선택(Ctrl + A) 활성화 여부를 지정합니다.
* selectionMode 를 "multipleCell" 또는 "multipleRows" 로 설정 해야 합니다.
* 이 속성을 활성화 하면 Ctrl + A 단축키로 전체 선택을 할 수 있으며 행번호 칼럼의 헤더인 "No" 를 클릭하여 전체 선택을 할 수 있습니다.
* 참고 : 이 속성을 활성화 하면 simplifySelectionEvent 는 true 로 강제됩니다.
* @defaultValue false
*/
enableSelectionAll?: boolean;
/**
* 블럭 단위로 셀 값들을 복사(Copy)할 때 상단의 헤더 텍스트도 같이 복사 시킬지 여부를 지정합니다.
* 헤더가 그룹(계층형)으로 작성된 경우 계층 관계가 모두 포함되지 않습니다. 최하단에 속하는 실질적 헤더 텍스트만 포함됩니다.
* 단일 셀 값 복사할 때는 헤더 텍스트가 추가되지 않습니다.(최소 2개 이상이 선택된 경우만 포함 시킴)
* @defaultValue false
*/
copyWithHeaderText?: boolean;
}
/**
* 칼럼 레이아웃을 선언할 때 가장 기본이 되는 Object 입니다.
* 하나의 칼럼에 해당되며, 레이아웃 설정에선 Object 로 선언을 합니다.
*/
export interface Column {
/**
* 그리드의 Row 데이터에서 해당 칼럼이 표시할 데이터의 Key Field 를 설정합니다.
* 특정 칼럼에 해당 데이터 필드 값을 출력하기 때문에 이 속성은 필수로 설정해야 합니다.
* 해당 칼럼의 고유 key 에 해당되기 때문에 다른 칼럼의 dataField 와 동일한 값을 설정하지 마십시오.
* 즉, 작성된 전체 칼럼들 중 중복된 dataField 의 값이 존재해서는 안됩니다.
* @defaultValue null
*/
dataField?: string;
/**
* 그리드의 헤더에 표시되는 칼럼 헤더 제목을 설정합니다.
* 그리드의 Row 데이터에서 해당 칼럼에 출력하는 데이터 KeyField 가 name 인 경우 헤더에 '이름' 이라고 출력하고자 한다면 이 값을 '이름'으로 설정하십시오.
* 만약 설정하지 않는다면 dataField에서 설정한 값(keyField)이 출력됩니다.
* @defaultValue null
*/
headerText?: string;
/**
* 해당 칼럼이 최소로 작아질 수 있는 넓이 값(픽셀 단위)을 설정합니다.
* minWidth 는 명시적으로 픽셀 단위인 Number 형 만을 설정해야 합니다.
* width 의 설정 값이 퍼센티지(%)인 경우 해당 퍼센티지의 값이 minWidth 보다 작아지면 minWidth 값의 넓이로 출력 시킵니다.
* 또한 사용자가 칼럼과 칼럼 사이 드래깅을 통하여 넓이 조절을 할 때 minWidth 보다 작게 조절 할 수 없습니다.
* @defaultValue NaN
*/
minWidth?: number;
/**
* 해당 칼럼의 가로 넓이 고정 값을 설정합니다.
* 만약 이 값을 설정하지 않는다면 기본 값 80 이 할당됩니다. 그러나 width 속성을 설정하지 않은 칼럼이 다수 인 경우 현재 그리드의 총 넓이를 그 수만큼 나눠서 할당됩니다.
* 예를 들어 5개의 칼럼을 만들었을 때 1개의 칼럼만 크기를 설정한다면 4개의 칼럼은 남은 그리드 width 를 4등분하여 설정됩니다.
* 반대로 4개의 칼럼에 고정값을 설정하고 1개의 칼럼에 이 값을 설정하지 않았다면 1개의 칼럼이 남은 그리드 width 의 전체가 설정됩니다.
* 이 속성 값을 설정하지 않는다면 그리드 칼럼은 기본 80보다 작게는 출력되지 않습니다. 따라서 칼럼 수가 많은 경우 횡스크롤이 생기게 됩니다.
* 만약 이 값을 퍼센티지로 설정하고자 한다면 "10%" 또는 "20%" 와 같이 설정하십시오.
* "10%" 로 설정한다면 그리드 총 넓이의 10%에 해당되는 값으로 칼럼이 생성됩니다.
* @defaultValue 80
*/
width?: number | string;
/**
* 칼럼 헤더를 그룹 계층형으로 표현하고자 할 때 해당 칼럼의 자식에 해당되는 칼럼들을 설정합니다.
* 계층 구조의 depth는 N-depth 로 자식의 자식을 설정할 수 있습니다.
* @defaultValue null
*/
children?: Column[];
/**
* 해당 칼럼의 정렬(sorting) 여부를 결정합니다.
* 칼럼 헤더를 클릭 시 칼럼의 데이터가 정렬되어 다시 출력되는데 이 때 정렬 할 수 있는 칼럼과 정렬 할 수 없는 칼럼을 지정할 수 있습니다.
* 이 속성을 false 로 설정하면 해당 칼럼 필드로는 정렬할 수 없습니다.
* @defaultValue true
*/
sortable?: boolean;
/**
* 해당 칼럼의 셀 병합(cell merge) 여부를 결정합니다.
* 셀 병합은 칼럼에서 상, 하가 같은 텍스트인 경우 하나의 셀로 합쳐 출력하는 기능입니다.
* 그리드의 속성인 enableCellMerge 를 선행적으로 true 설정한 경우 유효합니다.
* @defaultValue false
*/
cellMerge?: boolean;
/**
* 해당 칼럼의 수정, 편집 가능 여부를 결정합니다.
* 칼럼의 특정 셀을 더블 클릭(또는 클릭, F2 키 등) 시 편집, 수정 모드로 진입하는데 이 속성이 false 로 지정되면 해당 칼럼은 편집 불가능한 칼럼이 됩니다.
* 그리드의 속성인 editable 을 선행적으로 true 설정한 경우 유효합니다.
* @defaultValue true
*/
editable?: boolean;
/**
* 해당 칼럼 전체 스타일을 지정합니다.
* 칼럼 전체의 스타일을 CSS Class 선택자로 설정하십시오.
* 예를 들어 CSS 에서 .my-custom { color:#ff0000; } 로 클래스 CSS 를 정의했을 때 이 클래스를 사용하고자 하는 경우 style 에 CSS 명을 설정하십시오.
* 설정 예는 style : "my-custom" 과 같습니다. 점(.) 은 생략하고 지정하십시오.
* 다중의 CSS 클래스는 지원하지 않습니다. 예를 들어 "right-style bold-style font12-style" 과 같은 구조는 지원하지 않습니다.
* 엑셀 내보내기 시에는 해당 스타일의 글자색, 배경색, 볼드체, 이탤릭체만 적용됩니다.
* @defaultValue null
*/
style?: string;
/**
* 해당 칼럼의 헤더 스타일을 지정합니다.
* 칼럼 헤더에 스타일을 CSS Class 선택자로 설정하십시오.
* 예를 들어 CSS 에서 .my-custom { color:#ff0000; } 로 클래스 CSS 를 정의했을 때 이 클래스를 사용하고자 하는 경우 style 에 CSS 명을 설정하십시오.
* 설정 예는 headerStyle : "my-custom" 과 같습니다. 점(.) 은 생략하고 지정하십시오.
* 다중의 CSS 클래스는 지원하지 않습니다. 예를 들어 "right-style bold-style font12-style" 과 같은 구조는 지원하지 않습니다.
* 엑셀 내보내기 시에는 해당 스타일의 글자색, 배경색, 볼드체, 이탤릭체만 적용됩니다.
* @defaultValue null
*/
headerStyle?: string;
/**
* 셀에 출력되는 텍스트의 접두사를 지정합니다.
* 예를 들어 1000 이라는 글자에 달러표시($) 를 추가하고자 한다면 이 속성에 '$'를 설정하십시오.
* @defaultValue ""
*/
prefix?: string;
/**
* 셀에 출력되는 텍스트의 접미사를 지정합니다.
* 예를 들어 1000 이라는 글자에 만원이라는 글자를 추가하고자 한다면 이속성에 '만원'을 설정하십시오.
* @defaultValue ""
*/
postfix?: string;
/**
* 칼럼이 출력할 dataField 의 값의 데이터 유형을 지정합니다.
* 유효 속성 값은 "numeric", "string", "date", "boolean" 입니다.
* 그리드가 해당 데이터를 더욱 잘 이해하기 위해 지정할 필요가 있습니다. 예를 들어 출력 시킬 데이터가 숫자일 때 이 값을 numeric 으로 지정하면 자동으로 컴마가 붙어 출력됩니다.
* 만약 숫자 형태더라도 dataType 에 "numeric" 을 지정하지 않은 경우에는 일반 스트링으로 인식하게 됩니다.
* @defaultValue "string"
*/
dataType?: 'numeric' | 'string' | 'date' | 'boolean';
/**
* 칼럼이 출력시킬 셀의 표현 방식을 지정합니다. 즉, 셀의 값을 어떤 형태로 출력시킬지를 결정합니다.
* 칼럼에는 여러 형태로 출력이 될 수 있습니다. 예로 이미지, 아이콘, 버턴, 바 게이지 등이 될 수 있습니다.
* @defaultValue null
*/
renderer?: BarRenderer | ButtonRenderer | CheckBoxEditRenderer | CustomRenderer | DropDownListRenderer | IconRenderer | ImageRenderer | LinkRenderer | NumberStepRenderer | SparkColumnRenderer | SparkLineRenderer | SparkWinLossRenderer | SwitchRenderer | TemplateRenderer;
/**
* 편집 수정 모드로 진입했을 때 셀의 수정 방식을 지정합니다. 즉, 셀의 값을 어떤 형태로 사용자에게 수정시킬지에 대한 방식을 결정합니다.
* 기본적으로 일반 텍스트입력(InputEditRenderer) 형태이며 달력이나 드랍다운리스트 등의 여러 형태가 될 수 있습니다.
* 이 속성을 지정하지 않으면 일반 텍스트입력(InputEditRenderer) 형태가 출력됩니다.
* @defaultValue null
*/
editRenderer?: BTCalendarRenderer | CalendarRenderer | ComboBoxRenderer | ConditionRenderer | DropDownListRenderer | InputEditRenderer | JQCalendarRenderer | MaskEditRenderer | NumberStepRenderer | RemoteListRenderer | CustomEditRenderer;
/**
* 칼럼 헤더의 표현 방식을 지정합니다.
* 칼럼 헤더는 실질적인 데이터 출력 헤더에만 가능합니다. 즉, 그룹형으로 헤더 작성한 경우 그룹 헤더(브랜치 헤더)에는 출력 시킬 수 없습니다.
* 예로 헤더에 텍스트를 출력할지, 체크박스를 출력할지를 지정합니다.
* @defaultValue null
*/
headerRenderer?: ButtonHeaderRenderer | CheckBoxHeaderRenderer | DropDownHeaderRenderer;
/**
* 칼럼에 출력되는 셀 텍스트를 사용자 정의 할 수 있는 함수입니다.
* 기본적으로 데이터의 값이 셀에 출력되는데 이 값을 자바스크립트에서 재가공하여 출력하고자 하는 경우 이 속성을 설정하십시오.
* labelFunction 으로 가공한 값은 실제 데이터에 영향을 미치지 않고 단순히 보여지는 방식만 바꿔서 보여줍니다.
* labelFunction 은 많은 곳에서 응용이 가능합니다.
* 예로 고객이 원하는 셀 출력은 일반적인 값 형태인 별칭(alias)인데 데이터는 코드값인 경우, 사용자가 보기 편한 코드값을 별칭으로 변환 시켜서 보여줄 수 있습니다.
* 즉, 뷰(view)적인 표현만 다르게 할 뿐입니다. 이에 반해 실제 데이터에 직접적으로 적용시키는 속성은 expFunction 이 존재합니다.
* @defaultValue null
*/
labelFunction?: (rowIndex: number, columnIndex: number, value: any, headerText: string, item: any, dataField: string, cItem: Column) => string | number | boolean;
/**
* 칼럼에 출력되는 셀의 개별 스타일을 동적으로 지정하는 함수입니다.
* 기본적으로 셀은 일괄적으로 칼럼 또는 로우에 의해 스타일이 상속 받아져 지정됩니다.
* 그러나 개별적으로 셀 하나 하나에 스타일을 지정하고자 할 때 이 함수를 사용하십시오.
* @defaultValue null
*/
styleFunction?: (rowIndex: number, columnIndex: number, value: any, headerText: string, item: any, dataField: string) => any;
/**
* 칼럼 헤더에 마우스 오버 시 생기는 툴팁을 설정합니다.
* headerTooltip 의 tooltipHtml 의 값은 일반 스트링이 될 수 있고, HTML 스트링이 될 수 있습니다.
* HTML 을 작성하면 해당 HTML 이 툴팁으로 표시됩니다.
* @defaultValue null
*/
headerTooltip?: {
show?: boolean;
tooltipHtml?: string;
};
/**
* 그리드 셀에 마우스 오버 시 생기는 툴팁을 설정합니다. (그리드 속성 showTooltip = true 설정 선행 필수)
* 내장 툴팁(useNativeTip=true) 설정 시 단순히 해당 셀의 값만 출력할 뿐 tooltipField, tooltipFunction 을 사용하여 값을 변경할 수 없습니다.
* tooltipFunction 의 반환값은 일반 스트링이 될 수 있고, HTML 스트링이 될 수 있습니다.
* tooltipFunction 은 tooltipField 보다 우선 순위가 높아 두 개를 같이 설정하면 tooltipField 는 무시됩니다.
* @defaultValue null
*/
tooltip?: {
show?: boolean;
useNativeTip?: boolean;
tooltipField?: string;
tooltipFunction?: (rowIndex: number, columnIndex: number, value: any, headerText: string, item: any, dataField?: string) => string | null;
};
/**
* 칼럼에 필터링이 가능하도록 설정합니다.
*/
filter?: {
showIcon?: boolean;
enable?: boolean;
displayFormatValues?: boolean;
enableCustomMenu?: boolean;
type?: 'default' | 'numeric';
iconClick?: any;
iconWidth?: number;
filterFunction?: (dataField: string, value: any, item: any) => boolean;
useExMenu?: boolean;
useInlineExtra?: boolean;
inline?: boolean;
inlineClear?: boolean;
};
/**
* dataType 을 "numeric" 또는 "date" 로 지정한 경우 출력되는 포맷을 지정합니다.
* */
formatString?: string;
/**
* 그리드 속성 useGroupingPanel 을 활성화 한 경우 칼럼 헤더를 드래그 앤 드랍으로 그룹핑을 실행할 때 disableGrouping 을 true 로 설정하면 해당 칼럼은 그룹핑을 할 수 없습니다.
* @defaultValue false
*/
disableGrouping?: boolean;
/**
* 그리드 속성 enableMovingColumn 를 true 로 설정한 경우 칼럼 헤더를 드래그 앤 드랍으로 자리를 옮길 수 있지만, disableMoving 을 true 로 설정하면 해당 칼럼은 사용자가 드래깅으로 자리를 옮길 수 없습니다.
* 즉, disabelMoving = true 설정하면 직접적인 이동 대상에서 제외됩니다.
* @defaultValue false
*/
disabelMoving?: boolean;
/**
* 칼럼은 dataField 를 키로 갖는 값(value) 을 출력 시킵니다. 그러나 원래 없던 데이터를 가공하여 출력하고자 할 경우가 있습니다.
* 예를 들어 칼럼1 과 칼럼2 의 합을 칼럼3에 출력하고자 할 때 칼럼3에 출력 시킬 데이터를 서버단에서 미리 계산해서 가져 올 수 있지만, 그리드에게 계산하도록 지시하여 출력 시킬 수 도 있습니다.
* 이렇게 그리드에 의해 계산하도록 지정하면, 칼럼 1이나 칼럼2의 값이 변경되었을 때 칼럼3의 데이터도 같이 변경됩니다.
* 이 처럼 칼럼과 칼럼들이 의존적 관계를 갖게 될 때 해당 값을 계산하도록 할 함수를 지정합니다.
* expFunction 을 지정하는 칼럼의 dataField 속성은 중복되지 않는 임의의 스트링을 지정 하십시오. expFunction 에서 계산된 값이 해당 dataField 의 값으로 보관됩니다.
* expFunction 은 수식 함수이기 때문에 반환(Return)형은 반드시 Number 여야 합니다.
* expFunction 을 설정하면 해당 칼럼을 직접 수정 할 수 없습니다. 반드시 해당 칼럼은 expFunction 을 통해서만 값이 결정됩니다.
* @defaultValue null
*/
expFunction?: (rowIndex: number, columnIndex: number, item: any, dataField: string) => number;
/**
* 셀 세로 병합을 설정한 경우(cellMerge : true) 이전 칼럼의 셀 병합 여부를 보고 판단할지를 지정합니다.
* 만약 두 개의 칼럼(대분류, 소분류)을 위, 아래로 병합한다고 가정할 때 대분류는 단순히 값이 같다면 병합해도 문제가 없습니다.
* 그러나 소분류의 값은 값이 같다고 해도 대분류의 값까지 고려해야 할 필요가 있습니다. 이런 경우 소분류에 해당되는 칼럼에 mergePolicy 를 설정하고 "restrict" 값을 설정하십시오.
* "restrict" 를 설정하면 막연히 위, 아래 값이 같다고 병합을 실행하지 않고, 이전 칼럼(즉, 대분류) 의 값을 고려하여 셀 병합을 실행합니다.
* @defaultValue "always"
*/
mergePolicy?: 'always' | 'restrict';
/**
* 셀 세로 병합을 실행할 때 mergePolicy 를 "restrict" 로 설정한 경우, 먼저 고려할 칼럼의 dataField 를 지정합니다.
* mergeRef 를 설정하지 않으면 바로 이전 칼럼의 dataField 를 기본값으로 갖습니다.
* @defaultValue null
*/
mergeRef?: string;
/**
* 칼럼의 dataType 을 "numeric" 으로 지정한 경우, "formatString" 에 의해 처리되는 소수점 반올림, 올림, 내림을 결정합니다.
* 예를 들어 formatString 을 "#,##0" 으로 지정한 경우, 실제 값이 12345.6 일 때 기본값은 반올림되어 "12,346" 으로 포맷팅되어 출력됩니다.
* 소수점 처리 방식을 반올림, 내림, 올림을 결정짓는 속성입니다.
* @defaultValue "round"
*/
rounding?: 'ceil' | 'floor' | 'round';
/**
* 헤더 간의 가로 병합(colSpan)을 지시합니다.
* 병합되어 표시되는 칼럼에 총 병합 개수를 설정합시오.
* 참고 : 그룹형으로 헤더를 작성한 경우 헤더 병합은 최하단 헤더만 가능합니다.(즉, 마지막 계층(depth) 헤더만 가능)
* @defaultValue NaN
*/
colSpan?: number;
/**
* 칼럼의 데이터 유형(dataType)에 관계 없이 엑셀로 내보내기(Export) 할 때 엑셀 포맷에 명시적으로 텍스트 형식을 지정합니다.
* 예를 들어, 상품 번호가 "111200340052" 라면, 엑셀로 내보내기 할 때 엑셀 상에서 숫자 형식으로 인식 됩니다.
* 이런 경우, 실질적으로 텍스트로 인식시켜야 할 필요가 있습니다.
* 엑셀 포맷에서 명시적으로 텍스트로 인식시키고자 한다면 xlsxTextConversion 을 true 로 설정하십시오.
* @defaultValue false
*/
xlsxTextConversion?: boolean;
/**
* 최초 칼럼 생성 시 보이기 설정을 지시합니다.
* 만약 visible 을 false 로 설정하면 해당 칼럼을 생성은 하지만 보이지 않게 출력 시킵니다.
* 보이지 않게 처리된 칼럼은 추후 showColumnByDataField 메소드로 보이게 출력 시킬 수 있습니다.
* @defaultValue true
*/
visible?: boolean;
/**
* 그리드 데이터 영역에서 칼럼 간의 가로 병합(colSpan)을 지시합니다.
* 칼럼 간의 가로 병합은 cellColMerge 을 true 인 경우 같은 값일 때 가로 병합이 됩니다.
* 그리드가 그룹핑된 상태 또는 트리 그리드로 표현된 상태인 경우에는 가로 병합을 하지 않습니다. 즉, 계층 상태가 아닌 일반 그리드여야 가능합니다.
* 예를 들어 다음처럼 "f1" 칼럼에 cellColSpan 을 3으로 설정한 경우, "f1" 칼럼 기준 다음 3개의 셀에 출력되는 값이 같은 경우 가로로 3개를 병합니다.
* 그리드의 속성인 enableCellMerge 를 선행적으로 true 설정한 경우 유효합니다.
* 가로 병합할 때 가로 병합의 대상이 되는 셀들의 visible=false 설정은 무시됩니다.
* 즉, cellColSpan 을 3으로 설정한 경우 오른쪽의 2개의 칼럼의 visible=false 를 설정해도 해당 2개의 칼럼의 visible 은 무시됩니다.
* 또한 셀 세로 병합(cellMerge)와 병행하여 사용할 수 없습니다. 셀 세로 병합과 병행하여 사용하는 경우 셀 세로 병합만 적용됩니다.
* @defaultValue NaN
*/
cellColSpan?: number;
/**
* 그리드 데이터 영역에서 칼럼 간의 가로 병합(colSpan)을 지시합니다.
* cellColMerge 를 true 로 설정한 후, 반드시 cellColSpan 를 같이 정의해야 합니다.
* 따라서 cellColSpan 도 함께 참고하여 보시길 바랍니다.
* 그리드의 속성인 enableCellMerge 를 선행적으로 true 설정한 경우 유효합니다.
* 참고 : cellColMerge 를 설정한 경우 칼럼 감추기 메소드(hideColumnByDataField)는 무시됩니다.
* @defaultValue false
*/
cellColMerge?: boolean;
/**
* 그리드 속성 wordWrap 과 무관하게 설정한 칼럼의 자동 개행(word-wrap)을 할지 여부를 지정합니다.
* 그리드 속성 wordWrap 은 칼럼과 무관하게 그리드 전체에 적용되어 가변적인 행의 높이를 갖지만
* 칼럼 속성 wrapText 는 설정한 칼럼에서 고정된 행의 높이 안에서 출력됩니다.
* 즉, wrapText 설정 시 공간이 부족하여 출력되지 않은 텍스트는 가려져 출력됩니다.
* 참고 : 그리드 속성 wordWrap 을 true 로 설정하면 칼럼의 wrapText 는 무시됩니다.
* @defaultValue false
*/
wrapText?: boolean;
/**
* dataType 을 "numeric" 으로 설정하고 formatString 을 지정한 경우 엑셀 내보내기 할 때 실질적인 숫자 그대로 내보내기 할 지 여부를 지정합니다.
* 실질적인 숫자의 의미는 예로 95.87 이라는 값이 있는 경우 formatString 을 "#,##0" 으로 설정했을 때 96 으로 출력이 됩니다.
* 이 때 엑셀로 내보내기 할 때 포매팅된 값인 96을 내보내기하지 않고 95.87 로 내보내기할지 여부를 의미합니다.
* xlsxNumeric 을 true 로 설정하면 엑셀의 셀에 보여지는 값은 96으로 동일하게 보이지만 더블클릭 시 보이는 값(또는 엑셀의 수식창의 값)은 95.87 로 나타납니다.
* xlsxNumeric 은 formatString 이외 prefix, postfix, labelFunction 등으로 포매팅한 경우 무시됩니다.(formatString 설정 시에만 사용 가능함)
* 또한 rounding 속성으로 소수점을 반올림처리 할 때만 유효합니다.
* @defaultValue false
*/
xlsxNumeric?: boolean;
/**
* dataType 을 "date" 로 설정한 경우 원시 데이터의 날짜 형식을 명시적으로 설정합니다.
* 데이터로 삽입되는 날짜 형식은 모호성을 가질 수 있습니다.
* 예로 "01/05/2018" 은 각각 2018년 1월 5일, 2018년 5월 1일로 해석될 수 있습니다.
* 만약 2018년 1월 5일에 해당된다면 "mm/dd/yyyy" 를, 2018년 5월 1일에 해당된다면 "dd/mm/yyyy" 를 설정하십시오.
* "201801" 과 같이 "년월"로 날짜 형식을 갖는다면 명시적으로 "yyyymm" 를 설정하십시오.
* 또한 시간까지 포함된 다음 값이 "20180501 103059" 2018년 5월 1일 10시 30분 59초에 해당된다면 "yyyymmdd HHMMss" 를 설정하십시오.
* @defaultValue null
*/
dateInputFormat?: string;
/**
* 그리드 속성 searchByFormatValue을 true로 설정한 경우 해당 칼럼이 포매팅된 값을 대상으로 검색을 실행할지 지정합니다.
* @defaultValue true
*/
searchByFormatValue?: boolean;
/**
* 헤더와 헤더 사이 경계를 더블 클릭 한 경우 명시적으로 적용시킬 넓이(width)를 설정합니다.
* 렌더러(renderer)의 유형에 따라 더블 클릭 시 해당 칼럼의 적절한 넓이(width)대로 자동 조절되지 않습니다.
* 이런 경우 widthFit 속성을 설정하면 해당 값으로 더블 클릭 시 적용됩니다.
* @defaultValue NaN
*/
widthFit?: number;
/**
* addColumn 메소드를 사용해서 열(column)을 추가할 때 해당 열의 셀이 갖는 기본값을 지정합니다.
* @defaultValue null
*/
defaultValue?: any;
/**
* dataType 을 "date" 으로 설정한 경우 엑셀 내보내기 할 때 엑셀에서 사용하는 날짜 시스템(1900년 날짜 시스템)으로 변환하여 내보내기 할지 여부를 지정합니다.
* formatString 을 "yyyy-mm-dd"로 설정한 경우 엑셀의 "간단한 날짜" 시스템으로 자동 내보내기 합니다. (다른 설정 없이도 날짜 시스템으로 내보내기 함)
* 그 외의 formatString 인 경우는 xlsxDate 속성을 true 설정 한 경우 엑셀의 날짜 시스템으로 내보내기 합니다.
* 엑셀에서 사용하는 포맷 형식이 그리드와 서로 다르기 때문에 그리드가 모두 자동으로 변환할 수가 없습니다.
* 이를 위해 xlsxDate 에 true 대신 엑셀 날짜 표시 형식을 작성하면 그대로 내보내기 합니다.
* @defaultValue false
*/
xlsxDate?: boolean | string;
}
export declare enum RendererKind {
BarRenderer = "BarRenderer",
ButtonRenderer = "ButtonRenderer",
CheckBoxEditRenderer = "CheckBoxEditRenderer",
CustomRenderer = "CustomRenderer",
DropDownListRenderer = "DropDownListRenderer",
IconRenderer = "IconRenderer",
ImageRenderer = "ImageRenderer",
LinkRenderer = "LinkRenderer",
NumberStepRenderer = "NumberStepRenderer",
SparkColumnRenderer = "SparkColumnRenderer",
SparkLineRenderer = "SparkLineRenderer",
SparkWinLossRenderer = "SparkWinLossRenderer",
SwitchRenderer = "SwitchRenderer",
TemplateRenderer = "TemplateRenderer"
}
export declare enum EditRendererKind {
BTCalendarRenderer = "BTCalendarRenderer",
CalendarRenderer = "CalendarRenderer",
ComboBoxRenderer = "ComboBoxRenderer",
ConditionRenderer = "ConditionRenderer",
DropDownListRenderer = "DropDownListRenderer",
InputEditRenderer = "InputEditRenderer",
JQCalendarRenderer = "JQCalendarRenderer",
MaskEditRenderer = "MaskEditRenderer",
NumberStepRenderer = "NumberStepRenderer",
RemoteListRenderer = "RemoteListRenderer",
CustomEditRenderer = "CustomEditRenderer"
}
export declare enum HeaderRendererKind {
ButtonHeaderRenderer = "ButtonHeaderRenderer",
CheckBoxHeaderRenderer = "CheckBoxHeaderRenderer",
DropDownHeaderRenderer = "DropDownHeaderRenderer"
}
/**
* 바 렌더러는 특정 칼럼의 셀에 바 게이지가 출력되는 칼럼 렌더러입니다
*/
export interface BarRenderer {
/**
* BarRenderer
*/
type: RendererKind.BarRenderer;
/**
* 바 게이지의 최소값을 지정합니다.
* @defaultValue 0
*/
min?: number;
/**
* 바 게이지 축의 최대값을 지정합니다.
* @defaultValue 100
*/
max?: number;
/**
* 바 게이지의 스타일을 지정합니다.
* 스타일은 CSS 에서 미리 선언된 CSS 클래스 선언자여야 합니다.
* @defaultValue null
*/
style?: string;
/**
* 바 게이지의 값이 출력되는 텍스트의 좌우 여백을 지정합니다.
* 기본적으로 칼럼 전체의 text-align 스타일을 따릅니다. 그러나 min, max 가 -100 ~ 100 사이 인 경우(즉, 0이라는 기준점이 있는 경우)
* 게이지의 시작은 0 에서 음수와 양수 범위로 나뉘어 출력되고, 텍스트는 가운데 출력이 됩니다.
* 이 때 텍스트의 좌우 여백을 지정하여 좀 더 자연스러운 텍스트를 출력할 수 있습니다.
* @defaultValue 0
*/
offset?: number;
/**
* 바 게이지의 텍스트 출력 여부를 지정합니다.
* @defaultValue true
*/
showLabel?: boolean;
}
/**
* 버턴 렌더러는 특정 칼럼의 셀에 버턴이 출력되는 칼럼 렌더러입니다.
*/
export interface ButtonRenderer {
/**
* ButtonRenderer
*/
type: RendererKind.ButtonRenderer;
/**
* 버턴에 출력시킬 텍스트를 지정합니다.
* 해당 텍스트는 칼럼에 일괄적으로 표시됩니다.
* 만약 labelText 를 지정하지 않은 경우 데이터의 value 가 표시됩니다.
* @defaultValue ''
*/
labelText?: string;
/**
* 버튼을 클릭했을 때 발생하는 이벤트 핸들러를 선언합니다.
* @defaultValue null
*/
onClick?: (event: ButtonClickEvent) => void;
/**
* 버튼을 조건에 따라 표시 할지 여부를 결정 할 수 있는 함수입니다.
* false 를 반환하면 버튼을 셀에 표시하지 않습니다.
* @defaultValue null
*/
visibleFunction?: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string) => boolean;
/**
* 버튼를 조건에 따라 비활성화(disabled) 할지 여부를 결정 할 수 있는 함수입니다.
* true 를 반환하면 버튼이 비활성화(disabled) 됩니다.
* @defaultValue null
*/
disabledFunction?: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string) => boolean;
}
/**
* 체크박스 렌더러는 특정 칼럼의 셀에 체크박스가 출력되는 칼럼 렌더러입니다.
*/
export interface CheckBoxEditRenderer {
/**
* CheckBoxEditRenderer
*/
type: RendererKind.CheckBoxEditRenderer;
/**
* 체크박스 옆에 텍스트를 출력할 지 여부를 지정합니다.
* @defaultValue false
*/
showLabel?: boolean;
/**
* 체크박스 클릭 시 체크 선택/해제가 되도록 할지 여부를 지정합니다.
* @defaultValue false
*/
editable?: boolean;
/**
* 데이터의 value 값 중 체크박스를 선택되도록 결정 짓는 값을 지정합니다.
* 기본적으로 데이터의 value 가 true 라면 이 속성은 의미가 없지만, 데이터의 값이 "Active", "Inactive" 로 체크 선택/해제가 결정된다면 checkValue 를 "Active" 로 설정하십시오.
* @defaultValue true
*/
checkValue?: string | boolean;
/**
* 데이터의 value 값 중 체크박스를 해제하도록 결정 짓는 값을 지정합니다.
* 기본적으로 데이터의 value 가 false 라면 이 속성은 의미가 없지만, 데이터의 값이 "Active", "Inactive" 로 체크 선택/해제가 결정된다면 unCheckValue 를 "Inactive" 로 설정하십시오.
* @defaultValue false
*/
unCheckValue?: string | boolean;
/**
* 사용자가 체크박스를 클릭하여 체크 상태를 변경하고자 할 때 변경을 허락할지 여부를 지정할 수 있는 함수 입니다.
* true 를 반환하면 사용자가 자유롭게 체크 변경이 가능하며, false 반환 시 수정 불가 상태로 만듭니다.
* @defaultValue null
*/
checkableFunction?: (rowIndex: number, columnIndex: number, value: any, isChecked: boolean, item: any, dataField: string) => boolean;
/**
* 체크박스를 조건에 따라 표시 할지 여부를 결정 할 수 있는 함수입니다.
* 예를 들어 특정 값(name=Anna)은 체크박스를 표시하지 않고자 할 때 유용한 함수입니다.
* @defaultValue null
*/
visibleFunction?: (rowIndex: number, columnIndex: number, value: any, isChecked: boolean, item: any, dataField: string) => boolean;
/**
* 체크박스를 조건에 따라 비활성화(disabled) 할지 여부를 결정 할 수 있는 함수입니다.
* 예를 들어 특정 값(name=Anna)은 체크박스를 비활성화 할 때 유용한 함수입니다.
* @defaultValue null
*/
disabledFunction?: (rowIndex: number, columnIndex: number, value: any, isChecked: boolean, item: any, dataField: string) => boolean;
}
/**
* 스위치 렌더러는 특정 칼럼의 셀에 토글 스위치가 출력되는 칼럼 렌더러입니다.
*/
export interface SwitchRenderer {
/**
* SwitchRenderer
*/
type: RendererKind.SwitchRenderer;
/**
* 스위치의 모양을 둥근 형태로 출력할지 여부를 지정합니다.
* @defaultValue false
*/
isRound?: boolean;
/**
* 스위치 클릭 시 체크 선택/해제가 되도록 할지 여부를 지정합니다.
* @defaultValue false
*/
editable?: boolean;
/**
* 데이터의 value 값 중 스위치를 선택되도록 결정 짓는 값을 지정합니다.
* 기본적으로 데이터의 value 가 true 라면 이 속성은 의미가 없지만, 데이터의 값이 "Active", "Inactive" 로 체크 선택/해제가 결정된다면 checkValue 를 "Active" 로 설정하십시오.
* @defaultValue true
*/
checkValue?: string | boolean;
/**
* 데이터의 value 값 중 스위치를 해제하도록 결정 짓는 값을 지정합니다.
* 기본적으로 데이터의 value 가 false 라면 이 속성은 의미가 없지만, 데이터의 값이 "Active", "Inactive" 로 체크 선택/해제가 결정된다면 unCheckValue 를 "Inactive" 로 설정하십시오.
* @defaultValue false
*/
unCheckValue?: string | boolean;
/**
* 사용자가 스위치를 클릭하여 체크 상태를 변경하고자 할 때 변경을 허락할지 여부를 지정할 수 있는 함수 입니다.
* true 를 반환하면 사용자가 자유롭게 체크 변경이 가능하며, false 반환 시 수정 불가 상태로 만듭니다.
* @defaultValue null
*/
checkableFunction?: (rowIndex: number, columnIndex: number, value: any, isChecked: boolean, item: any, dataField: string) => boolean;
/**
* 스위치를 조건에 따라 표시 할지 여부를 결정 할 수 있는 함수입니다.
* 예를 들어 특정 값(name=Anna)은 스위치를 표시하지 않고자 할 때 유용한 함수입니다.
* @defaultValue null
*/
visibleFunction?: (rowIndex: number, columnIndex: number, value: any, isChecked: boolean, item: any, dataField: string) => boolean;
/**
* 스위치를 조건에 따라 비활성화(disabled) 할지 여부를 결정 할 수 있는 함수입니다.
* 예를 들어 특정 값(name=Anna)은 스위치를 비활성화 할 때 유용한 함수입니다.
* @defaultValue null
*/
disabledFunction?: (rowIndex: number, columnIndex: number, value: any, isChecked: boolean, item: any, dataField: string) => boolean;
}
/**
* 커스텀 렌더러는 그리드에서 제공되는 기본 렌더러가 아닌 사용자(개발자)가 직접 출력하고자 하는 내용을 작성할 수 있는 칼럼 렌더러입니다.
*/
export interface CustomRenderer {
/**
* CustomRenderer
*/
type: RendererKind.CustomRenderer;
/**
* 사용자가 그리드의 렌더러로 작성한 클래스를 설정합니다.
* 작성한 클래스는 AUIGrid.Class 를 이용하여 AUIGrid.RendererBase 클래스를 확장(extends)하여 작성하여야 합니다.
* @defaultValue null
*/
jsClass: any;
/**
* CustomRenderer 에 전달할 여분의 속성을 설정합니다.
* 여기서 작성한 extraProps 는 사용자가 작성한 클래스에서 this.columnData.renderer.extraProps 로 접근 가능합니다.
* @defaultValue null
*/
extraProps?: any;
/**
* CustomRenderer 로 정의된 칼럼에서 엑셀, PDF 내보내기 할 때 재가공하여 값을 출력하고자 하는 경우 이 속성을 설정하십시오.
* aliasFunction 을 정의 하지 않은 경우, 기본값은 dataField 값 기준입니다.
* 함수의 반환값이 곧 엑셀, PDF 등 내보내기 값입니다.
* @defaultValue null;
*/
aliasFunction?: (rowIndex: number, columnIndex: number, value: any, headerText: string, item: any, dataField: string) => string | number | boolean;
}
/**
* 드랍다운 리스트 렌더러는 여러 항목 중 하나(또는 다수)를 선택할 수 있도록 출력하는 칼럼 / 편집 렌더러입니다.
*/
export interface DropDownListRenderer {
/**
* DropDownListRenderer
*/
type: RendererKind.DropDownListRenderer | EditRendererKind.DropDownListRenderer;
/**
* 드랍다운 리스트에 출력될 리스트 항목을 지정합니다.
* 리스트는 배열로 지정합니다. 여기서 지정된 리스트 중 하나를 사용자는 선택할 수 있습니다.
* 드랍다운 리스트를 사용하기 위해서 반드시 선언되어야 할 속성이지만 listFunction 으로 대체 될 수 있습니다.
* 만약 listFunction 을 설정한다면 이 속성은 무시됩니다.
* @defaultValue null
*/
list?: any[];
/**
* 드랍다운 리스트에 출력될 리스트의 텍스트를 변경할 수 있는 함수입니다.
* 기본적으로 list 속성에 정의된 항목이 드랍다운 리스트에 출력되나 이 함수로 출력되는 항목을 바꿀 수 있습니다.
* 예를 들어 실제 데이터는 1, 2 와 같이 숫자지만 사용자에게 보여 줄때는 "남자", "여자" 로 바꿔 표현해 줘야 할 때가 있습니다.
* 이 함수의 반환값이 곧 해당 항목의 출력 텍스트가 됩니다.
* 주의 : listTemplateFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다.
* @defaultValue null
*/
labelFunction?: (rowIndex: number, columnIndex: number, value: any, item: any) => string | boolean | number;
/**
* 드랍다운 리스트에 출력될 리스트의 텍스트를 사용자 정의 할 수 있는 함수입니다.
* 기본적으로 list 속성에 정의된 항목이 드랍다운 리스트에 출력되나 이 함수로 출력되는 항목의 HTML 템플릿을 바꿀 수 있습니다.
* 리스트의 출력 모습을 복잡하거나, 다양한 정보를 출력시키고자 할 때 사용하십시오.
* 이 함수의 반환값이 곧 해당 항목의 출력 HTML 이 됩니다.
* 주의 : labelFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다.
* @defaultValue null
*/
listTemplateFunction?: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string, listItem: any) => any;
/**
* 셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue false
*/
showEditorBtnOver?: boolean;
/**
* 셀이 선택된 상태에서 해당 셀의 오른쪽에 에디터 버턴을 출력할지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue true
*/
showEditorBtn?: boolean;
/**
* 드랍다운리스트를 단계별로 출력하고자 할 때 영향을 받을 자손 dataField 들을 지정합니다.
* 예를 들어 "group" 이라는 dataField 로 설정한 칼럼이 드랍다운리스트로 변경이 되면 "subGroup", "subGroup2" 가 영향을 받는 다면 이 값을 [ "subGroup", "subGroup2" ] 로 설정하십시오.
* @defaultValue null
*/
descendants?: string[];
/**
* 드랍다운리스트를 단계별로 출력하고자 할 때 부모(조상)에 해당되는 드랍다운리스트가 변경되면 기본값으로 바뀔 값들을 지정합니다.
* 이 속성을 지정하면 부모(조상)에 해당되는 드랍다운리스트 값이 변경되면 지정된 기본값으로 변경됩니다.
* 지정하지 않을 경우 부모(조상)가 변경되도 해당 값은 그대로 유지됩니다.
* @defaultValue null
*/
descendantDefaultValues?: any[];
/**
* 드랍다운 리스트에 출력될 리스트 항목을 동적으로 변경할 수 있는 함수입니다.
* 기본적으로 list 속성에 정의된 항목이 드랍다운 리스트에 출력되나 이 함수의 반환값으로 출력되는 항목을 바꿀 수 있습니다.
* 이 함수의 반환값이 곧 해당 항목의 출력 리스트가 됩니다.(반드시 Array를 반환하십시오.)
* @defaultValue null
*/
listFunction?: (rowIndex: number, columnIndex: number, item: any, dataField: string) => any[];
/**
* easyMode 를 false 로 설정하면 드랍다운리스트의 아이템 선택 후 다른 셀을 클릭 하기 전까지 편집완료 상태가 되지 않습니다.
* 즉, 선택 후 다시 선택 등과 같은 행위가 필요하다면 이 속성을 false 로 설정하십시오.
* @defaultValue true
*/
easyMode?: boolean;
/**
* list 속성의 값이 key-value 를 갖는 Object 요소 배열인 경우 key 에 해당되는 필드명을 지정합니다.
* 실제 적용되는 데이터 값의 필드명입니다.
* @defaultValue null
*/
keyField?: string;
/**
* list 속성의 값이 key-value 를 갖는 Object 요소 배열인 경우 value 에 해당되는 필드명을 지정합니다.
* 드랍다운리스트에 출력되는 데이터의 필드명입니다.
* @defaultValue null
*/
valueField?: string;
/**
* 드랍다운 리스트에서 다중 선택을 할지 여부를 지정합니다. multipleMode 를 true 설정하면 여러 항목을 선택 적용할 수 있습니다.
* @defaultValue false
*/
multipleMode?: boolean;
/**
* multipleMode 를 true 로 설정한 경우 다중 선택 사이의 구분자를 지정합니다.
* 기본값은 콤마(", ") 입니다.
* @defaultValue ", "
*/
delimiter?: string;
/**
* 드랍다운리스트를 renderer 의 type 으로 설정한 경우 조건에 따라 비활성화(disabled) 할지 여부를 결정 할 수 있는 함수입니다.
* 예를 들어 특정 값(name=Anna)은 드랍다운리스트를 비활성화 할 때 유용한 함수입니다.
* true 를 반환하면 드랍다운리스트가 비활성화(disabled) 됩니다.
* 참고 : editRenderer 의 type 으로 "DropDownListRenderer" 를 설정한 경우 무시됩니다. renderer 의 type 으로 설정한 경우만 유효합니다.
* @defaultValue null
*/
disabledFunction?: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string) => boolean;
/**
* 다중 선택을 사용하는 경우(multipleMode=true) 전체 선택/해제 할 수 있는 버턴을 상단에 추가할지 여부를 지정합니다.
* @defaultValue false
*/
showCheckAll?: boolean;
/**
* 리스트 항목들의 텍스트 정렬 방식을 지정합니다. 유효값은 "left", "right", "center" 입니다.
* @defaultValue "center"
*/
listAlign?: 'left' | 'right' | 'center';
/**
* 드랍다운 항목 리스트의 높이를 명시적으로 지정합니다. 이 값으로 설정한 값보다 항목 리스트의 높이는 커지지 않습니다.
* @defaultValue NaN
*/
listHeight?: number;
/**
* renderer 의 type 으로 설정된 드랍다운리스트에서 keyField, valueField 를 설정한 경우 labelFunction 까지 호출되게 할지 여부를 지정합니다.
* @defaultValue false
*/
callLabelFunc?: boolean;
}
/**
* 아이콘 렌더러는 특정 칼럼의 셀에 아이콘이 포함되도록 출력하는 칼럼 렌더러입니다.
*/
export interface IconRenderer {
/**
* IconRenderer
*/
type: RendererKind.IconRenderer;
/**
* 아이콘의 가로 사이즈를 지정합니다.
* 아이콘의 가로 사이즈를 지정하지 않은 경우 기본값으로 24가 적용됩니다.
* 보다 정확한 렌더링을 위해 사이즈를 지정하시길 바랍니다.
* @defaultValue 24
*/
iconWidth?: number;
/**
* 아이콘의 세로 사이즈를 지정합니다.
* 보다 정확한 렌더링을 위해 사이즈를 지정하시길 바랍니다.
* @defaultValue NaN
*/
iconHeight?: number;
/**
* icon 값 참조할 테이블 레퍼런스를 선언합니다
* 예를 들어 해당 칼럼의 데이터 값이 일반 스트링 또는 숫자입니다. 이 때 해당 value 를 통해 얻을 수 있는 아이콘 파일 경로를 참조할 수 있는 해쉬테이블을 만듭니다.
* 아이콘렌더러를 사용하기 위해서는 iconTableRef 또는 iconFunction 중 하나는 선언되어야 합니다.
* @defaultValue null
*/
iconTableRef?: any;
/**
* icon 파일의 경로를 반환하는 아이콘 함수를 선언합니다.
* 데이터의 value 를 비교 또는 처리하여 원하는 아이콘의 파일의 경로를 반환해 주십시오.
* 해당 반환 파일이 곧 아이콘으로 출력됩니다.
* 만약 null 반환하면 아이콘 표시 자체를 하지 않습니다.
* @defaultValue null
*/
iconFunction?: (rowIndex: number, columnIndex: number, value: any, item: any) => string | null;
/**
* 아이콘이 위치할 곳을 지정합니다.
* 유효값은 "left", "right", "aisle", "aisleRight" 입니다. "aisle" 로 설정한 경우 text-align 스타일과 독립적으로 항상 왼쪽에 표시됩니다.
* 마찬가지로 "aisleRight" 는 칼럼 기준 항상 오른쪽 사이드에 표시됩니다.
* @defaultValue "left"
*/
iconPosition?: 'left' | 'right' | 'aisle' | 'aisleRight';
/**
* 아이콘을 클릭했을 때 발생하는 이벤트 핸들러를 선언합니다.
* @defaultValue null
*/
onClick?: (event: IconClickEvent) => void;
}
/**
* 이미지 렌더러는 특정 칼럼의 셀에 이미지가 출력되는 칼럼 렌더러입니다.
*/
export interface ImageRenderer {
/**
* ImageRenderer
*/
type: RendererKind.ImageRenderer;
/**
* 이미지의 세로 사이즈를 지정합니다.
* imgHeight 을 지정하지 않으면 자동적으로 rowHeight 에 맞게 최적화 됩니다.
* 보다 빠른 렌더링을 위해 사이즈를 지정을 권장합니다.
* @defaultValue NaN
*/
imgHeight?: number;
/**
* 이미지의 가로 사이즈를 지정합니다.
* iconWidth 을 지정하지 않으면 자동적으로 rowHeight 에 맞게 최적화 됩니다.
* 보다 빠른 렌더링을 위해 사이즈를 지정을 권장합니다.
* @defaultValue NaN
*/
iconWidth?: number;
/**
* 이미지에 마우스 오버 시 나타나는 설명 필드명를 지정합니다. 이 필드명은 데이터에 존재하는 필드명이여야 합니다.( dataField 와 같은 이치)
* altField 는 이미지 태그의 alt 속성(title 속성) 에 삽입됩니다.
* 만약 altField 를 null 로 설정하면 마우스 오버 시 툴팁이 표시 되지 않습니다.
* @defaultValue ""
*/
altField?: string;
/**
* 이미지의 소스(src) 값 참조할 테이블 레퍼런스를 선언합니다
* 예를 들어 해당 칼럼의 데이터 값이 일반 스트링 또는 숫자입니다. 이 때 해당 value 를 통해 얻을 수 있는 이미지 파일 경로를 참조할 수 있는 해쉬테이블을 만듭니다.
* @defaultValue null
*/
imgTableRef?: any;
/**
* 이미지 파일의 경로를 반환하는 이미지 소스 함수를 선언합니다.
* 데이터의 value 를 비교 또는 처리하여 원하는 이미지의 파일 경로를 반환해 주십시오.
* 해당 반환 파일이 곧 이미지로 출력됩니다.
* 만약 null 반환하면 이미지 표시 자체를 하지 않습니다.
* @defaultValue null
*/
srcFunction?: (rowIndex: number, columnIndex: number, value: any, item: any) => string | null;
/**
* 이미지의 세로 사이즈(imgHeight)을 그리드의 행 높이보다 크게 설정한 경우, 무시하고 이미지를 크게 출력할지 여부를 지정합니다.
* @defaultValue false
*/
ignoreRowHeight?: boolean;
}
/**
* 링크 렌더러는 a 태그의 하이퍼 링크를 출력하는 칼럼 렌더러입니다.
*/
export interface LinkRenderer {
/**
* LinkRenderer
*/
type: RendererKind.LinkRenderer;
/**
* 하이퍼 링크에 적용될 URL 이 있는 필드명를 지정합니다. 이 필드명은 데이터에 존재하는 필드명이여야 합니다.( dataField 와 같은 이치)
* linkField 의 값은 전체(Full) URL 일 수 도 있고, 부분 URL 일 수 도 있습니다.
* 만약 linkField 의 값이 전체 URL 이라면(http:// 로 시작하는 절대 경로) baseUrl 속성을 설정할 필요는 없습니다.
* @defaultValue null
*/
linkField?: string;
/**
* linkField 의 값이 부분 URL 에 해당될 때 기본이 되는 URL 을 지정합니다.
* 예를 들어 linkField 의 값들이 개별적으로 "A", "B", "C" 라면, 이 값들은 일종의 파라메터 역할을 할 것입니다.
* 따라서 하이퍼 링크로 연결될 기본 URL(http:// 로 시작하는 절대 경로)를 baseUrl 에서 설정합니다.
* 만약 baseUrl 을 "http://mydomain.com/param=" 으로 설정한다면 하이퍼 링크는 데이터에 따라 "http://mydomain.com/param=A", "http://mydomain.com/param=B" 와 같이 구성됩니다.
* 만약 baseUrl 을 설정하지 않으면 linkField 의 값은 전체(Full) URL 이여야 합니다.
* 더 나아가 baseUrl 을 "javascript" 로 설정하면, 자바스크립트 함수를 실행 시키는 역할로 LinkRenderer 를 사용할 수 있습니다.
* 만약 baseUrl 을 "javascript" 로 설정했다면, jsCallback 을 반드시 정의해야 합니다.
* @defaultValue ""
*/
baseUrl?: string;
/**
* baseUrl 을 "javascript"로 설정한 경우, 호출될 자바스크립트 콜백 함수를 설정합니다.
* @defaultValue null
*/
jsCallback?: (rowIndex: number, columnIndex: number, value: any, item: any) => void;
}
/**
* 넘버스텝 렌더러는 숫자를 편집하기 쉽도록 넘버 스텝핑이 출력되는 칼럼 / 편집 렌더러입니다.
*/
export interface NumberStepRenderer {
/**
* NumberStepRenderer
*/
type: RendererKind.NumberStepRenderer | EditRendererKind.NumberStepRenderer;
/**
* 넘버링이 될 수 있는 최소값을 지정합니다.
* 이 속성에서 지정한 값보다 작아지지 않습니다.
* 이 속성을 null 또는 NaN 으로 지정하면 최소 입력 제한을 두지 않습니다.
* @defaultValue 0
*/
min?: number;
/**
* 넘버링이 될 수 있는 최대값을 지정합니다.
* 이 속성에서 지정한 값보다 커지지 않습니다.
* 이 속성을 null 또는 NaN 으로 지정하면 최대 입력 제한을 두지 않습니다.
* @defaultValue 100
*/
max?: number;
/**
* 넘버링의 단계를 지정합니다.
* 예를 이 속성을 1로 설정하면 1씩 증가 하거나, 감소합니다.
* @defaultValue 1
*/
step?: number;
/**
* 넘버스텝퍼를 마우스가 아닌 키보드로 편집할 수 있는지 여부를 지정합니다.
* 이 값이 false 이면 키보드로 편집할 수 없습니다.
* @defaultValue true
*/
textEditable?: boolean;
/**
* 넘버스텝퍼의 인푸터(inputer)에서 입력 텍스트의 정렬을 지정합니다.
* 유효값은 "left", "right", "center" 입니다.
* @defaultValue "right"
*/
textAlign?: 'left' | 'right' | 'center';
/**
* renderer 속성의 type 으로 설정한 경우, 인푸터(inputer)의 높이를 지정합니다.
* 지정하지 않은 경우 자동 결정됩니다.
* editRenderer 속성의 type 으로 설정된 경우, 이 속성은 무시됩니다.
* @defaultValue NaN
*/
inputHeight?: number;
/**
* 넘버 감소/증가 버턴(스텝퍼)를 좌,우로 설정할지 여부를 지정합니다.
* @defaultValue false
*/
isHorizontalStep?: boolean;
/**
* 가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다.
* 가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다.
* 기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다.
* @defaultValue "text"
*/
inputMode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | 'none';
/**
* 넘버 감소/증가 버턴(스텁퍼)를 계속 누르고 있는 경우 넘버의 증가/감소 민감도를 지정합니다.
* 예로 해당 민감도를 300 으로 설정하면 계속 누르고 있을 때 0.3초마다 넘버는 증가/감소하게 됩니다.
* @defaultValue 100
*/
sensitivity?: number;
}
/**
* 스파크 칼럼 렌더러는 특정 칼럼의 셀에 스파크 칼럼 차트를 출력시키는 칼럼 렌더러입니다.
* 스파크 칼럼 렌더러에 출력 시킬 데이터 설정은 dataField 속성에 컴마(,) 구분자를 사용한 복수의 데이터필드를 설정하십시오.
*/
export interface SparkColumnRenderer {
/**
* SparkColumnRenderer
*/
type: RendererKind.SparkColumnRenderer;
/**
* 스파크 차트에 대입된 데이터 중 최대값에 해당되는 값을 다른 컬러로 표시합니다.
* @defaultValue true
*/
markMaxValue?: boolean;
/**
* 스파크 차트에 대입된 데이터 중 최소값에 해당되는 값을 다른 컬러로 표시합니다.
* @defaultValue true
*/
markMinValue?: boolean;
/**
* 최대값에 표시를 설정(markMaxValue=true 설정) 한 경우 최대값 표시할 색상을 지정합니다.
* @defaultValue "#2F9D27"
*/
maxColor?: string;
/**
* 최소값에 표시를 설정(markMinValue=true 설정) 한 경우 최소값에 표시할 색상을 지정합니다.
* @defaultValue "#FF2424"
*/
minColor?: string;
/**
* 차트 칼럼의 채우기 색을 지정합니다.
* @defaultValue "#8C8C8C"
*/
fillColor?: string;
/**
* 스파크 칼럼에서 특정 행에만 스파크 차트를 출력하고자 한다면 renderingField 를 정의하십시오.
* renderingField 를 정의 한 후 해당 Row 데이터에 정의한 필드가 true 인 경우만 스파크 차트가 출력됩니다.
* 예를 들어 칼럼 레이아웃에서 renderingField : "drawSpark" 라고 정의 하고, 데이터 작성 시(JSON 또는 XML) 특정 Row 에 drawSpark : true ( <drawSpark>true</drawSpark> )
* 를 설정하면 drawSpark 가 true 로 지정된 데이터의 행만 스파크 차트가 출력됩니다.
* @defaultValue ''
*/
renderingField?: string;
}
/**
* 스파크 라인 렌더러는 특정 칼럼의 셀에 스파크 라인 차트를 출력시키는 칼럼 렌더러입니다.
* 스파크 라인 렌더러에 출력 시킬 데이터 설정은 dataField 속성에 컴마(,) 구분자를 사용한 복수의 데이터필드를 설정하십시오.
*/
export interface SparkLineRenderer {
/**
* SparkLineRenderer
*/
type: RendererKind.SparkLineRenderer;
/**
* 스파크 차트에 대입된 데이터 중 최대값에 해당되는 값을 원으로 마크할 지 여부를 지정합니다.
* @defaultValue true
*/
markMaxValue?: boolean;
/**
* 스파크 차트에 대입된 데이터 중 시작값에 해당되는 값을 원으로 마크할 지 여부를 지정합니다.
* @defaultValue true
*/
markFirstValue?: boolean;
/**
* 스파크 차트에 대입된 데이터 중 마지막값에 해당되는 값을 원으로 마크할 지 여부를 지정합니다.
* @defaultValue true
*/
markLastValue?: boolean;
/**
* 스파크 차트에 대입된 데이터 중 최소값에 해당되는 값을 원으로 마크할 지 여부를 지정합니다.
* @defaultValue true
*/
markMinValue?: boolean;
/**
* 최대값에 표시를 설정(markMaxValue=true 설정) 한 경우 최대값 표시할 색상을 지정합니다.
* @defaultValue "#2F9D27"
*/
maxColor?: string;
/**
* 시작값에 표시를 설정(markFirstValue=true 설정) 한 경우 시작값 표시할 색상을 지정합니다.
* @defaultValue "#8C8C8C"
*/
firstColor?: string;
/**
* 마지막값에 표시를 설정(markLastValue=true 설정) 한 경우 마지막값 표시할 색상을 지정합니다.
* @defaultValue "#8C8C8C"
*/
lastColor?: string;
/**
* 최소값에 표시를 설정(markMinValue=true 설정) 한 경우 최소값에 표시할 색상을 지정합니다.
* @defaultValue "#FF2424"
*/
minColor?: string;
/**
* 스파크 라인의 라인 색상을 지정합니다.
* @defaultValue "#8C8C8C"
*/
lineColor?: string;
/**
* 스파크 라인의 라인 두께를 지정합니다.
* @defaultValue 1
*/
lineWidth?: number;
/**
* 스파크 칼럼에서 특정 행에만 스파크 차트를 출력하고자 한다면 renderingField 를 정의하십시오.
* renderingField 를 정의 한 후 해당 Row 데이터에 정의한 필드가 true 인 경우만 스파크 차트가 출력됩니다.
* 예를 들어 칼럼 레이아웃에서 renderingField : "drawSpark" 라고 정의 하고, 데이터 작성 시(JSON 또는 XML) 특정 Row 에 drawSpark : true ( <drawSpark>true</drawSpark> )
* 를 설정하면 drawSpark 가 true 로 지정된 데이터의 행만 스파크 차트가 출력됩니다.
* @defaultValue ''
*/
renderingField?: string;
}
/**
* 스파크 승패 렌더러는 특정 칼럼의 셀에 스파크 승패 차트를 출력시키는 칼럼 렌더러입니다.
* 스파크 승패 렌더러에 출력 시킬 데이터 설정은 dataField 속성에 컴마(,) 구분자를 사용한 복수의 데이터필드를 설정하십시오.
*/
export interface SparkWinLossRenderer {
/**
* SparkWinLossRenderer
*/
type: RendererKind.SparkWinLossRenderer;
/**
* 스파크 승패 차트에 대입된 데이터 중 최대값에 해당되는 값을 다른 컬러로 표시합니다.
* @defaultValue true
*/
markMaxValue?: boolean;
/**
* 스파크 승패 차트에 대입된 데이터 중 최소값에 해당되는 값을 다른 컬러로 표시합니다.
* @defaultValue true
*/
markMinValue?: boolean;
/**
* 최대값에 표시를 설정(markMaxValue=true 설정) 한 경우 최대값 표시할 색상을 지정합니다.
* @defaultValue "#2F9D27"
*/
maxColor?: string;
/**
* 최소값에 표시를 설정(markMinValue=true 설정) 한 경우 최소값에 표시할 색상을 지정합니다.
* @defaultValue "#FF2424"
*/
minColor?: string;
/**
* 스파크 승패 차트에서 승(win)에 해당되는 칼럼의 채우기 색을 지정합니다.
* @defaultValue "#8C8C8C"
*/
winColor?: string;
/**
* 스파크 승패 차트에서 패(loss)에 해당되는 칼럼의 채우기 색을 지정합니다.
* @defaultValue "#8C8C8C"
*/
lossColor?: string;
/**
* 스파크 승패에서 기준이 되는 값을 지정합니다.
* 예를 들어 이 값을 5로 지정한 경우 5보다 작은 값은 패(loss) 에 해당되며, 큰 값은 승(win) 에 해당됩니다.
* @defaultValue 0
*/
baseValue?: number;
/**
* 스파크 칼럼에서 특정 행에만 스파크 차트를 출력하고자 한다면 renderingField 를 정의하십시오.
* renderingField 를 정의 한 후 해당 Row 데이터에 정의한 필드가 true 인 경우만 스파크 차트가 출력됩니다.
* 예를 들어 칼럼 레이아웃에서 renderingField : "drawSpark" 라고 정의 하고, 데이터 작성 시(JSON 또는 XML) 특정 Row 에 drawSpark : true ( <drawSpark>true</drawSpark> )
* 를 설정하면 drawSpark 가 true 로 지정된 데이터의 행만 스파크 차트가 출력됩니다.
* @defaultValue ''
*/
renderingField?: string;
}
/**
* 템플릿 렌더러는 HTML 그대로를 출력하는 칼럼 렌더러입니다. 즉, HTML 의 innerHTML 속성으로 처리됩니다.
* 데이터 값이 HTML 인 경우 그대로 출력하며 labelFunction 으로 HTML 스트링을 작성할 수 있습니다.
*/
export interface TemplateRenderer {
/**
* TemplateRenderer
*/
type: RendererKind.TemplateRenderer;
/**
* TemplateRenderer 로 정의된 칼럼에서 엑셀, PDF 내보내기 할 때 재가공하여 값을 출력하고자 하는 경우 이 속성을 설정하십시오.
* aliasFunction 을 정의 하지 않은 경우, 기본값은 dataField 값 기준입니다.
* 함수의 반환값이 곧 엑셀, PDF 등 내보내기 값입니다.
* @defaultValue null;
*/
aliasFunction?: (rowIndex: number, columnIndex: number, value: any, headerText: string, item: any, dataField: string) => string | number | boolean;
}
/**
* 부트스트랩 달력 렌더러를 출력하여 날짜를 선택 할 수 있게 정의된 편집 렌더러입니다.
* bootstrap-datepicker 다운로드 및 출처 : https://bootstrap-datepicker.readthedocs.io/en/latest/index.html
* bootstrap-datepicker 라이선스 : Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/
export interface BTCalendarRenderer {
/**
* BTCalendarRenderer
*/
type: EditRendererKind.BTCalendarRenderer;
/**
* 사용자에게 직접 입력이 아닌 달력으로만 수정할 수 있도록 할지 여부를 지정합니다.
* 만약 true 라면 사용자는 오직 출력된 달력에서만 날짜를 선택해서 입력할 수 있습니다.
* 즉, 이 속성이 true 라면 사용자가 직접 입력해서 날짜(값) 변경을 허용하지 않습니다. 오직 출력된 달력에 의해서만 값을 수정할 수 있습니다.
* @defaultValue true
*/
onlyCalendar?: boolean;
/**
* 셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue false
*/
showEditorBtnOver?: boolean;
/**
* 셀이 선택된 상태에서 해당 셀의 오른쪽에 에디터 버턴을 출력할지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue true
*/
showEditorBtn?: boolean;
/**
* 부트스트랩 달력의 "Clear" 버턴을 클릭했을 때 적용될 텍스트를 지정합니다.
* @defaultValue "-"
*/
uncheckDateValue?: string;
/**
* 달력으로 날짜를 선택했을 때 실제로 적용될 날짜 형식을 명시적으로 지정합니다.
* 예를 들어 기존 데이터의 날짜 형식이 "yyyymmdd" 형식인 경우, 달력으로 날짜를 선택하면 기본 형식인 "yyyy/mm/dd" 로 데이터에 적용 됩니다.
* 이런 경우 기존 데이터 형식과 맞지 않기 때문에 일치 시킬 필요가 있습니다.
* 유효값은 "yyyy/mm/dd", "yyyy-mm-dd", "yyyymmdd", "yyyymm", "mm/dd/yyyy" 등 의 일반적인 형식을 지원합니다.
* @defaultValue "yyyy/mm/dd"
*/
defaultFormat?: string;
/**
* 사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다.
* 함수의 리턴값은 Object 이며 해당 Object 는 validate 와 message 를 작성해 주십시오.
* 예를 들면 사용자가 입력한 newValue 가 유효하지 않다면 다음과 같이 return 값을 설정하십시오.
* return { "validate" : false, "message" : "2016/02/01 형식으로 입력해주세요." };
* validate 가 false 인 경우 message 로 설정한 메세지가 사용자에게 출력됩니다.
* @defaultValue null
*/
validator?: (oldValue: any, newValue: any, item: any, dataField: string, fromClipboard: boolean, which: any) => any;
/**
* 사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다.
* @defaultValue 10000
*/
maxlength?: number;
/**
* 에디팅 진입 시 자동으로 달력을 열지 여부를 지정합니다.
* @defaultValue false
*/
openDirectly?: boolean;
/**
* bootstrap-datepicker 의 고유 속성을 설정할 수 객체입니다.
* bootstrap-datepicker API 문서 : https://bootstrap-datepicker.readthedocs.io/en/latest/options.html
*/
btOpts?: any;
/**
* 가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다.
* 가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다.
* 기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다.
* @defaultValue "text"
*/
inputMode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | 'none';
/**
* 속성 defaultFormat 설정된 값으로 인푸터(inputer)에 플레이스홀더(placeholder) 를 출력 시킵니다.
* @defaultValue false
*/
showPlaceholder?: boolean;
/**
* 달력을 열었을 때 처음에 출력시킬 날짜를 지정 할 수 있는 함수입니다.
* 기본적으로 데이터의 값에 해당되는 날짜로 열립니다. 그러나 원하는 날짜를 출력하고자 하는 경우 이 속성을 설정하십시오.
* initDateFunction 은 반드시 Date 객체를 반환해야 합니다.
* @defaultValue null
*/
initDateFunction?: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string, cItem: Column) => Date;
}
/**
* 달력 렌더러는 달력이 출력되어 날짜를 선택 할 수 있게 정의된 편집 렌더러입니다.
*/
export interface CalendarRenderer {
/**
* CalendarRenderer
*/
type: EditRendererKind.CalendarRenderer;
/**
* 달력 출력 시 월(Month) 까지만 표시하는 속성입니다.
* 이 값이 true 이면 일(day) 선택이 아닌 월 선택 달력으로 표시됩니다. 월 선택 시 유용합니다.
* @defaultValue false
*/
onlyMonthMode?: boolean;
/**
* 셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue false
*/
showEditorBtnOver?: boolean;
/**
* 셀이 선택된 상태에서 해당 셀의 오른쪽에 에디터 버턴을 출력할지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue true
*/
showEditorBtn?: boolean;
/**
* 달력 출력 시 이전 달, 다음 달의 여분의 날짜를 출력 할지 여부를 나타냅니다.
* 이 값이 true 이면 달력에 앞뒤로 여분의 날짜가 출력됩니다.
* @defaultValue false
*/
showExtraDays?: boolean;
/**
* 달력 상단의 요일 출력 텍스트들의 배열입니다.
* @defaultValue ["일", "월", "화", "수", "목", "금", "토"]
*/
titles?: string[];
/**
* 달력 출력 시 오늘 날짜 선택 버턴을 하단에 출력 할지 여부를 나타냅니다.
* @defaultValue false
*/
showTodayBtn?: boolean;
/**
* 달력 출력 시 날짜 선택 해제 버턴을 하단에 출력 할지 여부를 나타냅니다.
* "날짜 선택 해제" 란 어느 날짜도 선택되지 않은 값을 말합니다. 즉, 이 값은 공백이 될 수도 있고 사용자가 지정한 값(속성명 : uncheckDateValue) 가 될 수가 있습니다.
* @defaultValue false
*/
showUncheckDateBtn?: boolean;
/**
* showTodayBtn = true 설정 한 경우 오늘 날짜 선택 버턴에 출력할 텍스트를 지정합니다.
* @defaultValue "오늘 선택"
*/
todayText?: string;
/**
* showUncheckDateBtn = true 설정 한 경우 날짜 선택 해제 버턴에 출력할 텍스트를 지정합니다.
* @defaultValue "날짜 선택 해제"
*/
uncheckDateText?: string;
/**
* showUncheckDateBtn = true 설정 한 경우 날짜 선택 해제 버턴 클릭 시 날짜(Date) 대신 적용될 텍스트를 지정합니다.
* @defaultValue "-"
*/
uncheckDateValue?: string;
/**
* 달력으로 날짜를 선택했을 때 실제로 적용될 날짜 형식을 명시적으로 지정합니다.
* 예를 들어 기존 데이터의 날짜 형식이 "yyyymmdd" 형식인 경우, 달력으로 날짜를 선택하면 기본 형식인 "yyyy/mm/dd" 로 데이터에 적용 됩니다.
* 이런 경우 기존 데이터 형식과 맞지 않기 때문에 일치 시킬 필요가 있습니다.
* 유효값은 "yyyy/mm/dd", "yyyy-mm-dd", "yyyymmdd", "yyyymm", "mm/dd/yyyy" 등 의 일반적인 형식을 지원합니다.
* @defaultValue "yyyy/mm/dd"
*/
defaultFormat?: string;
/**
* 사용자에게 직접 입력이 아닌 달력으로만 수정할 수 있도록 할지 여부를 지정합니다.
* 만약 true 라면 사용자는 오직 출력된 달력에서만 날짜를 선택해서 입력할 수 있습니다.
* 즉, 이 속성이 true 라면 사용자가 직접 입력해서 날짜(값) 변경을 허용하지 않습니다. 오직 출력된 달력에 의해서만 값을 수정할 수 있습니다.
* @defaultValue true
*/
onlyCalendar?: boolean;
/**
* 월(months) 단위 달력의 월 포맷 스트링을 지정합니다.
* @defaultValue "m월"
*/
monthTitleString?: string;
/**
* 일(days) 단위 달력의 상단 월의 포맷 스트링을 지정합니다.
* @defaultValue "yyyy년 mm월"
*/
formatMonthString?: string;
/**
* 연(years) 단위 달력의 연 포맷 스트링을 지정합니다.
* @defaultValue "yyyy년"
*/
formatYearString?: string;
/**
* 사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다.
* 함수의 리턴값은 Object 이며 해당 Object 는 validate 와 message 를 작성해 주십시오.
* 예를 들면 사용자가 입력한 newValue 가 유효하지 않다면 다음과 같이 return 값을 설정하십시오.
* return { "validate" : false, "message" : "2016/02/01 형식으로 입력해주세요." };
* validate 가 false 인 경우 message 로 설정한 메세지가 사용자에게 출력됩니다.
* @defaultValue null
*/
validator?: (oldValue: any, newValue: any, item: any, dataField: string, fromClipboard: boolean, which: any) => any;
/**
* 사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다.
* @defaultValue 10000
*/
maxlength?: number;
/**
* 에디팅 진입 시 자동으로 달력을 열지 여부를 지정합니다.
* @defaultValue false
*/
openDirectly?: boolean;
/**
* 달력에서 요일의 시작일을 지정합니다.
* 기본값은 일요일부터 시작합니다. 만약 월요일부터 시작하고자 한다면 이 속성의 값을 1로 설정하십시오.
* 일요일 - 0, 월요일 - 1, 화요일 - 2 등
* @defaultValue 0
*/
firstDay?: number;
/**
* 가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다.
* 가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다.
* 기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다.
* @defaultValue "text"
*/
inputMode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | 'none';
/**
* 속성 defaultFormat 설정된 값으로 인푸터(inputer)에 플레이스홀더(placeholder) 를 출력 시킵니다.
* @defaultValue false
*/
showPlaceholder?: boolean;
/**
* 달력을 열었을 때 처음에 출력시킬 날짜를 지정 할 수 있는 함수입니다.
* 기본적으로 데이터의 값에 해당되는 날짜로 열립니다. 그러나 원하는 날짜를 출력하고자 하는 경우 이 속성을 설정하십시오.
* initDateFunction 은 반드시 Date 객체를 반환해야 합니다.
* @defaultValue null
*/
initDateFunction?: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string, cItem: Column) => Date;
/**
* 시간(Time) 선택이 가능한 셀렉트를 출력할지 여부를 지정합니다.
* 설정하면 시(Hour) : 분(minutes) 를 선택할 수 있는 달력이 출력됩니다.
* 참고 : 시간 선택 달력에서는 onlyCalendar 속성이 항상 true 로 강제 됩니다.
* @defaultValue false
*/
showTimePicker?: boolean;
/**
* 시간 선택 달력에서 초(seconds) 까지 선택할 수 있는 달력으로 출력할지 여부를 지정합니다.
* @defaultValue false
*/
showTimeSecond?: boolean;
/**
* 달력의 하단에 확인 버튼을 출력할지 여부를 지정합니다.
* @defaultValue false
*/
showConfirmBtn?: boolean;
/**
* 달력의 하단에 확인 버튼을 출력한 경우 해당 확인 버튼의 텍스트를 지정합니다.
* @defaultValue "확 인"
*/
confirmText?: string;
/**
* 달력에서 날짜 선택 없이 오직 시간(Time) 선택만 가능한 모드로 출력할지 여부를 지정합니다.
* @defaultValue false
*/
onlyTimeMode?: boolean;
/**
* 시간 선택 달력에서 시(hour)의 선택 간격을 지정합니다.
* @defaultValue 1
*/
hourInterval?: number;
/**
* 시간 선택 달력에서 분(minutes)의 선택 간격을 지정합니다.
* @defaultValue 1
*/
minInterval?: number;
/**
* 시간 선택 달력에서 초(seconds)의 선택 간격을 지정합니다.
* @defaultValue 1
*/
secInterval?: number;
/**
* 시간 선택 달력에서 시(hour)의 선택 리스트를 명시적으로 지정합니다.
* @defaultValue null
*/
hourList?: string[] | number[];
/**
* 시간 선택 달력에서 분(minutes)의 선택 리스트를 명시적으로 지정합니다.
* @defaultValue null
*/
minList?: string[] | number[];
/**
* 시간 선택 달력에서 초(seconds)의 선택 리스트를 명시적으로 지정합니다.
* @defaultValue null
*/
secList?: string[] | number[];
}
/**
* 콤보박스 렌더러는 여러 항목 중 하나를 선택하거나 직접 사용자가 값을 입력 할 수 있도록 출력하는 편집 렌더러입니다.
*/
export interface ComboBoxRenderer {
/**
* ComboBoxRenderer
*/
type: EditRendererKind.ComboBoxRenderer;
/**
* 콤보박스 리스트에 출력될 리스트 항목을 지정합니다.
* 리스트는 배열로 지정합니다. 여기서 지정된 리스트 중 하나를 사용자는 선택할 수 있습니다.
* 콤보박스 리스트를 사용하기 위해서 반드시 선언되어야 할 속성이지만 listFunction 으로 대체 될 수 있습니다.
* 만약 listFunction 을 설정한다면 이 속성은 무시됩니다.
* @defaultValue null
*/
list?: any[];
/**
* 콤보박스 리스트에 출력될 리스트의 텍스트를 변경할 수 있는 함수입니다.
* 기본적으로 list 속성에 정의된 항목이 콤보박스 리스트에 출력되나 이 함수로 출력되는 항목을 바꿀 수 있습니다.
* 예를 들어 실제 데이터는 1, 2 와 같이 숫자지만 사용자에게 보여 줄때는 "남자", "여자" 로 바꿔 표현해 줘야 할 때가 있습니다.
* 이 함수의 반환값이 곧 해당 항목의 출력 텍스트가 됩니다.
* 주의 : listTemplateFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다.
* @defaultValue null
*/
labelFunction?: (rowIndex: number, columnIndex: number, value: any, item: any) => string | boolean | number;
/**
* 콤보박스 리스트에 출력될 리스트의 텍스트를 사용자 정의 할 수 있는 함수입니다.
* 기본적으로 list 속성에 정의된 항목이 콤보박스 리스트에 출력되나 이 함수로 출력되는 항목의 HTML 템플릿을 바꿀 수 있습니다.
* 리스트의 출력 모습을 복잡하거나, 다양한 정보를 출력시키고자 할 때 사용하십시오.
* 이 함수의 반환값이 곧 해당 항목의 출력 HTML 이 됩니다.
* 주의 : labelFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다.
* @defaultValue null
*/
listTemplateFunction?: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string, listItem: any) => any;
/**
* 셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue false
*/
showEditorBtnOver?: boolean;
/**
* 콤보박스리스트를 단계별로 출력하고자 할 때 영향을 받을 자손 dataField 들을 지정합니다.
* 예를 들어 "group" 이라는 dataField 로 설정한 칼럼이 콤보박스 리스트로 변경이 되면 "subGroup", "subGroup2" 가 영향을 받는 다면 이 값을 [ "subGroup", "subGroup2" ] 로 설정하십시오.
* @defaultValue null
*/
descendants?: string[];
/**
* 콤보박스리스트를 단계별로 출력하고자 할 때 부모(조상)에 해당되는 콤보박스 리스트가 변경되면 기본값으로 바뀔 값들을 지정합니다.
* 이 속성을 지정하면 부모(조상)에 해당되는 콤보박스 리스트 값이 변경되면 지정된 기본값으로 변경됩니다.
* 지정하지 않을 경우 부모(조상)가 변경되도 해당 값은 그대로 유지됩니다.
* @defaultValue null
*/
descendantDefaultValues?: any[];
/**
* 콤보박스 리스트에 출력될 리스트 항목을 동적으로 변경할 수 있는 함수입니다.
* 기본적으로 list 속성에 정의된 항목이 콤보박스 리스트에 출력되나 이 함수의 반환값으로 출력되는 항목을 바꿀 수 있습니다.
* 이 함수의 반환값이 곧 해당 항목의 출력 리스트가 됩니다.(반드시 Array를 반환하십시오.)
* @defaultValue null
*/
listFunction?: (rowIndex: number, columnIndex: number, item: any, dataField: string) => any[];
/**
* list 속성의 값이 key-value 를 갖는 Object 요소 배열인 경우 key 에 해당되는 필드명을 지정합니다.
* 실제 적용되는 데이터 값의 필드명입니다.
* @defaultValue null
*/
keyField?: string;
/**
* list 속성의 값이 key-value 를 갖는 Object 요소 배열인 경우 value 에 해당되는 필드명을 지정합니다.
* 드랍다운리스트에 출력되는 데이터의 필드명입니다.
* @defaultValue null
*/
valueField?: string;
/**
* 리스트 항목들의 텍스트 정렬 방식을 지정합니다. 유효값은 "left", "right", "center" 입니다.
* @defaultValue "center"
*/
listAlign?: 'left' | 'right' | 'center';
/**
* 콤보박스 항목 리스트의 높이를 명시적으로 지정합니다. 이 값으로 설정한 값보다 항목 리스트의 높이는 커지지 않습니다.
* @defaultValue NaN
*/
listHeight?: number;
/**
* 사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다.
* 함수의 리턴값은 Object 이며 해당 Object 는 validate 와 message 를 작성해 주십시오.
* 예를 들면 사용자가 입력한 newValue 가 유효하지 않다면 다음과 같이 return 값을 설정하십시오.
* return { "validate" : false, "message" : "2016/02/01 형식으로 입력해주세요." };
* validate 가 false 인 경우 message 로 설정한 메세지가 사용자에게 출력됩니다.
* @defaultValue null
*/
validator?: (oldValue: any, newValue: any, item: any, dataField: string, fromClipboard: boolean, which: any) => any;
/**
* 사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다.
* @defaultValue 10000
*/
maxlength?: number;
/**
* 콤보 박스에서 사용자가 입력한 내용을 기반으로 필터링하여 자동완성 형으로 리스트를 출력시킬지 여부를 지정합니다.
* @defaultValue false
*/
autoCompleteMode?: boolean;
/**
* 현재 칼럼의 모든 값을 콤보 박스 리스트로 추가하여 표시할지 여부를 지정합니다.
* 예를 들어 현재 칼럼에 출력되는 값이 "A", "B", "C" 인 경우 4번째 행의 같은 칼럼에 "D" 를 사용자가 입력하면, 콤보박스 리스트에는 "D" 가 추가되어 ["A", "B", "C", "D"] 가 리스트로 출력됩니다.
* historyMode 는 list 속성(또는 listFunction) 과 함께 사용이 가능합니다. 즉, 기본적으로 list 에서 정의한 리스트에 사용자가 입력한 값이 추가로 리스트로 출력됩니다.
* 단, list 속성을 정의하고, list 의 값이 key-value 를 갖는 Object 요소 배열인 경우에는 historyMode 가 무시됩니다.(keyField, valueField 사용할 때 무시됨)
* @defaultValue false
*/
historyMode?: boolean;
/**
* 콤보 박스에서 자동완성 사용하는 경우(autoCompleteMode=true) 사용자가 입력한 내용을 기반으로 나온 리스트 중 기본 1개를 자동 선택하도록 할지 여부를 지정합니다.
* autoEasyMode=true 설정하면 아래 화살표 없이 바로 엔터키, 탭키 등으로 완료를 해도 리스트 중 1개를 선택합니다.
* @defaultValue false
*/
autoEasyMode?: boolean;
/**
* 콤보 박스에서 자동완성 사용하는 경우(autoCompleteMode=true) 사용자가 입력한 내용을 처음부터 일치시켜서 리스트로 출력할지 여부를 나타냅니다.
* 즉, matchFromFirst=false 설정 시 입력한 내용이 단순 포함되면 리스트로 출력시킵니다.
* @defaultValue true
*/
matchFromFirst?: boolean;
/**
* 가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다.
* 가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다.
* 기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다.
* @defaultValue "text"
*/
inputMode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | 'none';
/**
* 유효성 검사 함수(validator)를 설정한 경우 콤보박스 리스트 항목(item)을 직접 클릭하여 선택했을 때도 유효성 검사를 실시 할지 여부를 지정합니다.
* 기본적으로 콤보박스의 리스트 항목을 직접 클릭하여 선택한 경우 온전히 유요한 값이기 때문에 유효성 검사 함수(validator) 를 실행 시키지 않습니다.
* 그러나 이 속성을 설정하면 리스트 항목 중 하나를 직접적으로 클릭하여 선택한다해도 유효성 검사 함수(validator)를 실행 시킵니다.
* @defaultValue false
*/
doValidatorFromItemClick?: boolean;
}
/**
* 컨디션 렌더러는 칼럼 셀의 에디터를 동적으로 지정할 수 있습니다.
* 일반적으로 하나의 칼럼에는 동일한 에디터가 출력됩니다. 즉, 달력(CalendarRenderer)를 설정하면 해당 칼럼의 모든 셀은 수정 시 달력이 출력됩니다.
* 그러나 컨디션 렌더러로 하나의 칼럼의 에디터를 동적으로 표현 할 수 있습니다.
*/
export interface ConditionRenderer {
/**
* ConditionRenderer
*/
type: EditRendererKind.ConditionRenderer;
/**
* 셀 편집 시 표현할 에디터를 동적으로 지정해주는 함수입니다.
* ConditionRenderer 사용 시 이 함수는 필수 정의해야 합니다.
* 이 함수의 반환값이 곧 실제 적용되는 에디트렌더러가 됩니다.
*/
conditionFunction: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string) => any;
}
/**
* 입력창(input[type="text"])이 나타나는 기본 편집 렌더러입니다.
*/
export interface InputEditRenderer {
/**
* InputEditRenderer
*/
type: EditRendererKind.InputEditRenderer;
/**
* 입력 시 사용자가 숫자 0~9 만 반응하도록 지정합니다.
* onlyNumeric 을 true 설정하면 사용자는 숫자 외에 다른 문자는 입력할 수 없습니다.
* @defaultValue false
*/
onlyNumeric?: boolean;
/**
* 숫자만 입력 설정(onlyNumeric=true) 인 경우, 소수점 입력(.) 도 허용할지 여부를 지정합니다.
* @defaultValue false
*/
allowPoint?: boolean;
/**
* 숫자만 입력 설정(onlyNumeric=true) 인 경우, 음수 부호 입력(-) 도 허용할지 여부를 지정합니다.
* @defaultValue false
*/
allowNegative?: boolean;
/**
* 사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다.
* @defaultValue 10000
*/
maxlength?: number;
/**
* 사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다.
* 함수의 리턴값은 Object 이며 해당 Object 는 validate 와 message 를 작성해 주십시오.
* 예를 들면 사용자가 입력한 newValue 가 유효하지 않다면 다음과 같이 return 값을 설정하십시오.
* return { "validate" : false, "message" : "2016/02/01 형식으로 입력해주세요." };
* validate 가 false 인 경우 message 로 설정한 메세지가 사용자에게 출력됩니다.
* @defaultValue null
*/
validator?: (oldValue: any, newValue: any, item: any, dataField: string, fromClipboard: boolean, which: any) => any;
/**
* 편집 렌더러 즉, 인푸터(inputer)에서 입력 텍스트의 정렬을 지정합니다.
* 유효값은 "left", "right", "center" 입니다.
* @defaultValue "left"
*/
textAlign?: 'left' | 'right' | 'center';
/**
* 숫자만 입력 설정(onlyNumeric=true) 인 경우, 인푸터에 자동 컴마를 천단위 출력할지 여부를 지정합니다.
* @defaultValue false
*/
autoThousandSeparator?: boolean;
/**
* 가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다.
* 가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다.
* 기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다.
* @defaultValue "text"
*/
inputMode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | 'none';
/**
* 사용자가 입력 할 수 있는 값의 패턴을 정규식으로 제한시킵니다.
* 정규식 작성의 규칙은 일반적인 자바스크립트 정규식과 동일합니다.
* 사용자의 매 입력 시 마다 정규식 테스트를 진행하여 참(true)인 경우만 입력 허용 시킵니다.
* 주의 : 정규 표현식 리터럴 정의가 아닙니다. 따라서 / 로 시작하지 않습니다.
* @defaultValue null
*/
regExp?: string;
/**
* 사용자가 입력한 문자를 대문자화 시킬지 여부를 지정합니다.
* 예로 영문자 a 를 입력하면 자동으로 대문자 A 로 변환시킵니다.
* @defaultValue false
*/
autoUpperCase?: boolean;
/**
* 사용자가 입력한 문자를 소문자화 시킬지 여부를 지정합니다.
* 예로 영문자 A 를 입력하면 자동으로 소문자 a 로 변환시킵니다.
* @defaultValue false
*/
autoLowerCase?: boolean;
/**
* 셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue false
*/
showEditorBtnOver?: boolean;
/**
* 붙여넣기한 경우 정규식이나 숫자만 허용에 대한 규칙, validator 통과를 체크하여 해당 값이 적용될지 여부를 지정합니다.
* 예로 onlyNumeric = true 가 설정된 경우 클립보드 값이 숫자가 아닌 경우 붙여넣기를 허용하지 않습니다.
* 마찬가지로 정규식(regExp)가 설정된 경우 클립보드 값이 정규식에 맞지 않다면 붙여넣기를 허용하지 않습니다.
* 이 속성을 true 설정하면 붙여넣기 할 때 이 규칙 및 validator 검사를 무시하고 클립보드의 값을 항상 붙여넣기 허용합니다.
* 이 허용된 값은 개발자가 cellEditEndBefore 이벤트에서 값을 원하는 형태로 변경 시켜 적용을 결정할 수 있습니다.
* @defaultValue false
*/
notCheckByClipboard?: boolean;
/**
* 입력 값이 보이지 않는 패스워드 유형으로 편집 렌더러를 표시할지를 여부를 지정합니다.
* @defaultValue false
*/
passwordMode?: boolean;
}
/**
* jQuery UI-datepicker 달력 렌더러를 출력하여 날짜를 선택 할 수 있게 정의된 편집 렌더러입니다.
* editRenderer 속성으로 편집 시 jQuery UI-datepicker 달력을 출력하여 날짜를 선택할 수 있게 합니다.
* jQuery UI-datepicker 다운로드 및 출처 : http://jqueryui.com/datepicker
* jQuery UI-datepicker 라이선스 : MIT License (https://jquery.org/license/)
*/
export interface JQCalendarRenderer {
/**
* JQCalendarRenderer
*/
type: EditRendererKind.JQCalendarRenderer;
/**
* 사용자에게 직접 입력이 아닌 달력으로만 수정할 수 있도록 할지 여부를 지정합니다.
* 만약 true 라면 사용자는 오직 출력된 달력에서만 날짜를 선택해서 입력할 수 있습니다.
* 즉, 이 속성이 true 라면 사용자가 직접 입력해서 날짜(값) 변경을 허용하지 않습니다. 오직 출력된 달력에 의해서만 값을 수정할 수 있습니다.
* @defaultValue true
*/
onlyCalendar?: boolean;
/**
* 달력으로 날짜를 선택했을 때 실제로 적용될 날짜 형식을 명시적으로 지정합니다.
* 예를 들어 기존 데이터의 날짜 형식이 "yyyymmdd" 형식인 경우, 달력으로 날짜를 선택하면 기본 형식인 "yyyy/mm/dd" 로 데이터에 적용 됩니다.
* 이런 경우 기존 데이터 형식과 맞지 않기 때문에 일치 시킬 필요가 있습니다.
* 유효값은 "yyyy/mm/dd", "yyyy-mm-dd", "yyyymmdd", "yyyymm", "mm/dd/yyyy" 등 의 일반적인 형식을 지원합니다.
* @defaultValue "yyyy/mm/dd"
*/
defaultFormat?: string;
/**
* 사용자가 입력을 완료하고 실제로 적용하기 전에 유효성 검사를 할 수 있는 함수입니다.
* 함수의 리턴값은 Object 이며 해당 Object 는 validate 와 message 를 작성해 주십시오.
* 예를 들면 사용자가 입력한 newValue 가 유효하지 않다면 다음과 같이 return 값을 설정하십시오.
* return { "validate" : false, "message" : "2016/02/01 형식으로 입력해주세요." };
* validate 가 false 인 경우 message 로 설정한 메세지가 사용자에게 출력됩니다.
* @defaultValue null
*/
validator?: (oldValue: any, newValue: any, item: any, dataField: string, fromClipboard: boolean, which: any) => any;
/**
* 사용자가 입력 할 수 있는 글자수를 제한하도록 지시합니다.
* @defaultValue 10000
*/
maxlength?: number;
/**
* 셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue false
*/
showEditorBtnOver?: boolean;
/**
* 셀이 선택된 상태에서 해당 셀의 오른쪽에 에디터 버턴을 출력할지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue true
*/
showEditorBtn?: boolean;
/**
* 에디팅 진입 시 자동으로 달력을 열지 여부를 지정합니다.
* @defaultValue false
*/
openDirectly?: boolean;
/**
* jQuery UI-datepicker 의 고유 속성을 설정할 수 객체입니다.
* datepicker API 문서 : http://api.jqueryui.com/datepicker/
*/
jqOpts?: any;
/**
* 가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다.
* 가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다.
* 기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다.
* @defaultValue "text"
*/
inputMode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | 'none';
/**
* 속성 defaultFormat 설정된 값으로 인푸터(inputer)에 플레이스홀더(placeholder) 를 출력 시킵니다.
* @defaultValue false
*/
showPlaceholder?: boolean;
/**
* 달력을 열었을 때 처음에 출력시킬 날짜를 지정 할 수 있는 함수입니다.
* 기본적으로 데이터의 값에 해당되는 날짜로 열립니다. 그러나 원하는 날짜를 출력하고자 하는 경우 이 속성을 설정하십시오.
* initDateFunction 은 반드시 Date 객체를 반환해야 합니다.
* @defaultValue null
*/
initDateFunction?: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string, cItem: Column) => Date;
}
/**
* 마스크 편집 렌더러(MaskEditRenderer)는 정의된 패턴으로 강제 시켜 입력받도록 하는 편집 렌더러입니다.
*/
export interface MaskEditRenderer {
/**
* MaskEditRenderer
*/
type: EditRendererKind.MaskEditRenderer;
/**
* 입력을 강제 시킬 마스크(mask)를 설정합니다. 마스크는 미리 정해진 자릿수와 해당 자리에 입력 가능한 패턴을 의미합니다.
* 마스크 편집 렌더러를 사용하기 위해서는 mask 속성을 반드시 설정해야 합니다.
* 예로 시간과 같이 숫자 6자리만 입력 가능한 마스크 설정은 "99:99:99" 입니다.
* @defaultValue null
*/
mask: string;
/**
* 아직 입력되지 않은 마스크 입력 자리에 표시될 placeholder 를 지정합니다.
* 예로 mask 를 "9999-99-99" 로 설정한 경우 사용자에게 날짜 입력을 표시해 주기 위해 placeholder 를 "yyyy-mm-dd" 로 설정할 수 있습니다.
* 설정한 mask 와 placeholder 의 자릿수는 같아야 합니다.
* placeholder 를 설정하지 않으면 기본값인 "____-__-__" 로 출력됩니다.
* @defaultValue "_"
*/
placeholder?: string;
/**
* 마스크로 설정된 유효한 자릿수만큼 모두 입력하여 끝까지 간 경우 엔터(Enter)로 입력 완료된 것으로 간주 시킬지 여부를 지정합니다.
* autoEnter 를 true 로 설정하면 엔터 키와 같은 입력 완료 키를 따로 누르지 않아도 입력이 완료 됩니다.
* @defaultValue false
*/
autoEnter?: boolean;
/**
* 수정 적용 시 실제 데이터 모델에 적용 시킬 값이 마스크값 그대로 적용 할지 여부를 지정합니다.
* 예를 들어 mask를 "9999-99-99" 로 설정한 경우 순수하게 사용자가 입력한 값이 "12345678" 이라 했을 때 다음처럼 데이터 모델에 적용됩니다.
* applyMaskValue = true : mask 가 설정된 값인 "1234-56-78" 이 데이터 값으로 적용됩니다.
* applyMaskValue = false : mask 가 아닌 실제 사용자가 입력한 값 "12345678" 이 데이터 값으로 적용됩니다.
* @defaultValue true
*/
applyMaskValue?: boolean;
/**
* 마스크 자리 입력 시 덮어쓰기로 값이 치환될지 여부를 지정합니다.
* overWrite = false 라면 새로운 값을 입력할 때 현재 값이 뒤로 밀리게 됩니다.
* @defaultValue true
*/
overWrite?: boolean;
/**
* 편집 렌더러 즉, 인푸터(inputer)에서 입력 텍스트의 정렬을 지정합니다.
* 유효값은 "left", "right", "center" 입니다.
* @defaultValue "left"
*/
textAlign?: 'left' | 'right' | 'center';
/**
* 가상 키보드를 제공하는 디바이스(일반적으로 안드로이드, iOS 와 같은 모바일 디바이스)에서 출력 시킬 가상 키보드(소프트 키보드)의 형식을 지정합니다.
* 가상 키보드는 전적으로 해당 디바이스에서 제공하는 형태 그래도 출력 시킵니다. 즉, 기기에서 지원해야 사용 가능합니다.
* 기기마다 표시되는 가상 키보드는 상이 할 수 있습니다. 전적으로 기기에 의존하는 키보드입니다.
* @defaultValue "text"
*/
inputMode?: 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | 'none';
}
/**
* 리모트 리스트 렌더러는 검색을 통해 원격으로 리스트를 실시간으로 가져와 출력시키는 렌더러입니다.
* 에디팅으로 진입하면 사용자는 수정할 값을 입력하는 것이 아니라 검색할 단어를 입력하면, 해당 단어를 파라메터로 지정된 URL 로 요청을 합니다.
*/
export interface RemoteListRenderer {
/**
* RemoteListRenderer
*/
type: EditRendererKind.RemoteListRenderer;
/**
* 리모트 리스트의 요청과 응답을 관리할 remoter 를 지정합니다.
* 사용자가 입력한 텍스트(즉, 검색하고자 한 단어)를 기반으로 서버에 요청을 보내고, 그리드에 응답으로 설정할 수 있는 속성입니다.
* 리모트 리스트 렌더러를 사용하기 위해서는 remoter 는 필수 설정해야 합니다.
* @defaultValue null
*/
remoter: (request: {
rowIndex: number;
columnIndex: number;
item: any;
dataField: string;
term: string;
}, response: any) => void;
/**
* 리모트 리스트에 출력될 리스트의 텍스트를 변경할 수 있는 함수입니다.
* 기본적으로 list 속성에 정의된 항목이 리모트 리스트에 출력되나 출력되나 이 함수로 출력되는 항목을 바꿀 수 있습니다.
* 예를 들어 실제 데이터는 1, 2 와 같이 숫자지만 사용자에게 보여 줄때는 "남자", "여자" 로 바꿔 표현해 줘야 할 때가 있습니다.
* 이 함수의 반환값이 곧 해당 항목의 출력 텍스트가 됩니다.
* 주의 : listTemplateFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다.
* @defaultValue null
*/
labelFunction?: (rowIndex: number, columnIndex: number, value: any, item: any) => string | boolean | number;
/**
* 리모트 리스트에 출력될 리스트의 텍스트를 사용자 정의 할 수 있는 함수입니다.
* 기본적으로 list 속성에 정의된 항목이 리모트 리스트에 출력되나 이 함수로 출력되는 항목의 HTML 템플릿을 바꿀 수 있습니다.
* 리스트의 출력 모습을 복잡하거나, 다양한 정보를 출력시키고자 할 때 사용하십시오.
* 이 함수의 반환값이 곧 해당 항목의 출력 HTML 이 됩니다.
* 주의 : labelFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다.
* @defaultValue null
*/
listTemplateFunction?: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string, listItem: any) => any;
/**
* 셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue false
*/
showEditorBtnOver?: boolean;
/**
* 셀이 선택된 상태에서 해당 셀의 오른쪽에 에디터 버턴을 출력할지 여부를 지정합니다.
* 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다.
* @defaultValue true
*/
showEditorBtn?: boolean;
/**
* 응답으로 설정한 리스트가 여러개의 fleld 를 갖는 구조(일반적인 JSON구조)인 경우 그리드 셀에 실제로 적용시킬 값이 있는 필드명을 지정합니다.
* 예를 들어 단순 1차원 텍스트 배열인 ["A", "B", "C"] 와 같은 구조는 fieldName 을 지정할 필요가 없습니다.
* 응답이 JSON 구조의 복잡한 키-값으로 이루어진 배열 [{"name":"A", "age" : 19, "date" : "2015/10/10"}, {"name":"A", "age" : 19, "date" : "2015/10/10"}] 와 같은 구조인 경우 해당 셀에 수정완료로 적용할 필드명을 지정해야 합니다.
* @defaultValue null
*/
fieldName?: string;
/**
* 응답으로 설정한 리스트가 빈 배열인 경우 출력할 텍스트를 지정합니다.
* @defaultValue "No Data"
*/
noDataMessage?: string;
/**
* 리스트 항목들의 텍스트 정렬 방식을 지정합니다. 유효값은 "left", "right", "center" 입니다.
* @defaultValue "center"
*/
listAlign?: 'left' | 'right' | 'center';
/**
* 항목 리스트의 높이를 명시적으로 지정합니다. 이 값으로 설정한 값보다 항목 리스트의 높이는 커지지 않습니다.
* @defaultValue NaN
*/
listHeight?: number;
/**
* 그리드의 값과 리스트 항목들 중 텍스트가 같은 경우 해당 항목을 선택시킬지 여부를 지정합니다.
* @defaultValue true
*/
selectedSameText?: boolean;
/**
* 사용자의 매 입력마다 remoter 를 호출할지 여부를 지정합니다. 일반적으로 엔터나 검색 버튼을 눌러야 remoter 가 호출됩니다.
* 그러나 이 속성을 true 설정하면 사용자의 매 입력마다 remoter 가 호출되어 실시간 리스트를 표시 할 수 있습니다.
* remoter 에서 서버 요청을 작성하는 경우 서버 과부하에 주의 하십시오.
* @defaultValue false
*/
autoCompleteMode?: boolean;
/**
* autoCompleteMode = true 설정한 경우 매 입력 시 실시간 리스트가 표시될 때 리스트의 첫 아이템이 자동 선택될지 여부를 지정합니다.
* @defaultValue false
*/
autoEasyMode?: boolean;
}
/**
* 사용자 정의 에디트렌더러(CustomEditRenderer)는 그리드에서 제공되는 기본 에디트렌더러가 아닌 사용자(개발자)가 직접 작성한 에디터를 그리드의 editRenderer 로 정의하여 셀 수정 방식을 결정할 수 있는 에디트렌더러 입니다.
*/
export interface CustomEditRenderer {
/**
* CustomEditRenderer
*/
type: EditRendererKind.CustomEditRenderer;
/**
* 사용자가 그리드의 에디트렌더러로 작성한 클래스를 설정합니다.
* 작성한 클래스는 AUIGrid.Class 를 이용하여 AUIGrid.EditRendererBase 클래스를 확장(extend)하여 작성하여야 합니다.
* @defaultValue null
*/
jsClass: any;
/**
* CustomEditRenderer 에 전달할 여분의 속성을 설정합니다.
* 여기서 작성한 extraProps 는 사용자가 작성한 클래스에서 this.extraProps 로 접근 가능합니다.
* @defaultValue null
*/
extraProps?: any;
/**
* 에디트렌더러가 표시될 때 X 위치에 추가 값을 지정합니다.
* 예로 이 속성을 20 설정하면 20px 오른쪽으로 이동하여 에디트렌더러가 출력됩니다.
* @defaultValue NaN
*/
offsetLeft?: number;
/**
* 에디트렌더러가 표시될 때 Y 위치에 추가 값을 지정합니다.
* 예로 이 속성을 20 설정하면 20px 하단으로 이동하여 에디트렌더러가 출력됩니다.
* @defaultValue NaN
*/
offsetTop?: number;
/**
* 에디트렌더러가 표시될 때 셀 기준으로 왼쪽과 오른쪽 중 표시될 자리를 지정합니다.
* 유효값은 "left", "right" 입니다.
* @defaultValue "left"
*/
hPosition?: 'left' | 'right';
/**
* 에디트렌더러가 표시될 때 셀 기준으로 상단과 하단 중 표시될 자리를 지정합니다.
* 유효값은 "top", "bottom" 입니다.
* @defaultValue "bottom"
*/
vPosition?: 'top' | 'bottom';
/**
* 에디트렌더러의 가로 크기를 명시적으로 지정합니다.
* @defaultValue NaN
*/
width?: number;
/**
* 에디트렌더러의 세로 크기를 명시적으로 지정합니다.
* @defaultValue NaN
*/
height?: number;
/**
* 에디트렌더러의 가로 크기를 해당 셀의 가로 크기와 동일하게 맞춰 표시할지 여부를 지정합니다.
* @defaultValue false
*/
fitWidth?: boolean;
/**
* 에디트렌더러의 세로 크기를 해당 셀의 세로 크기와 동일하게 맞춰 표시할지 여부를 지정합니다.
* @defaultValue false
*/
fitHeight?: boolean;
}
/**
* 버튼 헤더 렌더러는 특정 칼럼의 헤더에 버튼이 출력되는 헤더 렌더러입니다.
*/
export interface ButtonHeaderRenderer {
/**
* ButtonHeaderRenderer
*/
type: HeaderRendererKind.ButtonHeaderRenderer;
/**
* 버튼이 출력될 위치를 지정합니다. 위치는 headerText 를 기준으로 지정한 위치에 렌더링 됩니다.
* @defaultValue "bottom"
*/
position?: 'top' | 'bottom' | 'left' | 'right';
/**
* 버튼을 클릭했을 때 발생하는 이벤트 핸들러를 선언합니다.
* @defaultValue null
*/
onClick?: (event: HeaderButtonClickEvent) => void;
/**
* 버튼의 텍스트를 지정합니다.
* @defaultValue ""
*/
text?: string;
}
/**
* 체크박스 헤더 렌더러는 특정 칼럼의 헤더에 체크박스가 출력되는 헤더 렌더러입니다.
*/
export interface CheckBoxHeaderRenderer {
/**
* CheckBoxHeaderRenderer
*/
type: HeaderRendererKind.CheckBoxHeaderRenderer;
/**
* 체크박스가 출력될 위치를 지정합니다. 위치는 headerText 를 기준으로 지정한 위치에 렌더링 됩니다.
* @defaultValue "bottom"
*/
position?: 'top' | 'bottom' | 'left' | 'right';
/**
* 체크박스를 클릭했을 때 발생하는 이벤트 핸들러를 선언합니다.
* @defaultValue null
*/
onClick?: (event: HeaderCheckClickEvent) => void;
/**
* 체크박스가 최초로 생성될 때 체크 여부를 지정합니다.
* dependentMode=true 를 설정하면 checked는 무시되고 데이터에 맞게 결정됩니다.
* @defaultValue false
*/
checked?: boolean;
/**
* 그리드(바디)의 체크박스와 헤더의 체크박스가 상호 의존적으로 작용할지 여부를 지정합니다.
* 이 속성을 true 설정하면 헤더의 체크박스를 클릭했을 때 해당 열의 모든 값을 true | false 로 변경합니다.
* dependentMode 는 renderer 의 type 으로 CheckBoxEditRenderer 를 정의할 때만 활성화됩니다.
* dependentMode 는 그룹형 헤더에 정의한 경우 무시 됩니다. 일반 헤더에서만 사용 가능합니다.
* @defaultValue false
*/
dependentMode?: boolean;
/**
* 사용자가 체크박스를 클릭하여 체크 상태를 변경하고자 할 때 변경을 허락할지 여부를 지정할 수 있는 함수 입니다.
* @defaultValue null
*/
checkableFunction?: (columnIndex: number, isChecked: boolean, cItem: Column) => boolean;
}
/**
* 드랍다운 헤더 렌더러는 특정 칼럼의 헤더에 드랍다운리스트가 출력되는 헤더 렌더러입니다.
*/
export interface DropDownHeaderRenderer {
/**
* DropDownHeaderRenderer
*/
type: HeaderRendererKind.DropDownHeaderRenderer;
/**
* 드랍다운 리스트에 출력될 리스트 항목을 지정합니다.
* 리스트는 배열로 지정합니다. 여기서 지정된 리스트 중 하나를 사용자는 선택할 수 있습니다.
* 드랍다운 리스트를 사용하기 위해서 반드시 선언되어야 할 속성이지만 listFunction 으로 대체 될 수 있습니다.
* 만약 listFunction 을 설정한다면 이 속성은 무시됩니다.
* @defaultValue null
*/
list?: any[];
/**
* 드랍다운 리스트에 출력될 리스트의 텍스트를 사용자 정의 할 수 있는 함수입니다.
* 기본적으로 list 속성에 정의된 항목이 드랍다운 리스트에 출력되나 이 함수로 출력되는 항목의 HTML 템플릿을 바꿀 수 있습니다.
* 리스트의 출력 모습을 복잡하거나, 다양한 정보를 출력시키고자 할 때 사용하십시오.
* 이 함수의 반환값이 곧 해당 항목의 출력 HTML 이 됩니다.
* 주의 : labelFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다.
* @defaultValue null
*/
listTemplateFunction?: (rowIndex: number, columnIndex: number, value: any, item: any, dataField: string, listItem: any) => any;
/**
* 드랍다운 리스트에 출력될 리스트 항목을 동적으로 변경할 수 있는 함수입니다.
* 기본적으로 list 속성에 정의된 항목이 드랍다운 리스트에 출력되나 이 함수의 반환값으로 출력되는 항목을 바꿀 수 있습니다.
* 이 함수의 반환값이 곧 해당 항목의 출력 리스트가 됩니다.(반드시 Array를 반환하십시오.)
* @defaultValue null
*/
listFunction?: (rowIndex: number, columnIndex: number, item: any, dataField: string) => any[];
/**
* list 속성의 값이 key-value 를 갖는 Object 요소 배열인 경우 key 에 해당되는 필드명을 지정합니다.
* 실제 적용되는 데이터 값의 필드명입니다.
* @defaultValue null
*/
keyField?: string;
/**
* list 속성의 값이 key-value 를 갖는 Object 요소 배열인 경우 value 에 해당되는 필드명을 지정합니다.
* 드랍다운리스트에 출력되는 데이터의 필드명입니다.
* @defaultValue null
*/
valueField?: string;
/**
* 리스트 항목들의 텍스트 정렬 방식을 지정합니다. 유효값은 "left", "right", "center" 입니다.
* @defaultValue "center"
*/
listAlign?: 'left' | 'right' | 'center';
/**
* 드랍다운 항목 리스트의 높이를 명시적으로 지정합니다. 이 값으로 설정한 값보다 항목 리스트의 높이는 커지지 않습니다.
* @defaultValue NaN
*/
listHeight?: number;
/**
* 드랍다운 리스트의 항목을 클릭했을 때 발생하는 이벤트 핸들러를 선언합니다.
* @defaultValue null
*/
onClick?: (event: HeaderDropDownItemClickEvent) => void;
/**
* 헤더에 출력되는 드랍다운의 오른쪽 여백을 지정합니다.
* 이 여백은 헤더 클릭으로 정렬을 실행하고자 할 때 지정할 필요가 있습니다.
* @defaultValue 0
*/
offsetRight?: number;
/**
* 드랍다운 리스트의 항목을 선택하면 선택한 값으로 헤더 텍스트를 변경 시킬지 여부를 지정합니다.
* @defaultValue true
*/
applyHeaderText?: boolean;
}
/**
* 푸터(Footer) 는 칼럼 레이아웃을 선언할 때와 같이 Array-Object 로 선언합니다.
* 푸터에 출력하고자 하는 값 1개는 하나의 Object 입니다.
*/
export interface Footer {
/**
* 푸터의 연산자(operation 속성)가 참조할 데이터필드를 지정합니다.
* 예를 들어 "price"에 대하여 "합계(SUM)" 을 구하여 "price" 하단에 출력하고자 한다면 dataField, operation, positionField 의 값은 각각 "price", "SUM", "price" 입니다.
* @defaultValue null
*/
dataField?: string;
/**
* 푸터 값이 위치할 데이터필드를 지정합니다.
* 칼럼 레이아웃에 정의한 dataField 를 따라서 해당 칼럼 하단(푸터 위치)에 출력됩니다.
* 예를 들어 "price"에 대하여 "합계(SUM)" 을 구하여 "price" 하단에 출력하고자 한다면 dataField, operation, positionField 의 값은 각각 "price", "SUM", "price" 입니다.
* dataField 값과 positionField 값이 같을 필요는 없습니다. 즉, "price" 합계를 "date" 칼럼 하단에 출력하고자 한다면 positionField 를 "date" 로 지정하십시오.
* positionField 를 설정하지 않으면 푸터에 출력되지 않습니다.
* positionField 에 "#base" 를 지정하면 행번호 칼럼 하단에 출력됩니다.
* @defaultValue null
*/
positionField?: string;
/**
* 연산자를 지정합니다.
* 기본으로 지원되는 Footer 연산은 SUM, AVG, MIN, MAX, COUNT 입니다.
* SUM, AVG, MIN, MAX, COUNT 이외의 연산은 expFunction 으로 계산할 수 있습니다.
* expFunction 을 정의하면 operation 은 무시됩니다.
* @defaultValue null
*/
operation?: 'SUM' | 'AVG' | 'MIN' | 'MAX' | 'COUNT';
/**
* 푸터에 연산된 값이 아닌 일반 텍스트를 지정하고자 할 때 사용하는 속성입니다.
* 예를 들어 "총합" 과 같은 일반 텍스트를 지정하고자 할 때 이 속성을 사용하십시오.
* @defaultValue null
*/
labelText?: string;
/**
* 푸터 셀에 개별 스타일을 지정합니다.
* 이 속성 값은 CSS 클래스 명입니다.
* 예를 들어 CSS 에서 .my-custom { color:#ff0000; } 로 클래스 CSS 를 정의했을 때 이 클래스를 사용하고자 하는 경우 style 에 CSS 명을 설정하십시오.
* 설정 예는 style : "my-custom" 과 같습니다. 점(.) 은 생략하고 지정하십시오.
* 다중의 CSS 클래스는 지원하지 않습니다. 예를 들어 "right-style bold-style font12-style" 과 같은 구조는 지원하지 않습니다.
* 엑셀 내보내기 시에는 해당 스타일의 글자색, 배경색, 볼드체, 이탤릭체만 적용됩니다.
* @defaultValue null
*/
style?: string;
/**
* 푸터에 출력되는 값의 유형이 Number(numeric) 인 경우 숫자 포맷 형식을 지정합니다.
* 칼럼의 formatString 과 동일함으로 자세한 포맷 유형은 칼럼의 formatString 속성을 참고하십시오.(예:"#,##0")
* 숫자가 아닌 경우 지정한 formatString 은 무시됩니다.
* @defaultValue null
*/
formatString?: string;
/**
* 푸터에 출력되는 셀 텍스트를 사용자 정의 할 수 있는 함수입니다.
* 기본적으로 dataField 의 operation 값이 셀에 출력되는데 이 값을 자바스크립트에서 재가공하여 출력하고자 하는 경우 이 속성을 설정하십시오.
* 함수의 반환값이 곧 셀에 출력됩니다.
* @defaultValue null
*/
labelFunction?: (value: any, columnValues: any[], footerValues: any[]) => string | number | boolean;
/**
* 푸터에는 dataField 와 미리 지정된 연산자(operatio)에 맞게 계산된 값이 출력됩니다. 그러나 더 확장된 연산을 해야 할 필요가 있습니다.
* 기본으로 제공되는 연산 외에 사용자가 원하는 연산을 할 수 있도록 하는 함수입니다.
* expFunction 은 수식 함수이고 반환(Return)형은 반드시 Number 여야 합니다.
* @defaultValue null
*/
expFunction?: (columnValues: any[]) => number;
/**
* 푸터 셀에 출력되는 텍스트의 접두사를 지정합니다.
* 예를 들어 1000 이라는 글자에 달러표시($) 를 추가하고자 한다면 이 속성에 '$'를 설정하십시오.
* @defaultValue ""
*/
prefix?: string;
/**
* 푸터 셀에 출력되는 텍스트의 접미사를 지정합니다.
* 예를 들어 1000 이라는 글자에 만원이라는 글자를 추가하고자 한다면 이속성에 '만원'을 설정하십시오.
* @defaultValue ""
*/
postfix?: string;
/**
* 푸터에 출력되는 셀의 개별 스타일을 동적으로 지정하는 함수입니다.
* 함수의 반환값은 CSS 에서 이미 선언되어 있는 CSS 클래스여야 합니다.
* 다중의 CSS 클래스는 지원하지 않습니다. 예를 들어 "right-style bold-style font12-style" 과 같은 구조는 지원하지 않습니다.
* @defaultValue null
*/
styleFunction?: (value: string, footerValues: any[]) => any;
/**
* 푸터 셀의 가로 병합을 지시합니다.
* 예를 들어 colSpan : 3 을 설정하면 자신을 포함하여 3개의 푸터 셀을 가로 병합 합니다.
* @defaultValue NaN
*/
colSpan?: number;
/**
* formatString 에 의해 처리되는 소수점 반올림, 올림, 내림을 결정합니다.
* 예를 들어 formatString 을 "#,##0" 으로 지정한 경우, 실제 값이 12345.6 일 때 기본값은 반올림되어 "12,346" 으로 포맷팅되어 출력됩니다.
* 소수점 처리 방식을 반올림, 내림, 올림을 결정짓는 속성입니다.
* 유효값은 다음과 같습니다.
* "ceil" : 소수점 처리를 올림합니다.
* "floor" : 소수점 처리를 내림합니다.
* "round" : 소수점 처리를 반올림합니다.
* @defaultValue "round"
*/
rounding?: 'ceil' | 'floor' | 'round';
/**
* formatString 을 지정한 경우 엑셀 내보내기 할 때 실질적인 숫자 그대로 내보내기 할 지 여부를 지정합니다.
* 실질적인 숫자의 의미는 예로 95.87 이라는 값이 있는 경우 formatString 을 "#,##0" 으로 설정했을 때 96 으로 출력이 됩니다.
* 이 때 엑셀로 내보내기 할 때 포매팅된 값인 96을 내보내기하지 않고 95.87 로 내보내기할지 여부를 의미합니다.
* xlsxNumeric 을 true 로 설정하면 엑셀의 셀에 보여지는 값은 96으로 동일하게 보이지만 더블클릭 시 보이는 값(또는 엑셀의 수식창의 값)은 95.87 로 나타납니다.
* xlsxNumeric 은 formatString 이외 prefix, postfix, labelFunction 등으로 포매팅한 경우 무시됩니다.(formatString 설정 시에만 사용 가능함)
* 또한 rounding 속성으로 소수점을 반올림처리 할 때만 유효합니다.
* @defaultValue false
*/
xlsxNumeric?: boolean;
}
export declare enum EventKind {
Ready = "ready",
RowCheckClick = "rowCheckClick",
RowAllChkClick = "rowAllChkClick",
CellClick = "cellClick",
CellDoubleClick = "cellDoubleClick",
CellEditBegin = "cellEditBegin",
CellEditEnd = "cellEditEnd",
CellEditEndBefore = "cellEditEndBefore",
CellEditCancel = "cellEditCancel",
HeaderClick = "headerClick",
TreeOpenChange = "treeOpenChange",
SelectionChange = "selectionChange",
UpdateRow = "updateRow",
UpdateRows = "updateRows",
AddRow = "addRow",
AddRowFinish = "addRowFinish",
RemoveRow = "removeRow",
BeforeRemoveRow = "beforeRemoveRow",
RemoveSoftRows = "removeSoftRows",
BeforeRemoveSoftRows = "beforeRemoveSoftRows",
VScrollChange = "vScrollChange",
HScrollChange = "hScrollChange",
Grouping = "grouping",
Sorting = "sorting",
Filtering = "filtering",
NotFound = "notFound",
ContextMenu = "contextMenu",
BeforeInsertRow = "beforeInsertRow",
KeyDown = "keyDown",
ColumnStateChange = "columnStateChange",
FooterClick = "footerClick",
FooterDoubleClick = "footerDoubleClick",
RowStateCellClick = "rowStateCellClick",
UndoRedoChange = "undoRedoChange",
PasteBegin = "pasteBegin",
CopyBegin = "copyBegin",
PasteEnd = "pasteEnd",
CopyEnd = "copyEnd",
RowNumCellClick = "rowNumCellClick",
PageChange = "pageChange",
TreeLazyRequest = "treeLazyRequest",
AddColumn = "addColumn",
AddTreeColumn = "addTreeColumn",
BeforeRemoveColumn = "beforeRemoveColumn",
RemoveColumn = "removeColumn",
CellLongTap = "cellLongTap",
DragBegin = "dragBegin",
DropEndBefore = "dropEndBefore",
DropEnd = "dropEnd",
DropCancel = "dropCancel",
PageRowCountChange = "pageRowCountChange",
SelectionConstraint = "selectionConstraint",
RowNumHeaderClick = "rowNumHeaderClick",
Indent = "indent",
Outdent = "outdent",
HeaderDropDownItemClick = "headerDropDownItemClick"
}
/**
* 그리드에서 발생하는 이벤트 기본 유형입니다.
*/
export interface EventBase {
pid: string;
type: EventKind;
}
/**
* 데이터 그리드 렌더링이 완료되고 사용자에 의해 접근 가능해진 경우 발생하는 이벤트입니다.
* 이 이벤트는 데이터가 변경되었을 때 다시 발생됩니다.
*/
export interface ReadyEvent extends EventBase {
}
/**
* 엑스트라 체크박스 열(Column)에 있는 행(Row) 체크박스를 클릭했을 때 발생합니다
*/
export interface RowCheckClickEvent extends EventBase {
checked: boolean;
rowIndex: number;
item: any;
shiftKey: boolean;
shiftIndex?: number;
orgEvent: any;
}
/**
* 엑스트라 체크박스 열(Column)에 있는 전체 선택 체크박스 클릭 시 발생합니다.
*/
export interface RowAllChkClickEvent extends EventBase {
checked: boolean;
orgEvent: any;
}
/**
* 단일 셀 클릭 시 발생하는 이벤트입니다.
*/
export interface CellClickEvent extends EventBase {
rowIndex: boolean;
columnIndex: number;
dataField: string;
editable: boolean;
value: any;
rowIdValue: any;
headerText: string;
item: any;
treeIcon?: boolean;
orgEvent: any;
}
/**
* 단일 셀 더블클릭 시 발생하는 이벤트입니다.
*/
export interface CellDoubleClickEvent extends EventBase {
rowIndex: boolean;
columnIndex: number;
dataField: string;
editable: boolean;
value: any;
rowIdValue: any;
headerText: string;
item: any;
treeIcon?: boolean;
orgEvent: any;
}
/**
* 편집, 수정 모드에서 셀 편집(수정) 시작 시 발생하는 이벤트입니다.
* false 를 반환하면 편집, 수정을 못하도록 막습니다.
*/
export interface CellEditBeginEvent extends EventBase {
rowIndex: number;
columnIndex: number;
value: any;
headerText: string;
item: any;
dataField: string;
position: any;
size: any;
isClipboard: boolean;
which: string | number;
}
/**
* 편집, 수정 모드에서 셀 편집(수정) 종료 시 발생하는 이벤트입니다.
*/
export interface CellEditEndEvent extends EventBase {
rowIndex: number;
columnIndex: number;
oldValue: any;
value: any;
headerText: string;
item: any;
dataField: string;
isClipboard: boolean;
which: string | number;
mergeStartIndex: number;
mergeEndIndex: number;
}
/**
* 편집, 수정 모드에서 셀 편집(수정) 종료 바로 직전에 발생하는 이벤트입니다.
* 이 이벤트 핸들러의 반환값이 곧 최종 수정값으로 적용됩니다.
* 즉, 개발자가 사용자에 의해 입력된 값을 최종적으로 판단할 수 있는 이벤트입니다. 이 이벤트 핸들러에서 값을 체크하십시오.
* 이 핸들러의 반환값은 반드시 지정해야 합니다. 이 반환값이 곧 최종 수정값입니다.
*/
export interface CellEditEndBeforeEvent extends EventBase {
rowIndex: number;
columnIndex: number;
oldValue: any;
value: any;
headerText: string;
item: any;
dataField: string;
isClipboard: boolean;
which: string | number;
}
/**
* 편집, 수정 모드에서 셀 편집(수정) 취소 시 발생하는 이벤트입니다.
*/
export interface CellEditCancelEvent extends EventBase {
rowIndex: number;
columnIndex: number;
value: any;
headerText: string;
item: any;
dataField: string;
isClipboard: boolean;
which: string | number;
}
/**
* 그리드 헤더 클릭 시 발생하는 이벤트입니다.
* false 를 반환하면 기본 행위인 정렬을 실행하지 않습니다.
*/
export interface HeaderClickEvent extends EventBase {
columnIndex: number;
headerText: string;
depth: number;
item: any;
dataField: string;
pageX: number;
pageY: number;
orgEvent: any;
}
/**
* 트리 그리드 일 때 브랜치(branch) 아이템의 열기/닫기을 클릭하여 열기/닫기 상태 변경 시 발생하는 이벤트입니다.
* 이 이벤트는 사용자에 의해 열기/닫기 아이콘을 클릭 한 경우만 발생합니다.
*/
export interface TreeOpenChangeEvent extends EventBase {
isOpen: boolean;
rowIndex: number;
depth: number;
item: any;
}
/**
* selectionMode 가 "none" 이 아닌 경우 셀 또는 행 선택이 변경되었을 때 발생하는 이벤트입니다.
*/
export interface SelectionChangeEvent extends EventBase {
primeCell: {
rowIndex: number;
columnIndex: string;
dataField: string;
headerText: string;
editable: boolean;
value: any;
rowIdValue: any;
item: any;
};
selectedItems: any[];
}
/**
* updateRow 메소드를 통해 사용자가 행(Row)을 수정한 경우 발생하는 이벤트입니다.
*/
export interface UpdateRowEvent extends EventBase {
rowIndex: number;
columnIndexes: number[];
values: any[];
headerTexts: string[];
item: any;
dataFields: string[];
}
/**
* updateRows, updateRowsById 메소드를 통해 사용자가 행(Row)을 수정한 경우 발생하는 이벤트입니다.
*/
export interface UpdateRowsEvent extends EventBase {
items: any[];
}
/**
* 사용자가 Insert 키, Ctrl+Insert 키 또는 addRow(), addTreeRow() 를 통해 행(Row)을 추가(삽입)한 경우 발생하는 이벤트입니다.
*/
export interface AddRowEvent extends EventBase {
items: any[];
}
/**
* 사용자가 Insert 키, Ctrl+Insert 키 또는 addRow(), addTreeRow() 를 통해 행(Row)을 추가(삽입)한 경우 발생하는 이벤트입니다.
* addRowFinish 이벤트와 addRow 이벤트의 차이는 다음과 같습니다.
* addRow : 행 추가 시 그리드가 추가한 행을 선택(selection) 하는데 이 때 selectionChange 이벤트가 발생합니다. addRow 이벤트는 selectionChange 이벤트 이전에 발생합니다.
* addRowFinish : 행 추가 시 그리드가 추가한 행을 선택(selection) 하는데 이 때 selectionChange 이벤트가 발생합니다. addRowFinish 이벤트는 selectionChange 이벤트 이후 발생합니다.
*/
export interface AddRowFinishEvent extends EventBase {
items: any[];
}
/**
* 사용자가 Ctrl + Del 키 또는 removeRow() 또는 removeRowByRowId() 메소드를 통해 행(Row)을 삭제한 경우 발생하는 이벤트입니다.
*/
export interface RemoveRowEvent extends EventBase {
softRemoveRowMode: boolean;
items: any[];
}
/**
* 사용자가 Ctrl + Del 키 또는 removeRow() 또는 removeRow() 또는 removeRowByRowId() 메소드를 통해 행(Row)을 삭제할 때 삭제 전에 발생하는 이벤트입니다.
* false 를 반환하면 삭제 처리를 하지 않습니다. 따라서 실제 삭제 전 확인 단계를 거칠 수 있습니다.
*/
export interface BeforeRemoveRowEvent extends EventBase {
softRemoveRowMode: boolean;
items: any[];
}
/**
* softRemoveRowMode = true 를 사용할 때 사용자가 행(Row)을 삭제 한 경우, 삭제된 행은 마크가 생기게 됩니다.
* 이를 그리드에서 실제로 삭제하는 메소드인 removeSoftRows()를 호출 한 경우 발생하는 이벤트입니다.
* 이 이벤트는 softRemoveRowMode 를 false 로 설정한 경우 발생하지 않습니다.
**/
export interface RemoveSoftRowsEvent extends EventBase {
items: any[];
}
/**
* softRemoveRowMode = true 를 사용할 때 사용자가 행(Row)을 삭제 한 경우, 삭제된 행(Row)은 마크가 생기게 됩니다.
* 이를 그리드에서 실제로 삭제하는 메소드인 AUIGrid.removeSoftRows()를 호출 한 경우 실제 삭제 전에 발생하는 이벤트입니다.
* 이 이벤트는 softRemoveRowMode 를 false 로 설정한 경우 발생하지 않습니다.
* false 를 반환하면 삭제 처리를 하지 않습니다. 따라서 실제 삭제 전 확인 단계를 거칠 수 있습니다.
*/
export interface BeforeRemoveSoftRowsEvent extends EventBase {
items: any[];
}
/**
* 그리드의 수직 스크롤(세로 스크롤)이 있는 경우, 수직 스크롤의 값이 변경되었을 때 발생하는 이벤트입니다.
* 사용자가 마우스 휠이나 다른 특정 행위로 수직 스크롤이 변경되면 발생합니다.
* 주의 : 이 이벤트 핸들러에서 무리한 작업을 하면 그리드 스크롤링 시 성능이 저하됩니다.
*/
export interface VScrollChangeEvent extends EventBase {
position: number;
oldPosition: number;
minPosition: number;
maxPosition: number;
}
/**
* 그리드의 수평 스크롤(가로 스크롤)이 있는 경우, 수평 스크롤의 값이 변경되었을 때 발생하는 이벤트입니다.
* 주의 : 이 이벤트 핸들러에서 무리한 작업을 하면 그리드 스크롤링 시 성능이 저하됩니다.
*/
export interface HScrollChangeEvent extends EventBase {
position: number;
oldPosition: number;
minPosition: number;
maxPosition: number;
}
/**
* 사용자가 그룹핑(Grouping)을 설정하거나 변경, 해제 시 발생하는 이벤트입니다.
*/
export interface GroupingEvent extends EventBase {
groupingFields: string[];
groupingSummary: any;
}
/**
* 사용자가 정렬(Sorting)을 설정하거나 변경, 해제 시 발생하는 이벤트입니다.
*
*/
export interface SortingEvent extends EventBase {
sortingFields: {
columnIndex: number;
dataField: string;
dataType: string;
nullsLast: boolean;
sortType: number;
}[];
}
/**
* 사용자가 필터링(Filtering)을 설정하거나 변경, 해제 시 발생하는 이벤트입니다.
*/
export interface FilteringEvent extends EventBase {
filterCache: {
[key: string]: any[];
};
}
/**
* 사용자가 그리드의 특정 문자열을 검색(search) 하였을 때 문자열을 찾지 못할 경우 발생하는 이벤트입니다.
*/
export interface NotFoundEvent extends EventBase {
term: string;
wrapFound: boolean;
}
/**
* 그리드에서 마우스 오른쪽 버턴 즉, 컨텍스트 메뉴를 활성화 했을 경우 발생하는 이벤트입니다.
* false 를 반환하면 기본 행위인 기본 컨텍스트를 출력시키지 않습니다. 바디(body) 에서 발생했을 경우 사용자 정의 컨텍스트 메뉴를 Array 로 구성하여 반환하면 동적 컨텍스트 메뉴를 구성합니다.
*/
export interface ContextMenuEvent extends EventBase {
target: string;
dataField: string;
headerText: string;
columnIndex: number;
rowIndex: number;
depth: number;
item: any;
pageX: number;
pageY: number;
}
/**
* 편집 가능(editable=true)인 경우 Insert 또는 Ctrl+Insert 등의 키 입력 시 새 행(Row)이 삽입됩니다.
* 이 때 새 행의 초기값을 결정 짓도록 삽입 전에 발생하는 이벤트입니다.
* 새 행(Row) 아이템의 초기값을 담는 Object 를 반환하면 적용시킵니다. 만약 반환하지 않으면 빈 행이 출력됩니다.
* 주의 : addRow(), addTreeRow() 로 행(Row)을 추가할 때는 발생하지 않습니다. 즉, 사용자의 키보드 인터페이스 (Insert, Ctrl + Insert) 에 의해서만 발생합니다.
*/
export interface BeforeInsertRowEvent extends EventBase {
columnInfoList: any[];
isClipboard: boolean;
}
/**
* 그리드에서 키보드를 누른 경우 발생하는 키다운(keyDown) 이벤트입니다.
* 그리드에서 특정 키는 미리 지정된 행위를 합니다.(예: 화살표 키-선택 이동, Insert 키-행(Row) 삽입 등)
* 만약 false 를 반환하면 그리드에 미리 지정된 행위를 하지 않습니다.
* 참고 : 그리드에 기본 단축키를 변경하거나 새로운 단축키를 추가할 수 있는 이벤트입니다.
*/
export interface KeyDownEvent extends EventBase {
keyCode: number;
ctrlKey: boolean;
shiftKey: boolean;
orgEvent: any;
}
/**
* 그리드의 열(Column)을 사용자가 드래깅으로 자리를 바꾸거나 사이즈를 바꾼 경우 발생하는 이벤트입니다.
*/
export interface ColumnStateChangeEvent extends EventBase {
property: string;
dataField: string;
headerText: string;
depth: number;
isBranch: boolean;
old: any;
current: any;
}
/**
* 그리드 푸터 클릭 시 발생하는 이벤트입니다.
*/
export interface FooterClickEvent extends EventBase {
footerIndex: number;
footerText: string;
footerValue: any;
pageX: number;
pageY: number;
orgEvent: any;
}
/**
* 그리드 푸터 더블 클릭 시 발생하는 이벤트입니다.
*/
export interface FooterDoubleClickEvent extends EventBase {
footerIndex: number;
footerText: string;
footerValue: any;
pageX: number;
pageY: number;
orgEvent: any;
}
/**
* 엑스트라 행(Row) 상태 열(Column)을 설정한 경우(showStateColumn=true) 해당 셀을 클릭 시 발생하는 이벤트입니다.
* 만약 수정 가능한 그리드(editable=true) 이고, 복구 가능 설정(enableRestore=true) 인 경우, 상태 아이콘을 클릭하면 해당 행(Row)이 이전 상태로 복구됩니다.
* false 를 반환하면 복구 행위를 하지 않습니다.
*/
export interface RowStateCellClickEvent extends EventBase {
item: any;
rowIndex: number;
orgEvent: any;
marker: 'added-edited' | 'edited' | 'normal' | 'removed';
}
/**
* 수정 편집 가능한 그리드에서 실행 취소(Undo), 다시 실행(Redo) 또는 커맨드 스택의 변화가 생긴 경우 발생하는 이벤트입니다.
*/
export interface UndoRedoChangeEvent extends EventBase {
action: 'clear' | 'redo' | 'undo';
stackIndex: number;
stackSize: number;
redoable: boolean;
undoable: boolean;
}
/**
* 편집 가능 그리드에서 붙여넣기(Ctrl + V) 를 할 때 붙여넣기가 시작되는 경우 발생하는 이벤트입니다.
* 그리드에 의존하지 않고 사용자가 직접 파싱하여 적용 시킬 수 있습니다.
* 만약 false 를 반환하면 기본 행위인 붙여 넣기를 하지 않습니다. 또한 Array 을 반환하면 그 반환값을 그리드에 붙여 넣기 적용시킵니다.
*/
export interface PasteBeginEvent extends EventBase {
clipboardData: string;
}
/**
* 그리드에서 복사(Ctrl + C) 를 할 때 복사가 시작되는 경우 발생하는 이벤트입니다.
* 그리드에 의존하지 않고 사용자가 직접 파싱하여 적용 시킬 수 있습니다.
* TSV 데이터로 행구분은 캐리지리턴(\r\n)으로 구성된 스트링을 반환하면 해당 값을 클립보드에 적용시킵니다.
*/
export interface CopyBeginEvent extends EventBase {
data: string;
}
/**
* 편집 가능 그리드에서 붙여넣기(Ctrl + V) 를 할 때 붙여넣기가 완료된 경우 발생하는 이벤트입니다.
*/
export interface PasteEndEvent extends EventBase {
clipboardData: any;
}
/**
* 그리드에서 복사(Ctrl + C) 를 할 때 값이 시스템 클립보드에 복사 완료된 경우 이벤트입니다.
*/
export interface CopyEndEvent extends EventBase {
data: string;
}
/**
* 엑스트라 행(Row) 번호 열(Column)을 클릭 했을 때 발생하는 이벤트입니다.
* 만약 false 를 반환하면 기본 행위인 행(또는 셀) 선택을 하지 않습니다.
*/
export interface RowNumCellClickEvent extends EventBase {
rowNum: string | number;
rowIndex: number;
orgEvent: any;
}
/**
* 페이징을 사용하는 경우(usePaging=true) 페이징이 변경될 때 발생하는 이벤트입니다.
*/
export interface PageChangeEvent extends EventBase {
currentPage: number;
oldPage: number;
totalPageCount: number;
}
/**
* 트리 lazyLoading 모드를 사용하는 경우(treeLazyMode=true) 특정 트리 행(Row)의 열기/닫기 아이콘을 눌렀을 때 발생하는 이벤트입니다.
*/
export interface TreeLazyRequestEvent extends EventBase {
rowIndex: number;
depth: number;
item: number;
response: any;
}
/**
* addColumn() 을 통해 열(column) 을 추가한 경우 발생하는 이벤트입니다.
*/
export interface AddColumnEvent extends EventBase {
columnIndex: number;
dataFields: string[];
}
/**
* addTreeColumn() 을 통해 특정 열(column)의 자식으로 열을 추가한 경우 발생하는 이벤트입니다.
*/
export interface AddTreeColumnEvent extends EventBase {
columnIndex: number;
dataFields: string[];
index: number;
parentDataField: string;
}
/**
* removeColumn() 을 통해 열(column) 을 삭제할 때 삭제 전에 발생하는 이벤트입니다.
* false 를 반환하면 삭제 처리를 하지 않습니다. 따라서 실제 삭제 전 확인 단계를 거칠 수 있습니다.
*/
export interface BeforeRemoveColumnEvent extends EventBase {
columnIndexes: number[];
dataFields: string[];
}
/**
* removeColumn() 을 통해 행(Row)을 삭제한 경우 발생하는 이벤트입니다.
*/
export interface RemoveColumnEvent extends EventBase {
dataFields: string[];
}
/**
* 터치 기기(touch devices)에서 단일 셀을 길게 누르고 있을 때 발생하는 이벤트입니다.
*/
export interface CellLongTapEvent extends EventBase {
rowIndex: number;
columnIndex: number;
value: any;
headerText: string;
item: any;
dataField: string;
orgEvent: any;
}
/**
* 행(Row) 드래깅을 시작할 때 발생하는 이벤트입니다.
* 만약 false 를 반환하면 기본 행위인 행(Row) 드래깅을 하지 않습니다. 그리고 String 을 반환하면 해당 String 이 드래깅 텍스트로 출력됩니다.
*/
export interface DragBeginEvent extends EventBase {
rowIndex: number;
items: any[];
}
/**
* 행(Row) 드래깅 이 후 드랍 종료 바로 직전에 발생하는 이벤트입니다.
* 이 이벤트 핸들러에서 드랍의 액션이 "이동(move)" 인지 "복사(copy)" 인지 결정 가능합니다.
* 만약 false 를 반환하면 기본 행위인 행(Row) 드랍을 하지 않습니다.
*/
export interface DropEndBeforeEvent extends EventBase {
pidToDrop: string;
fromRowIndex: number;
toRowIndex: number;
direction: boolean;
dropColumnIndex: number;
items: any[];
isMoveMode: boolean;
isDropAsChild: boolean;
}
/**
* 행(Row) 드래깅 이 후 드랍 종료에 발생하는 이벤트입니다.
*/
export interface DropEndEvent extends EventBase {
pidToDrop: string;
fromRowIndex: number;
toRowIndex: number;
direction: boolean;
dropColumnIndex: number;
items: any[];
isDropAsChild: boolean;
}
/**
* 행(Row) 드래깅 이 후 드랍이 성공하지 않은 경우 즉, 드랍 실패한 경우 발생하는 이벤트입니다.
*/
export interface DropCancelEvent extends EventBase {
pidToDrop: string;
fromRowIndex: number;
toRowIndex: number;
direction: boolean;
items: any[];
}
/**
* 페이징을 사용한 경우 1 페이지에 출력되는 행(Row)의 개수가 변경되었을 때 발생하는 이벤트입니다.
*/
export interface PageRowCountChangeEvent extends EventBase {
rowCount: number;
oldRowCount: number;
totalPageCount: number;
}
/**
* 셀렉션 변경 전에 셀렉션 제한(통제)를 체크 할 때 발생하는 이벤트입니다.
* 이 이벤트는 사용자가 셀 클릭이나 방향키 이동을 통해 셀렉션 변경을 주 목적으로 행한 경우만 발생합니다.
* 즉, 검색(serach)나 셀 수정 등과 같이 주 목적이 따로 있을 때 그 결과로 셀렉션이 변경되는 경우 이벤트는 발생 하지 않습니다.
* false 를 반환하면 사용자의 셀렉션 변경을 막습니다.
*/
export interface SelectionConstraintEvent extends EventBase {
rowIndex: number;
columnIndex: number;
toRowIndex: number;
toColumnIndex: number;
dataField: string;
stopPropagation: boolean;
}
/**
* 버튼렌더러(ButtonRenderer)의 버튼을 클릭했을 때 발생하는 이벤트입니다.
*/
export interface ButtonClickEvent extends EventBase {
rowIndex: number;
columnIndex: number;
dataField: string;
item: any;
text: string;
}
/**
* 아이콘렌더러(IconRenderer)의 아이콘을 클릭했을 때 발생하는 이벤트입니다.
*/
export interface IconClickEvent extends EventBase {
rowIndex: number;
columnIndex: number;
dataField: string;
item: any;
text: string;
}
/**
* 엑스트라 행(Row) 번호 헤더를 클릭 했을 때 발생하는 이벤트입니다.
*/
export interface RowNumHeaderClick extends EventBase {
orgEvent: any;
}
/**
* 버튼 헤더 렌더러(ButtonHeaderRenderer)의 버튼을 클릭했을 때 발생하는 이벤트입니다.
*/
export interface HeaderButtonClickEvent extends EventBase {
columnIndex: number;
dataField: string;
buttonText: string;
depth: number;
isBranch: boolean;
}
/**
* 체크박스 헤더 렌더러(CheckBoxHeaderRenderer)의 체크박스를 클릭했을 때 발생하는 이벤트입니다.
*/
export interface HeaderCheckClickEvent extends EventBase {
columnIndex: number;
dataField: string;
checked: boolean;
depth: number;
isBranch: boolean;
}
/**
* 사용자가 Alt + Shift + 왼쪽 화살표 키 또는 outdentTreeDepth 메소드를 통해 행 깊이(depth) 내리기(Outdent)를 한 경우 발생하는 이벤트입니다.
*/
export interface IndentEvent extends EventBase {
items: any[];
}
/**
* 사용자가 Alt + Shift + 왼쪽 화살표 키 또는 outdentTreeDepth 메소드를 통해 행 깊이(depth) 내리기(Outdent)를 한 경우 발생하는 이벤트입니다.
*/
export interface OutdentEvent extends EventBase {
items: any[];
}
/**
* 드랍다운 헤더 렌더러(DropDownHeaderRenderer)의 리스트 아이템을 클릭했을 때 발생하는 이벤트입니다.
*/
export interface HeaderDropDownItemClickEvent extends EventBase {
columnIndex: number;
dataField: string;
depth: number;
isBranch: boolean;
key: string;
value: any;
}