rMateGridH5 6.0

Class: PivotDataGrid

PivotDataGrid

new PivotDataGrid()

PivotDataGrid는 피봇 쿼리 결과를 표현하기 위해 DataGrid를 확장한 클래스입니다.

DataGrid와 마찬가지로 행과 열로 구성되는 2차원 데이타를 표현하도록 되어 지며, 그리드의 컬럼은 질의의 내용에 따라
자동생성되므로 컬럼을 설정하지 않습니다.

DataGrid와는 다음과 같은 차이점이 있습니다:
- 컬럼의 순서를 바꾸는 것은 지원되지 않습니다.
- OLAPCube에 의한 질의 결과를 보여주기 위한 기능이므로 셀에 대한 편집 기능은 지원되지 않습니다.
- 컬럼의 정렬기능 지원되지 않습니다.
- 계층형으로 표현하는 기능은 지원되지 않습니다.
- 웹접근성은 지원되지 않습니다.

Since:
  • 4.0
See:
Example

레이아웃은 다음과 같은 형식으로 작성됩니다.

<rMateGrid>
     <NumberFormatter id="numfmt" useThousandsSeparator="true"/>
     <PivotDataGrid id="pdg1" cellFormatter="{numfmt}" defaultCellString="" cellTextAlign="center" horizontalScrollPolicy="auto" verticalAlign="middle">
     </PivotDataGrid>
 </rMateGrid>

Members

alphanumber

투명도(alpha)

유효값 : 0~1 사이의 실수

Default Value:
  • 1
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getAlpha(), setAlpha(value)

autoFitColumnsboolean

컬럼 헤더의 세로줄 더블클릭시 셀들의 크기를 조사하여 컬럼의 넓이를 자동 조정하는 기능의 사용 여부.

이 기능은 그리드나 컬럼의 resizable 속성이 true일 경우에만 작동하며 컬럼이 DataGridColumn이면서 렌더러가 ImageItem, ComboBoxItem, DataProviderItem 가 아닐 경우에만 적용됩니다.

셀들의 크기 조사는 최대 500건에 대해서만 수행합니다.

Default Value:
  • true

autoHeightboolean

그리드의 높이를 행들의 높이에 따라 자동으로 조정합니다.

true로 설정할 경우 데이터의 양에 따라 그리드의 높이를 계산한 후 minHeight, maxHeight, minHeightRowCount, maxHeightRowCount값에 따라 그리드의 높이 조정하게 됩니다.

이 속성에 의한 높이 조정은 GridApp.setData()에 의해 데이터가 변경될 때에만 적용됩니다.

별도로 높이를 조정하려면 GridRoot.calculateAutoHeight()를 사용하시기 바랍니다.

Default Value:
  • false

cellFormatterFormatter

계산 결과값을 표시하는 cell에 적용할 포맷터.

contextMenuobject

그리드에 표시할 컨텍스트 메뉴.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getContextMenu(), setContextMenu(value)
  • contextMenuDown

copyEnabledboolean

Ctrl-C나 context menu에 의해 복사 기능의 사용 여부.

(복사되는 내용은 셀의 값이며 속성은 복사되지 않습니다)

Default Value:
  • true
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getCopyEnabled(), setCopyEnabled(value)

copyValueJsFunctionfunction

사용자가 Ctrl-C나 복사선택을 통해 복사를 할 때 불려져 복사할 자료를 자바스크립트 함수에서 변경할 수 있습니다.

개별 셀에 대해 불려지므로 여러 번 불려지며, 반환 값으로 클립 보드에 넣어질 문자열이 변경됩니다.

Example

copyValueJsFunction 함수의 파라메터는 다음과 같습니다.

function copyValueJsFunction(str, value, item, column)
  - str : 계산된 실제 클립보드에 넣어질 문자열
  - value : 복사할 셀의 실제 값
  - item : 복사 행의 원본 data 객체 (셀이 컬럼헤더일 경우 컬럼)
  - column : 복사할 컬럼

copyWithAllColumnsboolean

selectionMode가 singleRow나 multipleRows 일 때 복사시에 안보이는 컬럼의 데이터도 포함시킬지 여부

Default Value:
  • false

copyWithHeaderboolean

복사시에 선택한 셀의 헤더를 같이 넣어줄지 여부

Default Value:
  • false

dataProviderobject

그리드에 표시할 데이터.

OLAPCube에 의해 계산된 결과가 자동 저장되므로 별도로 지정할 필요가 없습니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getDataProvider(), setDataProvider(value)

dataTipJsFunctionfunction

셀에서 표시할 데이터팁 라벨의 콜백함수.

이는 데이터팁 내용을 자바스크립트로 조작할 수 있게 합니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getDataTipFunction(), setDataTipFunction(value)
Example

dataTipJsFunction 함수의 파라메터는 다음과 같습니다.

function dataTipJsFunction(item)
  - item : 해당 행의 data 객체

defaultCellStringstring

계산 결과를 표시할 때 값이 null 이거나 NaN일 경우 표시할 문자열.

Default Value:
  • "NaN"

defaultColumnWidthnumber

생성되는 컬럼의 기본 넓이.

설정하지 않을 경우 컬럼의 기본 크기인 100으로 설정됩니다.

Since:
  • 5.0
Default Value:
  • undefined

readonlydisplayableColumnsArray

그리드에 표시되는 DataGridColumn 객체의 배열.

컬럼중 숨겨진(visible이 false인 컬럼) 컬럼이 있으면 이벤트에 의해 전달된 columnIndex는 화면에 표시된 컬럼들을 기준으로 하므로 이 배열을 사용하여 컬럼 정보를 가져오도록 합니다.

See:
  • 자바스크립트에서 사용할 때는 getter함수를 사용합니다. - getDisplayableColumns()

doubleClickEnabledboolean

더블클릭 가능 여부

true의 경우 더블클릭하면 해당 셀이 수정가능하면 수정모드로 들어가게 됩니다.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getDoubleClickEnabled(), setDoubleClickEnabled(value)

dragSelectableboolean

마우스를 드래그하여 선택 영역을 지정하는 기능의 사용 여부.

이 속성은 selectionMode가 multipleCells이나 multipleRows 일 경우에만 작동합니다.

Default Value:
  • false

enabledboolean

사용자 조작에 대한 반응 여부.

Default Value:
  • true
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getEnabled(), setEnabled(value)

exportCodePagenumber

exportType이 cvs일 경우 엑셀에서는 utf-8이 아닌 로컬 문자셋으로 변환이 필요하여 변환할 문자셋의 codepage를 지정합니다.

기본값은 949이며 이는 euc-kr과 동일합니다.

언어별 codepage는 아래 문서를 참조 바랍니다.

https://msdn.microsoft.com/en-us/library/windows/desktop/dd317756(v=vs.85).aspx

Default Value:
  • 949

exportColumnFormatboolean

컬럼별 기본 셀 서식 지정 여부.

true로 설정할 경우 컬럼의 기본 셀 서식이 지정되어 엑셀 파일에 행을 추가해도 서식이 적용되게 됩니다.

Default Value:
  • false

exportColumnsArray

Export할 컬럼들의 배열

columns이나 groupedColumns에 설정한 모든 컬럼이 아닌, Excel export할 컬럼만을 지정할 경우에 사용합니다.

배열의 내용은 columns상의 숫자로 가령 [0,1,3]로 설정한 경우, columns에서 첫번째, 두번째, 네번째 컬럼을 export하게 됩니다.

이 속성으로 컬럼을 지정하게 되면 해당 컬럼의 visible 속성이 false여도 엑셀 파일에서는 숨기기처리되지 않습니다.

exportFileNamestring

Export할 excel파일명

이 문자열에는 다음 문자가 포함되면 안됩니다

/ \ : * ? “ < > | %
Default Value:
  • "export.xlsx"

exportFooterstring

Excel export시 내용에 덧붙일 꼬릿말

exportFooterHeightnumber

Excel export시 내용에 덧붙일 꼬릿말의 높이

Default Value:
  • 20

exportOnlyDataboolean

Excel export시 데이터만 export할지 여부

Default Value:
  • false

exportSheetNamestring

Export할 excel파일 내의 sheet명

Default Value:
  • "Sheet1"

exportTitlestring

Excel export시 내용에 덧붙일 제목

exportTitleHeightnumber

Excel export시 내용에 덧붙일 제목행의 높이

Default Value:
  • 50

exportTxtSeperatorstring

exportType이 cvs나 tsv일 경우 사용될 필드 구분자

Default Value:
  • ","

exportTypestring

Excel Export할 Excel 파일 형식

“xlsx”와 “xls”, "csv", "tsv" 가 가능하며 그에 따라 exportFileName 을 설정하시기 바랍니다.

Default Value:
  • "xlsx"

headerHeightnumber

그리드 헤더 높이.

설정할 경우 해당 높이에서 headerPaddingTop, headerPaddingBottom을 뺀 값이 글씨 크기로 나타나게 됩니다.

설정하지 않을 경우 헤더의 높이는 헤더 셀들의 글씨크기와 headerPaddingTop, headerPaddingBottom에 의해 자동 계산되어 적용되며, 그룹컬럼을 사용할 경우 한 줄의 높이로 설정됩니다.

pixel단위로 적용됩니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getHeaderHeight(), setHeaderHeight(value)

headerRendererProvidersArray

그리드내의 열의 헤더를 표시하는데 사용될 렌더러를 지정하는 PivotDataGridHeaderRendererProvider 인스턴스의 배열입니다.

이 기능을 이용하여 열의 헤더의 위치에 따라 다른 렌더러를 지정할 수 있게 됩니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getHeaderRendererProviders(), setHeaderRendererProviders(value)
  • PivotDataGridHeaderRendererProvider

headerWordWrapboolean

헤더에서 텍스트의 길이가 길어 한 줄에 표시하지 못할 경우 다음 줄에 출력시킬지 여부.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getHeaderWordWrap(), setHeaderWordWrap(value)

heightnumber

개체의 높이.

pixel단위로 적용됩니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getHeight(), setHeight(value)

hiddenColumnsArray

숨길 컬럼들의 배열.

자동으로 생성되는 컬럼들 중 visible false 처리하여 안 보이게 할 컬럼을 설정할 경우에 사용합니다.

배열의 내용은 columns상의 숫자로 가령 [0,1,3]로 설정한 경우, columns에서 첫번째, 두번째, 네번째 컬럼을 안보이게 처리합니다.
Since:
  • 5.0
Default Value:
  • undefined

horizontalScrollPolicystring

가로 스크롤바 표시 방식.

"off"일 경우에는 가로 스크롤바가 표시되지 않으며, "on"일 경우에는 무조건 표시되며, "auto"일 경우에는 컬럼들의 넓이와 그리드의 넓이에 따라 자동으로 표시되도록 합니다.


DataGrid의 가로 스크롤은 픽셀이 아닌 엑셀과 같이 컬럼단위로 이루어 지며, 스크롤시 마지막 컬럼이 보이지는 화면에서 보여지는 컬럼들의 넓이와 그리드의 넓이가 맞지 않는 경우가 발생하게 됩니다.
이 때에는 lastColumnWidthPolicy에 따라 차이가 나는 크기를 보여지는 컬럼에 분배하거나(balance) 마지막 컬럼의 크기를 넓히거나(expand) 공백처리하는 방식(cut)이 가능합니다.


유효값 : “off”,”on”,”auto”

Default Value:
  • "off"
See:

horizontalScrollPositionnumber

현재 가장 왼쪽 컬럼의 index 번호.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getHorizontalScrollPosition(), setHorizontalScrollPosition(value)

itemRendererProvidersArray

그리드내의 셀을 표시하는데 사용될 렌더러를 지정하는 PivotDataGridItemRendererProvider 인스턴스의 배열입니다.

이 기능을 이용하여 셀의 위치에 따라 다른 렌더러를 지정할 수 있게 됩니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getItemRendererProviders(), setItemRendererProviders(value)
  • PivotDataGridItemRendererProvider

lastColumnWidthPolicystring

스크롤시 마지막 컬럼에 대한 표시 방식.

컬럼단위로 좌우 스크롤 이동시 맨 마지막 컬럼이 표시되는 경우, 열의 넓이에 따라 마지막 컬럼을 확장하여 표시하거나, 정해진 크기만 표시하고 나머지를 비우거나, 다른 컬럼의 크기를 균등하게 조정하여 맞추는 방법을 선택할 수 있습니다.


선택가능한 옵션은 다음과 같습니다.

  • balance : 남는 크기를 마지막 컬럼이 표시될 때, 같이 표시되는 크기가 설정되지 않은 다른 컬럼들에 균등하게 나누어 표시합니다.
  • expand : 마지막 컬럼의 크기를 늘려서 표시합니다.
  • cut : 마지막 컬럼의 크기만을 표시하고 나머지는 비워두게 됩니다.
Default Value:
  • "balance"
See:

liveHorizontalScrollingboolean

가로 스크롤 이동시 데이터도 같이 움직여 보여줄지 여부

false일 경우 마우스를 띄어야 해당 컬럼의 데이터가 나타납니다.

이 속성을 사용하려면 liveScrolling 속성을 true로 설정해야 합니다.

Since:
  • 5.0
Default Value:
  • true

liveScrollingboolean

스크롤 이동시 데이터도 같이 움직여 보여줄지 여부

false일 경우 마우스를 띄어야 해당 행 또는 컬럼의 데이터가 나타납니다.

Default Value:
  • true

liveVerticalScrollingboolean

세로 스크롤 이동시 데이터도 같이 움직여 보여줄지 여부

false일 경우 마우스를 띄어야 해당 행의 데이터가 나타납니다.

이 속성을 사용하려면 liveScrolling 속성을 true로 설정해야 합니다.

Since:
  • 5.0
Default Value:
  • true

lockedColumnCountnumber

열고정 설정 값.

설정하지 않을 경우 기본으로 생성되는 행의 컬럼 수만큼 설정되며, 그 이하의 값을 설정할 경우에만 적용됩니다.

Since:
  • 5.0
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getLockedColumnCount(), setLockedColumnCount(value)

lockedRowCountnumber

행고정 설정 값.

0인 경우 행고정을 해제합니다.

Default Value:
  • 0
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getLockedRowCount(), setLockedRowCount(value)

maxHeightnumber

최대 높이.

autoHeight가 true일 경우 자동 높이 조정시에 설정된 최대 높이 이하로 설정하게 됩니다. (maxHeightRowCount가 설정될 경우 이 값은 무시됩니다)

pixel단위로 적용됩니다.

Default Value:
  • 1193046
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getMaxHeight(), setMaxHeight(value)

maxHeightRowCountnumber

최대 높이 행의 수

autoHeight가 true일 경우 자동 높이 조정시에 설정된 최대 높이 행의 수에 따라 높이를 계산하여 그 이하로 높이를 설정하게 됩니다.

Default Value:
  • NaN

minColumnWidthnumber

컬럼의 최소 넓이.

사용자가 컬럼을 넓이를 조정할 때 지정된 최소값 이하로는 작아지지 않게 됩니다.

pixel단위로 적용됩니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getMinColumnWidth(), setMinColumnWidth(value)

minHeightnumber

최소 높이.

autoHeight가 true일 경우 자동 높이 조정시에 설정된 최소 높이 이상으로 설정하게 됩니다. (minHeightRowCount가 설정될 경우 이 값은 무시됩니다)

pixel단위로 적용됩니다.

Default Value:
  • 100
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getMinHeight(), setMinHeight(value)

minHeightRowCountnumber

최소 높이 행의 수

autoHeight가 true일 경우 자동 높이 조정시에 설정된 최소 높이 행의 수에 따라 높이를 계산하여 그 이상으로 높이를 설정하게 됩니다.

Default Value:
  • undefined

pivotHeaderLabelJsFunctionfunction

헤더컬럼의 열 축 표시에 쓰일 문자열을 조작할 수 있는 콜백함수.

공백으로 처리하고 싶을 경우 "" 또는 "&#38nbsp;" 를 반환하면 해당 필드가 공백 처리됩니다.

Since:
  • 5.0
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getPivotHeaderLabelFunction(), setPivotHeaderLabelFunction(value)
Example

pivotHeaderLabelJsFunction 함수의 파라메터는 다음과 같습니다.

function pivotHeaderLabelFunction(label, element, column)
 - label : 헤더 컬럼에 표시될 문자열
 - element : 행 레이블을 추출한 OLAPElement 객체
 - column : 헤더 컬럼을 정의한 Column 객체

resizableColumnsboolean

컬럼의 넓이 변경 가능 여부.

개별 컬럼에 대해 넓이 변경 가능 여부를 설정하려면 컬럼의 resizable속성을 참조 바랍니다.

Default Value:
  • true
See:

rowAxisColumnWidthnumber

생성되는 행 컬럼의 기본 넓이.

Since:
  • 5.0
Default Value:
  • undefined

rowHeightnumber

행의 높이.

설정할 경우 해당 높이에서 paddingTop, paddingBottom를 뺀 값이 글씨 크기로 나타나게 되며,
설정하지 않을 경우에는 셀들의 글씨크기와 paddingTop, paddingBottom에 의해 자동 계산되어 적용됩니다.

variableRowHeight가 true로 설정될 경우 설정된 값은 무시됩니다.

pixel단위로 적용됩니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getRowHeight(), setRowHeight(value)

scrollTipJsFunctionfunction

showScrollTips 속성이 true일 경우 스크롤바에 표시되는 툴팁에 표시될 내용을 사용자 정의 함수를 통해 조작할 수 있습니다.

사용자가 스크롤시 불려지며 스크롤되는 행 또는 열에 대한 정보를 문자열로 반환하면 툴팁에 표시하게 되고, 빈 문자열을 반환하면 툴팁은 표시되지 않습니다.

Since:
  • 5.0
See:
  • 자바스크립트에서 사용할 때는 scrollTipFunction에 넣어주도록 합니다.
  • showScrollTips
Example

scrollTipJsFunction 함수의 파라메터는 다음과 같습니다.

function scrollTipJsFunction(direction, position)
  - direction : 스크롤 방향 - 좌우 스크롤일 경우 "horizontal", 상하 스크롤일 경우 "vertical" 이 전달됩니다.
  - position : 스크롤 위치

selectedCellsArray

선택된 셀, 행의 위치정보를 가지고 있는 배열입니다.

Ex ) selectedCells = [ { rowIndex : r1, columnIndex : c1 },{ rowIndex : r2, columnIndex : c2 }, ... ]

즉 selectedCells의 속성의 값 : [{rowIndex:선택된 행의 위치 값, columnIndex: 선택된 컬럼의 위치 값}]

만일 현재의 selectionMode가 row관련이면 columnIndex에는 -1이 저장됩니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getSelectedCells(), setSelectedCells(value)

selectedIndexnumber

선택된 행의 index 값.

기본 값은 -1이며, 아무런 선택이 없을 경우 -1 이 지정됩니다.

값을 설정할 경우 해당 행이 선택 표시됩니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getSelectedIndex(), setSelectedIndex(value)

selectedIndicesArray

선택된 행들의 index 배열.

기본 값은 [ ]이며, 아무런 선택이 없을 경우 [ ]이 지정됩니다.

값을 설정할 경우 해당 행들이 선택 표시됩니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getSelectedIndices(), setSelectedIndices(value)

selectedItemobject

선택된 행의 데이터.

그리드 데이터의 형식이 배열일 때 선택된 데이터를 다른 그리드의 데이터로 활용할 경우에는, 내부 관리변수(rm_internal_uid)때문에 오류가 발생할 수 있으므로 GridRoot.clone() 함수를 사용하여 복사하여 사용하시기 바랍니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getSelectedItem(), setSelectedItem(value)

selectedItemsArray

선택된 행들의 데이터의 배열.

행의 선택 역순으로 배열에 들어갑니다.

그리드 데이터의 형식이 배열일 때 선택된 데이터를 다른 그리드의 데이터로 활용할 경우에는, 내부 관리변수(rm_internal_uid)때문에 오류가 발생할 수 있으므로 GridRoot.clone() 함수를 사용하여 복사하여 사용하시기 바랍니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getSelectedItems(), setSelectedItems(value)

selectionModestring

선택모드.

다중선택일 경우 Ctrl 또는 Shift키와 마우스를 이용하여 여러 개를 선택할 수 있습니다.

유효값 : "singleCell", "singleRow", "multipleCells", "multipleRows" ,"none"

Default Value:
  • "singleRow"
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getSelectionMode(), setSelectionMode(value)

showDataTipsboolean

셀에 롤 오버시 데이터팁을 표시할지 여부

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getShowDataTips(), setShowDataTips(value)

showHorizontalScrollTipsboolean

가로 스크롤 바 중간에 스크롤 툴팁을 표시할지 여부.

Since:
  • 5.0
Default Value:
  • false

showScrollTipsboolean

가로, 세로 스크롤 바 중간에 스크롤 툴팁을 표시할지 여부.

Default Value:
  • false

showVerticalScrollTipsboolean

세로 스크롤 바 중간에 스크롤 툴팁을 표시할지 여부.

Since:
  • 5.0
Default Value:
  • false

styleJsFunctionfunction

셀의 스타일(서식)을 사용자 정의 할 수 있는 콜백함수.

null을 반환하면 스타일은 변경되지 않으며, 스타일을 정의한 객체를 반환하면 스타일이 변경됩니다.

(단. backgroundColor 등 배경에 대한 서식은 SpanCellAttribute기능을 사용해야 하며, 적용된 스타일은 엑셀 내보내기에서는 적용되지 않습니다.)

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getStyleFunction(), setStyleFunction(value)
Example

styleJsFunction 함수의 파라메터는 다음과 같습니다.

function styleJsFunction(row, column, value)
  - row : 해당 셀에 대한 행의 OLAPAxisPosition 객체
  - column : 해당 셀에 대한 열의 OLAPAxisPosition 객체
  - value : 셀의 값

styleNamestring

적용할 스타일 이름.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getStyleName(), setStyleName(value)

variableRowHeightboolean

각각의 행이 다른 높이를 가질 수 있을지 여부.

ture로 설정할 경우 모든 셀에 대한 높이 측정이 필요하게 되어 계산량이 많아져 성능저하의 원인이 될 수 있으니 유의 하시기 바랍습니다.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getVariableRowHeight(), setVariableRowHeight(value)

verticalScrollPolicystring

세로 스크롤바 표시 방식.

auto 인 경우 내용물이 현재 높이보다 클 경우 스크롤바가 자동 생성됩니다.

유효값 : "auto", "on", "off"

Default Value:
  • "auto"
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getVerticalScrollPolicy(), setVerticalScrollPolicy(value)

verticalScrollPositionnumber

현재의 화면에 나타난 첫번째 행의 index 번호.

값을 설정할 경우 해당 행이 화면의 맨위에 오도록 행을 이동시킵니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getVerticalScrollPosition(), setVerticalScrollPosition(value)

visibilityboolean

화면 객체를 표시(스타일의 visibility)할지 여부.

visible을 false로 할 경우에는 화면에서 영역 자체가 없어지나, visibility를 false로 할 경우에는 표시만 안될 뿐, 영역은 그대로 존재하게 됩니다.

Default Value:
  • true
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getVisibility(), setVisibility(value)

visibleboolean

가시화 여부.

visible을 false로 할 경우에는 화면에서 영역 자체가 없어지나, visibility를 false로 할 경우에는 표시만 안될 뿐, 영역은 그대로 존재하게 됩니다.

Default Value:
  • true
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getVisible(), setVisible(value)

widthnumber

개체의 넓이.

pixel단위로 적용됩니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getWidth(), setWidth(value)

wordWrapboolean

셀의 줄바꿈 여부.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getWordWrap(), setWordWrap(value)

Methods

addEvent(type, listener)

HTML 이벤트에 대해 type에 선언된 이벤트가 발생할 경우 이벤트를 받을 수 있는 listener 함수를 등록합니다.

Name Type Description
type string

이벤트 종류를 표현하는 문자열
listener function

이벤트 발생시 불려질 함수

addEventListener(type, listener)

DataGrid내의 자체 이벤트에 대해 type에 선언된 이벤트가 발생할 경우 이벤트를 받을 수 있는 listener 함수를 등록합니다.

Name Type Description
type string

이벤트 종류를 표현하는 문자열
listener function

이벤트 발생시 불려질 함수

autoFit(column)

컬럼의 넓이를 자동 계산하여 조정합니다.

적용될 컬럼은 DataGridColumn만 가능하며, 컬럼에 적용된 렌더러가 ImageItem ComboBoxItem DataProviderItem일 경우나 resizable이 false면 적용되지 않습니다.

Name Type Description
column DataGridColumn

적용할 컬럼

blur()

컴포넌트의 focus를 제거합니다

clearStyle(styleProp)

컴포넌트에 등록되어 있는 스타일을 지웁니다.

Name Type Description
styleProp string

스타일 속성명

foucs()

컴포넌트의 focus를 표시합니다

getSizeStyle(styleProp){Number}

컴포넌트에 등록되어 있는 스타일을 숫자로 변환하여 반환합니다.

paddingTop, paddingBottom등과 같이 "px"등의 단위가 붙는 경우, "px"를 제거하고 숫자로 변환되는 스타일을 가져올 경우에 사용합니다.

Name Type Description
styleProp string

스타일 속성명
Returns:
Type Description
Number 스타일에 등록되어 있는 값, 없을시 null

getStyle(styleProp){*}

컴포넌트에 등록되어 있는 스타일을 반환합니다.

Name Type Description
styleProp string

스타일 속성명
Returns:
Type Description
* 스타일에 등록되어 있는 값, 없을시 null

invalidateList()

그리드내의 모든 행을 refresh합니다.

removeEvent(type, listener)

HTML 이벤트에 대해 type에 선언된 이벤트에 연결된 listener 함수를 제거합니다.

Name Type Description
type string

이벤트 종류를 표현하는 문자열
listener function

이벤트 발생시 불려질 함수

removeEventListener(type, listener)

DataGrid내의 자체 이벤트에 대해 type에 선언된 이벤트에 연결된 listener 함수를 제거합니다.

Name Type Description
type string

이벤트 종류를 표현하는 문자열
listener function

이벤트 발생시 불려질 함수

selectionToClipboard(withHeader)

현재 선택된 내역을 클립보드에 넣어줍니다.

선택된 내용을 TSV(Tab-Separated Values)형식으로 클립보드에 넣어주게 됩니다.

클립보드에 넣어주는 내용은 다음 설명에 따릅니다

  • 기본적으로 데이터의 원형이 넣어지며 포맷이나 스타일은 제외됩니다.
  • 날짜형식일 경우 포맷을 적용한 문자열로 넣어집니다.
  • labelJsFunction이 지정된 컬럼에 대해서는 labelJsFunction이 적용된 값을 넣어줍니다.
  • 병합셀의 경우 한번만 포함되기 때문에 복사시 셀이 빠지는 현상이 일어날 수 있습니다.
Name Type Description
withHeader boolean

복사할 내용에 컬럼 헤더 정보를 포함할 지 여부

setPxStyle(styleProp, newValue)

컴포넌트에 스타일을 숫자+"px" 형식으로 등록합니다.

paddingTop, paddingBottom등과 같이 "px"를 붙여 값을 설정해야 하는 경우 사용합니다.

Name Type Description
styleProp string

스타일 속성명
newValue Number

스타일에 등록할 값

setStyle(styleProp, newValue)

컴포넌트에 스타일을 등록합니다.

Name Type Description
styleProp string

스타일 속성명
newValue *

스타일에 등록할 값

Styles

alternatingItemColorsArray

행들의 색을 결정합니다. 여러 컬러의 배열입니다.

첫번째 요소의 색이 한 행에 결정되었다면 다음 행은 두번째 색으로 결정되는 형식입니다. Alternating pattern 을 갖고 색이 결정됩니다.

Default Value:
  • ["#FFFFFF", "#FFFFFF"]

backgroundAlphanumber

배경의 투명도(alpha) 값을 결정합니다.

(유효값 : 0~1)

Default Value:
  • 1

backgroundColorcolor

배경색을 나타냅니다.

그리드에서 데이터가 없는 빈 공간에 나타납니다.

Default Value:
  • #F2F2F2

backgroundDisabledColorcolor

잠긴상태(enabled=false) 인 경우 색을 나타냅니다

Default Value:
  • #F2F2F2

borderColorcolor

테두리 색을 지정합니다.

(borderTopColor, borderLeftColor, borderRightColor, borderBottomColor로 개별 설정 가능)

Default Value:
  • #DDDDDD

borderStylestring

테두리 선의 모양을 지정합니다.

(borderTopStyle, borderLeftStyle, borderRightStyle, borderBottomStyle로 개별 설정 가능)

(유효값 : “none”,”solid”,”inset”,”outset”)

Default Value:
  • solid

borderWidthnumber

테두리 선의 두께를 나타냅니다.

(borderTopWidth, borderLeftWidth, borderRightWidth, borderBottomWidth로 개별 설정 가능)

Default Value:
  • 1

cellTextAlignstring

계산 결과가 표시되는 셀에 적용할 텍스트 정렬 방식을 나타냅니다.

(유효값 : “left”,”right”,”center”)

Default Value:
  • "right"

colorcolor

텍스트의 색깔을 나타냅니다.

Default Value:
  • #31393F

columnAxisHeaderStyleNamestring

열의 헤더들에 적용할 스타일명 나타냅니다.

기본값은 undefined이며, 기본으로 headerStyleName의 값을 사용하게 됩니다.

disabledColorcolor

잠긴상태의 텍스트 컬러를 나타냅니다.

Default Value:
  • #AAAAAA

exportFooterAlignstring

Excel export시 내용에 덧붙일 꼬릿말의 수평정렬.

(유효값 : ”right”,“left”,”center”)

Default Value:
  • "right"

exportFooterColorcolor

Excel export시 내용에 덧붙일 꼬릿말의 글씨 색깔.

Default Value:
  • #000000

exportFooterFontSizenumber

Excel export시 내용에 덧붙일 꼬릿말의 font크기.

Default Value:
  • 10

exportTitleAlignstring

Excel export시 내용에 덧붙일 제목행의 수평정렬.

(유효값 : “center”,”left”,”right”)

Default Value:
  • "center"

exportTitleColorcolor

Excel export시 내용에 덧붙일 제목행의 글씨 색깔.

Default Value:
  • #000000

exportTitleFontSizenumber

Excel export시 내용에 덧붙일 제목행의 font크기.

Default Value:
  • 18

fontFamilystring

사용할 폰트를 지정합니다.

fontSizestring

폰트 크기를 픽셀단위로 지정합니다.

Default Value:
  • 13px

fontStylestring

폰트 스타일을 나타냅니다.

(유효값 : “normal”,”italic”)

Default Value:
  • "normal"

fontWeightstring

폰트의 두께 속성을 나타냅니다.

(유효값 : “normal”,”bold”)

Default Value:
  • "normal"

headerBorderBottomColorcolor

그리드 헤더의 아랫쪽 테두리 선의 색을 나타냅니다.

Default Value:
  • #999999

headerBorderBottomWidthnumber

그리드 헤더의 아랫쪽 테두리 선의 두께를 나타냅니다.

Default Value:
  • 1

headerBorderTopColorcolor

그리드 헤더의 윗쪽 테두리 선의 색을 나타냅니다.

Default Value:
  • #555555

headerBorderTopWidthnumber

그리드 헤더의 윗쪽 테두리 선의 두께를 나타냅니다.

Default Value:
  • 1

headerColorsArray

헤더 배경에 그라디언트 색을 배열로 정의합니다.

배열로 정의된 색이 배경에 그라디언트로 표현됩니다. 전체 헤더에 적용되며 개별 컬럼의 헤더에 대한 배경색은 지정하실 수 없습니다.

Default Value:
  • ["#FFFFFF", "#FFFFFF"]

headerHorizontalSeparatorColorcolor

그리드 헤더의 수평분리선 색을 나타냅니다. (그룹컬럼 사용시)

Default Value:
  • #EAEAEA

headerPaddingBottomnumber

그리드 헤더 셀의 아랫쪽 여백을 나타냅니다.

Default Value:
  • 9

headerPaddingTopnumber

그리드 헤더 셀의 윗쪽 여백을 나타냅니다.

Default Value:
  • 9

headerRollOverColorcolor

헤더에 마우스로 롤-오버 시 헤더의 배경색을 나타냅니다.

Default Value:
  • #F4F4F4

headerSeparatorColorcolor

그리드 헤더의 세로 분리선 색을 나타냅니다.

Default Value:
  • #EAEAEA

headerStyleNamestring

컬럼 헤더의 스타일 이름을 나타냅니다.

Default Value:
  • "rMateDataGridHeaderStyles"

horizontalGridLineColorcolor

수평 그리드 라인의 색

Default Value:
  • #DDDDDD

horizontalGridLinesboolean

행과 행 사이의 수평 그리드 라인 표시 여부를 나타냅니다.

Default Value:
  • true

horizontalGridLineStylestring

수평 그리드 라인의 속성을 결정합니다.

(유효값 : “solid”, “dotted”)

Default Value:
  • "solid"

indentationnumber

계층형 네비게이션의 각 노드의 인덴테이션을 픽셀단위로 나타냅니다.

Default Value:
  • 17

lockedLineColorcolor

틀고정시 표시되는 라인의 색상을 나타냅니다.

Default Value:
  • #DDDDDD

lockedLineStylestring

틀고정시 표시되는 라인의 속성을 나타냅니다.

(유효값 : “double”, “solid”, “dotted”)

Default Value:
  • "double"

paddingBottomnumber

DataGrid 내의 모든 셀의 아랫쪽 여백으로 적용됩니다.

Default Value:
  • 7

paddingLeftnumber

왼쪽 여백을 나타냅니다.

paddingRightnumber

오른쪽 여백을 나타냅니다.

paddingTopnumber

DataGrid내의 모든 셀의 윗쪽 여백을 나타냅니다.

Default Value:
  • 7

proposedColorcolor

헤더에 마우스가 오버되었을 때 소팅순서를 나타내는 문자열의 색상을 나타냅니다.

Default Value:
  • #0B333C

rollOverColorcolor

마우스로 롤-오버 시 행이나 셀의 배경색을 나타냅니다.

Default Value:
  • #EFF6FC

rowAxisHeaderStyleNamestring

행의 헤더들에 적용할 스타일명을 나타냅니다.

기본값은 undefined이며, 기본으로 headerStyleName의 값을 사용하게 됩니다.

rowGroupStyleNamestring

행의 헤더 셀들에 적용할 스타일명을 나타냅니다.

기본값은 undefined입니다.

Since:
  • 6.0

selectionColorcolor

선택한 아이템(들)의 배경색을 나타냅니다.

Default Value:
  • #348FD6

selectionDisabledColorcolor

잠긴 상태에서의 선택한 아이템(들)의 색을 나타냅니다.

Default Value:
  • #DDDDDD

textAlignstring

텍스트 정렬 방식을 나타냅니다.

(유효값 : “left”,”right”,”center”)

Default Value:
  • "left"

textDecorationstring

텍스트에 밑줄을 그을지 나타냅니다.

(유효값 : “none”,”underline”)

textIndentstring

텍스트의 시작 들여쓰기를 픽셀단위로 지정합니다.

textRollOverColorcolor

롤-오버 시 텍스트의 색을 나타냅니다.

Default Value:
  • #31393F

textSelectedColorcolor

선택된 셀의 텍스트 색을 나타냅니다.

Default Value:
  • #EEEEEE

verticalAlignstring

셀의 수직 정렬.

(유효값 : "top","middle","bottom")

Default Value:
  • "top"

verticalGridLineColorcolor

수직 그리드 라인의 색을 결정합니다.

Default Value:
  • #EAEAEA

verticalGridLinesboolean

컬럼과 컬럼 사이의 수직 그리드라인을 표현할지 여부를 나타냅니다.

Default Value:
  • true

verticalGridLineStylestring

수직 그리드 라인의 속성을 결정합니다.

(유효값 : “solid”, “dotted”)

Default Value:
  • "solid"

Events

change

사용자가 마우스나 키보드를 조작하여 선택사항을 바꿨을 때 발생합니다.

Type:
  • Event
Properties:
Name Type Description
columnIndex number

클릭한 컬럼의 index번호 (displayableColumns 기준)
rowIndex number

클릭한 행의 index번호

click

사용자가 마우스를 클릭하면 발생합니다.

click 이벤트의 경우 그리드 내부의 이벤트 발생이 아닌 HTML 이벤트로 발생됩니다.

이벤트 처리함수를 등록/삭제 할 때에는 addEvent, removeEvent 함수를 사용합니다.

Type:
  • MouseEvent
Properties:
Name Type Description
altKey boolean

alter 키 클릭여부
ctrlKey boolean

컨트롤 키 클릭여부
shiftKey boolean

Shift 키 클릭여부
pageX number

X 좌표
pageY number

Y 좌표

contextMenuDown

사용자가 셀에서 오른쪽 마우스를 클릭하면 발생합니다.

DataGrid에 컨텍스트 메뉴가 설정된 경우에만 발생하여, 발생한 이벤트에 대해 preventDefault 함수를 실행하여 취소시키면 컨텍스트 메뉴는 표시되지 않습니다.

Type:
  • Event
Properties:
Name Type Description
columnIndex number

클릭한 컬럼의 index번호 (displayableColumns 기준)
rowIndex number

클릭한 행의 index번호

dblclick

사용자가 마우스를 더블클릭하면 발생합니다.

dbclick 이벤트의 경우 그리드 내부의 이벤트 발생이 아닌 HTML 이벤트로 발생됩니다.

이벤트 처리함수를 등록/삭제 할 때에는 addEvent, removeEvent 함수를 사용합니다.

Type:
  • MouseEvent
Properties:
Name Type Description
altKey boolean

alter 키 클릭여부
ctrlKey boolean

컨트롤 키 클릭여부
shiftKey boolean

Shift 키 클릭여부
pageX number

X 좌표
pageY number

Y 좌표

exportSaveComplete

Excel 파일 저장이 완료되면 발생합니다.

Type:
  • Event

exportSaveError

Excel 파일 저장중 오류가 나면 발생합니다

Type:
  • Event
Properties:
Name Type Description
text string

오류 내역

exportUploadComplete

Excel 파일 업로드가 완료되면 발생합니다.

Type:
  • Event

exportUploadError

Excel 파일 업로드중 오류가 나면 발생합니다.

Type:
  • Event
Properties:
Name Type Description
text string

오류 내역

headerRelease

사용자가 헤더를 눌렀다 떼는 경우 발생합니다. (정렬이 수행되기 전)

Type:
  • Event
Properties:
Name Type Description
columnIndex number

클릭한 헤더의 컬럼 index번호
dataField string

클릭한 헤더의 필드명

headerShift

컬럼이 이동되면 발생합니다.

Type:
  • Event
Properties:
Name Type Description
newIndex number

컬럼이 옮겨진 index번호
oldIndex number

컬럼의 이전 index번호

itemClick

사용자가 셀을 마우스로 클릭하면 발생합니다.

Type:
  • Event
Properties:
Name Type Description
columnIndex number

클릭한 컬럼의 index번호 (displayableColumns 기준)
rowIndex number

클릭한 행의 index번호

itemDoubleClick

사용자가 셀을 마우스로 더블클릭하면 발생합니다.

Type:
  • Event
Properties:
Name Type Description
columnIndex number

클릭한 컬럼의 index번호 (displayableColumns 기준)
rowIndex number

클릭한 행의 index번호

itemRollOver

사용자가 셀을 마우스로 롤오버하면 발생합니다.

(헤더에 대해서는 발생하지 않으나, 사용자가 헤더에서 오른쪽 마우스를 클릭하여 컨텍스트 메뉴를 띄울 때는 발생합니다. 이때 rowIndex는 -2로 전달됩니다)

Type:
  • Event
Properties:
Name Type Description
columnIndex number

롤오버한 컬럼의 index번호 (displayableColumns 기준)
rowIndex number

롤오버한 행의 index번호

keyDown

사용자가 키보드를 눌렀을 때 발생합니다.

keyDown 이벤트의 경우 그리드 내부의 이벤트 발생이 아닌 HTML 이벤트로 발생됩니다.

이벤트 처리함수를 등록/삭제 할 때에는 addEvent, removeEvent 함수를 사용합니다.

Type:
  • KeyboardEvent
Properties:
Name Type Description
charCode string

눌려진 키보드의 문자 코드
ctrlKey boolean

컨트롤 키 클릭여부
keyCode string

눌려진 키보드의 key 코드
shiftKey boolean

Shift 키 클릭여부

keyUp

사용자가 키보드를 눌렀다 떼었을 때 발생합니다.

keyUp 이벤트의 경우 그리드 내부의 이벤트 발생이 아닌 HTML 이벤트로 발생됩니다.

이벤트 처리함수를 등록/삭제 할 때에는 addEvent, removeEvent 함수를 사용합니다.

Type:
  • KeyboardEvent
Properties:
Name Type Description
charCode string

눌려진 키보드의 문자 코드
ctrlKey boolean

컨트롤 키 클릭여부
keyCode string

눌려진 키보드의 key 코드
shiftKey boolean

Shift 키 클릭여부

menuItemSelect

사용자가 오른쪽 마우스를 눌러 표시된 ContextMenu에서 메뉴를 선택하면 발생합니다.

Type:
  • Event
Properties:
Name Type Description
menuItemCaption string

선택한 메뉴의 메뉴명

progress

Excel export시 작업 진행 상태가 변경될 때 발생합니다.

Type:
  • Event
Properties:
Name Type Description
bytesLoaded number

처리한 행의 수
bytesTotal number

처리해야 하는 전체 행의 수

scroll

스크롤이 수행될 때 발생합니다.

Type:
  • Event
Properties:
Name Type Description
delta number

변화량(양수이면 아래나 오른쪽이고 음수이면 왼쪽이나 위로 이동하는 것임)
direction string

스크롤 방향(좌우스크롤인지 상하스크롤인지 여부)
position number

이벤트 반영후 스크롤 위치