/** * 그리드에서 정의 가능한 속성입니다. */ 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; }