rMateGridH5 6.0

Class: DataGrid

DataGrid

new DataGrid()

실제 그리드를 표시하는 컴포넌트입니다.


DataGrid에서 제공하는 중요 기능은 다음과 같습니다.

  • 가변 또는 고정된 넓이의 컬럼
  • 사용자 조작에 의한 컬럼 넓이 조정
  • 사용자 조작에 의한 컬럼 순서 정렬
  • 사용자 조작에 의한 데이터 정렬
  • 데이터 유형에 따른 데이터 수정
  • 조건에 따른 데이터 합산
  • 계층형 데이터의 조회
Example

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

<rMateGrid>
     <NumberFormatter id="numfmt" useThousandsSeparator="true"/>
     <PercentFormatter id="percfmt" useThousandsSeparator="true"/>
     <CurrencyFormatter id="currencyfmt" useThousandsSeparator="true" currencySymbol="원" alignSymbol="right"/>
     <DataGrid id="dg1" sortableColumns="true" sortExpertMode="false" horizontalScrollPolicy="auto" textAlign="right" verticalAlign="middle">
         <columns>
             <DataGridColumn id="dg1col1" dataField="Year" textAlign="center" width="80"/>
             <DataGridColumn id="dg1col2" dataField="Quarter" textAlign="center" width="120"/>
             <DataGridColumn id="dg1col3" dataField="Month" textAlign="center" />
             <DataGridColumn id="dg1col4" dataField="Seoul" formatter="{numfmt}"/>
             <DataGridColumn id="dg1col5" dataField="Busan" formatter="{numfmt}"/>
             <DataGridColumn id="dg1col6" dataField="Incheon" formatter="{currencyfmt}"/>
             <DataGridColumn id="dg1col7" dataField="NewYork" headerText="New York"/>
             <DataGridColumn id="dg1col8" dataField="LA" headerText="L.A." visible="false"/>
             <DataGridColumn id="dg1col9" dataField="Washington"/>
             <DataGridColumn id="dg1col10" dataField="Revenue"/>
             <DataGridColumn id="dg1col11" dataField="Percent" formatter="{percfmt}"/>
         </columns>
     </DataGrid>
 </rMateGrid>

Members

alphanumber

투명도(alpha)

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

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

alwaysShowErrorTipboolean

에러문자열을 항상 보이게 할 지 여부.

true로 설정하면, 표시된 에러문자열 툴팁이 포커스를 벗어나도 계속 화면에 나타나게 되며, false로 설정하면, 포터스가 벗어나면 표시된 에러문자열 툴팁은 사라지게 됩니다.

Default Value:
  • false

autoFitColumnsboolean

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

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

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

Default Value:
  • true

autoHeightboolean

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

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

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

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

Default Value:
  • false

cellAttributeJsFunctionfunction

Span류의 collection을 사용할 경우 셀의 속성을 사용자 정의 할 수 있는 콜백함수.

null을 반환하면 셀 속성은 변경되지 않으며, 속성에 적용할 객체를 반환하면 해당 속성이 변경됩니다.

(단. SpanCellAttribute 에서 정의된 속성만을 사용해야 합니다)

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

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

function cellAttributeJsFunction(item, column, cellAttr)
  - item : 해당 행의 data 객체
  - column : 해당 셀의 컬럼 객체
  - cellAttr : 해당 셀에 적용된 SpanCellAttribute 객체

columnsArray

그리드내의 컬럼 표시에 사용될 DataGridColumn 객체를 가지고 있는 배열.

그리드 내부적으로는 최대 컬럼수 제한이 없으나 "xls"로 Export시에는 최대 컬럼의 수는 255개로 제한해야 됩니다.

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

contextMenuobject

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

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

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

그리드에 표시할 데이터.

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

dataTipJsFunctionfunction

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

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

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

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

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

readonlydisplayableColumnsArray

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

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

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

displayDisclosureIconboolean

계층형 네비게이션에서 disclosure icons의 표시 여부.

false 인 경우 disclosure icons 는 나타나지 않습니다.

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

displayItemsExpandedboolean

계층형 네비게이션에서 모든 아이템을 보이도록 확장할지 여부.

true 로 설정한 경우 새로운 브랜치를 추가한 경우, 그 브랜치는 펼쳐진 형태로 출력됩니다.

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

doubleClickEnabledboolean

더블클릭 가능 여부

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

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

draggableColumnsboolean

컬럼들의 순서를 재조정하게 허용할지 여부를 나타냅니다.

개별 컬럼에 대해 순서 재조정 여부를 설정하려면 컬럼의 draggable속성을 참조 바랍니다.

Default Value:
  • false
See:

dragSelectableboolean

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

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

Default Value:
  • false

editableboolean

수정가능 여부.

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

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

editedItemPositionobject

특정 셀을 수정모드로 변경시키거나, 수정 중일 경우 수정하고 있는 셀의 위치정보를 가져옵니다.

전달되는 Object는 다음 정보를 가지고 있게 됩니다.

  • rowIndex : 수정하고 있는 행의 index 값
  • columnIndex : 수정하고 있는 열의 index 값

예 : {rowIndex:3, columnIndex:2}

이 기능을 통해 셀이 수정모드로 변경될 경우에는 강제로 수정을 하는 것이 되므로 컬럼의 수정가능여부 등은 무시되며 설정된 itemEditBeginningJsFunction 함수는 불려지지 않습니다.

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

editingKeyModestring

입력 키에 따른 처리 방식.

"excel"로 설정할 경우 엑셀처럼 원하는 셀(editor가 TextInput인 컬럼) 위치에서 문자를 입력할 경우 편집모드로 전환되며, Tab키나 Enter키에 의한 이동시 편집상태로 변환되지 않고 선택 셀만 이동시킵니다.

컬럼의 editor가 TextInput이 아닌 경우에는 첫번째 키입력은 무시되고 편집모드로 전환됩니다.

엑셀 방식을 사용하시려면 selectionMode가 "singleCell"이나 "multipleCells" 여야 합니다.

Default Value:
  • undefined

enabledboolean

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

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

endEditOnBlurboolean

편집중 그리드 외부 클릭시 에러가 있을때 원복할지 여부.

false로 설정할 경우 그리드 외부 클릭시 수정내용에 오류가 있으면 원복하지 않고 오류 메시지를 그대로 보여주는 상태를 유지하게 됩니다.

Default Value:
  • true

errorInEditingboolean

수정중 에러 여부.

에디팅 중이고 itemEditorItemEditEnd 등에 의해 에디터에 오류가 표시되어 있는 상태인지 여부

Default Value:
  • false

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시 내용에 덧붙일 꼬릿말.

한 줄의 꼬릿말만 넣을 수 있는 기능으로, 버전 5.0부터는 exportFooters 를 사용하시기 바랍니다. exportFooters 속성이 설정될 경우 이 속성은 무시됩니다.

Deprecated
  • since version 5.0

    exportFooterHeightnumber

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

    Default Value:
    • 20

    exportFootersArray

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

    여러 줄의 꼬릿말을 넣을 경우 사용되며, 배열에는 null, 문자열, object로 행의 속성을 넣을 수 있습니다.

    null을 넣을 경우에는 해당 행은 exportFootereHeight 높이로 빈 행으로 처리되며, 문자열을 넣을 경우에는 DataGrid에 설정된 꼬릿말의 속성 및 스타일로 병합된 한 개의 셀로 표시되며,
    object에 개별 속성을 지정하여 행의 모양 및 내용을 정의할 수 있습니다.

    object로 정의된 행의 설정에서 지정할 수 있는 속성은 다음과 같습니다.

    • text:string 표시될 문자열. 문자열 외의 값은 무시되며, cells 가 설정될 경우 이 속성은 무시됩니다
    • cells:array 개별 셀에 들어갈 내용을 포함하는 배열. null, 문자열, object로 셀의 속성을 넣을 수 있으며, object로 정의된 셀의 설정에서 지정할 수 있는 속성은 아래와 같습니다. * text:string 표시될 문자열. 문자열 외의 값은 무시됩니다. * fontSize:number 글씨 크기 - 설정하지 않을 경우 행에서 설정한 fontSize 또는 exportFooterFontSize 값이 적용됩니다. * color:color 글씨 색상 - 설정하지 않을 경우 행에서 설정한 color 또는 exportFooterColor 값이 적용됩니다. * textAlign:string 좌우 정렬. left, center, right중 택일 - 설정하지 않을 경우 행에서 설정한 textAlign 또는 exportFooterAlign 값이 적용됩니다. * border:boolean 테두리 표시 여부 - 설정하지 않을 경우 행에서 설정한 border값이 적용됩니다. * borderColor:color 테두리 색상 - 설정하지 않을 경우 행에서 설정한 borderColor값이 적용됩니다. * borderStyle:string 테두리 스타일. solid, dotted중 택일 (default:solid) - 설정하지 않을 경우 행에서 설정한 borderStyle값이 적용됩니다. * colSpan:number 열병합 갯수 - 기본값은 1이며 2이상의 값을 넣어야 작동합니다. * rowSpan:number 행병합 갯수 - 기본값은 1이며 2이상의 값을 넣어야 작동합니다. 잘못 값을 넣을 경우 엑셀파일에서 오류가 있다는 메세지가 발생하므로 주의하여 넣으시기 바랍니다. * backgroundColor:color 셀의 배경 색상 - 설정하지 않을 경우 행에서 설정한 backgroundColor값이 적용됩니다.
    • height:number 해당 행의 높이
    • fontSize:number 글씨 크기 - 설정하지 않을 경우 exportFooterFontSize 값이 적용됩니다.
    • color:color 글씨 색상 - 설정하지 않을 경우 exportFooterColor 값이 적용됩니다.
    • textAlign:string 좌우 정렬. left, center, right중 택일 - 설정하지 않을 경우 exportFooterAlign 값이 적용됩니다.
    • border:boolean 테두리 표시 여부
    • borderColor:color 테두리 색상
    • borderStyle:string 테두리 스타일. solid, dotted중 택일 (default:solid)
    • backgroundColor:color 행의 배경 색상
    • imgURL:string 셀에 첨부할 이미지의 url
    • imgData:string 셀에 첨부할 이미지의 base64로 인코딩된 이미지 데이터 ("image/???;base64,??????..." 형식)
    • imgWidth:number 셀에 첨부할 이미지의 폭 (없을 경우 100)
    • imgHeight:number 셀에 첨부할 이미지의 높이 (없을 경우 30)
    • imgX:number 셀에 첨부할 이미지의 x좌표 (없을 경우 0)
    • imgY:number 셀에 첨부할 이미지의 y좌표 (없을 경우 0)
    Since:
    • 5.0
    Example
    dataGrid.exportFooters = [
 	"Footer 문자열",
 	null,
 	{height:25, fontSize:12, color:"#444444", textAlign:"right", border:true, borderColor:"#999999", backgroundColor:"#DDDDDD", text:"object로 행속성 설정"},
 	{height:20, fontSize:10, color:"#333333", borderColor:"#999999", cells:[
 			"개별 셀에 들어갈 문자열",
 			null,
 			{fontSize:12, color:"#222222", border:true, borderColor:"#FF0000", borderStyle:"dotted", colSpan:2, text:"object로 셀속성 설정"},
 			{imgURL:"https://demo.riamore.net/test/nocache/AlbumArtSmall.jpg", imgWidth:100, imgHeight:60, imgX:10, imgY:10}
 		]
 	}
 ];

    exportLockedCountboolean

    행, 열 틀고정 속성을 export할지 여부.

    true로 세팅 될 경우 lockedColumnCount, lockedRowCount 속성을 엑셀 틀고정 속성으로 export 합니다.

    Since:
    • 6.0
    Default Value:
    • true

    exportLockedHeaderboolean

    헤더에 의한 틀고정 속성을 export할지 여부.

    true로 세팅 될 경우 헤더 수만큼 엑셀 틀고정 속성으로 export 합니다.

    이 속성이 설정되면 exportLockedCount에 의한 lockedRowCount 설정 값은 무시됩니다.

    Since:
    • 6.0
    Default Value:
    • false

    exportOnlyDataboolean

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

    true로 세팅 될 경우 style관련 정보는 모두 무시되고 데이타만 export됩니다.

    Default Value:
    • false

    exportOnlyVisibleColumnsboolean

    Excel export시 visible속성이 true인 컬럼만 export할지 여부.

    true로 세팅 될 경우 visible 속성이 true인 컬럼만 export되며, false일 경우에는 visible이 false인 컬럼은 숨긴 열로 export됩니다.

    Since:
    • 5.0
    Default Value:
    • false

    exportSheetNamestring

    Export할 excel파일 내의 sheet명.

    Default Value:
    • "Sheet1"

    exportTitlestring

    Excel export시 내용에 덧붙일 제목.

    한 줄의 제목만 넣을 수 있는 기능으로, 버전 5.0부터는 exportTitles 를 사용하시기 바랍니다. exportTitles 속성이 설정될 경우 이 속성은 무시됩니다.

    Deprecated
    • since version 5.0

      exportTitleHeightnumber

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

      Default Value:
      • 50

      exportTitlesArray

      Excel export시 내용에 덧붙일 제목 행들.

      여러 줄의 제목을 넣을 경우 사용되며, 배열에는 null, 문자열, object로 행의 속성을 넣을 수 있습니다.

      null을 넣을 경우에는 해당 행은 exportTitleHeight 높이로 빈 행으로 처리되며, 문자열을 넣을 경우에는 DataGrid에 설정된 제목의 속성 및 스타일로 병합된 한 개의 셀로 표시되며,
      object에 개별 속성을 지정하여 행의 모양 및 내용을 정의할 수 있습니다.

      object로 정의된 행의 설정에서 지정할 수 있는 속성은 다음과 같습니다.

      • text:string 표시될 문자열. 문자열 외의 값은 무시되며, cells 가 설정될 경우 이 속성은 무시됩니다
      • cells:array 개별 셀에 들어갈 내용을 포함하는 배열. null, 문자열, object로 셀의 속성을 넣을 수 있으며, object로 정의된 셀의 설정에서 지정할 수 있는 속성은 아래와 같습니다. * text:string 표시될 문자열. 문자열 외의 값은 무시됩니다. * fontSize:number 글씨 크기 - 설정하지 않을 경우 행에서 설정한 fontSize 또는 exportTitleFontSize 값이 적용됩니다. * color:color 글씨 색상 - 설정하지 않을 경우 행에서 설정한 color 또는 exportTitleColor 값이 적용됩니다. * textAlign:string 좌우 정렬. left, center, right중 택일 - 설정하지 않을 경우 행에서 설정한 textAlign 또는 exportTitleAlign 값이 적용됩니다. * border:boolean 테두리 표시 여부 - 설정하지 않을 경우 행에서 설정한 border값이 적용됩니다. * borderColor:color 테두리 색상 - 설정하지 않을 경우 행에서 설정한 borderColor값이 적용됩니다. * borderStyle:string 테두리 스타일. solid, dotted중 택일 (default:solid) - 설정하지 않을 경우 행에서 설정한 borderStyle값이 적용됩니다. * colSpan:number 열병합 갯수 - 기본값은 1이며 2이상의 값을 넣어야 작동합니다. * rowSpan:number 행병합 갯수 - 기본값은 1이며 2이상의 값을 넣어야 작동합니다. 잘못 값을 넣을 경우 엑셀파일에서 오류가 있다는 메세지가 발생하므로 주의하여 넣으시기 바랍니다. * backgroundColor:color 셀의 배경 색상 - 설정하지 않을 경우 행에서 설정한 backgroundColor값이 적용됩니다.
      • height:number 해당 행의 높이
      • fontSize:number 글씨 크기 - 설정하지 않을 경우 exportTitleFontSize 값이 적용됩니다.
      • color:color 글씨 색상 - 설정하지 않을 경우 exportTitleColor 값이 적용됩니다.
      • textAlign:string 좌우 정렬. left, center, right중 택일 - 설정하지 않을 경우 exportTitleAlign 값이 적용됩니다.
      • border:boolean 테두리 표시 여부
      • borderColor:color 테두리 색상
      • borderStyle:string 테두리 스타일. solid, dotted중 택일 (default:solid)
      • backgroundColor:color 행의 배경 색상
      • imgURL:string 셀에 첨부할 이미지의 url
      • imgData:string 셀에 첨부할 이미지의 base64로 인코딩된 이미지 데이터 ("image/???;base64,??????..." 형식)
      • imgWidth:number 셀에 첨부할 이미지의 폭 (없을 경우 100)
      • imgHeight:number 셀에 첨부할 이미지의 높이 (없을 경우 30)
      • imgX:number 셀에 첨부할 이미지의 x좌표 (없을 경우 0)
      • imgY:number 셀에 첨부할 이미지의 y좌표 (없을 경우 0)
      Since:
      • 5.0
      Example
      dataGrid.exportTitles = [
 	"Title 문자열",
 	null,
 	{height:25, fontSize:12, color:"#444444", textAlign:"right", border:true, borderColor:"#999999", backgroundColor:"#DDDDDD", text:"object로 행속성 설정"},
 	{height:20, fontSize:10, color:"#333333", borderColor:"#999999", cells:[
 			"개별 셀에 들어갈 문자열",
 			null,
 			{fontSize:12, color:"#222222", border:true, borderColor:"#FF0000", borderStyle:"dotted", colSpan:2, text:"object로 셀속성 설정"}
 		]
 	}
 ];

      exportTxtSeperatorstring

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

      Default Value:
      • ","

      exportTypestring

      Excel Export할 Excel 파일 형식.

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

      Default Value:
      • "xlsx"

      footersArray

      푸터에 붙일 DataGridFooter 객체의 배열.

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

      groupedColumnsArray

      컬럼을 그룹핑할 때 DataGridColumn 의 계층(hierarchy)을 정의하는 배열.

      만약 columns 와 groupedColumns 속성 모두를 지정한다면 columns 속성은 무시되고 groupedColumns 속성이 사용됩니다.

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

      groupItemRendererobject

      계층형 네비게이션에서 브랜치 노드를 표현하기 위해 사용되는 아이템렌더러.

      레이아웃이 아닌 자바스크립트에서 지정할 때에는 다음과 같이 GridRoot의 newFactoryInstance함수를 사용하여 지정해야 합니다.

      grid.setGroupItemRenderer(gridRoot.newFactoryInstance("GroupItem"));

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

      headerDragEnabledboolean

      컬럼의 헤더를 drag할 수 있는지 여부

      DataGridGroupingPanel을 사용하여 그룹핑을 수행할 경우 true로 설정하여 그리드 헤더를 드래그 앤 드롭할 수 있도록 합니다.

      Default Value:
      • false

      headerHeightnumber

      그리드 헤더 높이.

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

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

      pixel단위로 적용됩니다.

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

      headerLabelJsFunctionfunction

      컬럼의 헤더에 쓰일 문자열을 반환하는 함수.

      컬럼의 헤더에 표시되는 문자열은 기본으로 dataField나 headerText가 쓰이지만, 사용자가 설정 값에 따라 다른 문자열을 표현하고자 할 경우 이 함수 기능을 통해 표현할 수 있습니다.

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

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

      function headerLabelFunction(column, callByExport)
  - column : 컬럼을 정의한 Column 객체
  - callByExport : export 실행에 의해 불려졌는 지 여부

      headerWordWrapboolean

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

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

      heightnumber

      개체의 높이.

      pixel단위로 적용됩니다.

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

      horizontalScrollPolicystring

      가로 스크롤바 표시 방식.

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


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


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

      Default Value:
      • "off"
      See:

      horizontalScrollPositionnumber

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

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

      itemEditBeginningJsFunctionfunction

      editable속성이 true일 때 사용자가 셀을 클릭하여 셀의 수정 모드로 들어가면 불려지며, 수정가능이면 true를, 수정 불가이면 false를 반환하여

      수정여부를(CheckBoxItem, ComboxItem과 같이 렌더러가 이미 수정가능 상태이면 false반환시 오작동하게 됩니다) 조작할 수 있습니다.

      Example

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

      function itemEditBeginningJsFunction (rowIndex, columnIndex, item, dataField)
  - rowIndex : 해당 행의 index번호
  - columnIndex : 해당 컬럼의 index번호
  - item : 해당 행의 data 객체
  - dataField : 필드명

      itemEditEndJsFunctionfunction

      editable속성이 true일 때 사용자가 셀을 수정한 후 불려지며, 수정가능이면 null을,

      수정 불가이면 오류메시지를 반환하여 수정한 내용의 반영 여부를 조작할 수 있습니다.

      Example

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

      function itemEditEndJsFunction (rowIndex, columnIndex, item, dataField, oldValue, newValue, reason)
  - rowIndex : 해당 행의 index번호
  - columnIndex : 해당 컬럼의 index번호
  - item : 해당 행의 data 객체
  - dataField : 필드명
  - oldValue : 수정전의 값
  - newValue : 수정후의 값
  - reason : 수정이 끝난 이유 (cancelled : 사용자가 수정 취소, sameValue : 같은 값을 유지, newColumn : 수정후 다른 열로 이동, newRow : 수정후 다른 행으로 이동, blur : 그리드 외부 클릭이나, 수정이 안되는 영역으로 이동, other : 포커스 이동이나 설정값 변경등등)

      itemEditorInstanceinstance

      수정 중일 경우 수정을 위해 생성된 itemEditor 클래스 객체

      컬럼에서 itemEditor를 지정하지 않을 경우 TextInput이 되며, 지정되어 있으면 해당 객체의 인스턴스가 됩니다.

      itemFocusInJsFunctionfunction

      editable속성이 true일 때 사용자가 셀을 수정할 수 있게 되면 불려지며,

      수정에 사용되는 itemEditor의 속성등을 변경시켜 입력 제한을 하거나 이벤트를 받을 수 있게 할 수 있습니다.

      Example

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

      function itemFocusInJsFunction (rowIndex, columnIndex, item, dataField)
  - rowIndex : 해당 행의 index번호
  - columnIndex : 해당 열의 index번호
  - item : 해당 행의 data 객체
  - dataField : 해당 열의 dataField명

      lastColumnWidthPolicystring

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

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

      보다 자세한 사항은 매뉴얼의 "컬럼의 크기에 관하여" 항목을 참조 바랍니다.


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

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

      liveHorizontalScrollingboolean

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

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

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

      Since:
      • 5.0
      Default Value:
      • true

      liveScrollingboolean

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

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

      가로나 세로 스크롤에 대해서만 false를 적용할 경우에는 이 값을 true로 설정하고 사용하기시 바랍니다.

      Default Value:
      • true

      liveVerticalScrollingboolean

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

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

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

      Since:
      • 5.0
      Default Value:
      • true

      lockedColumnCountnumber

      열고정 설정 값.

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

      그룹 컬럼을 사용할 경우에는 그룹된 컬럼을 한개의 컬럼으로 간주합니다. 가령 이 값을 2로 주고 왼쪽부터 각각 2개, 3개의 컬럼을 포함한 그룹 컬럼들이 있다면 5번째 컬럼에서 열고정이 이루어집니다.

      Default Value:
      • 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

      parsingDateboolean

      붙여넣기에 의해 데이터를 읽어들일 때 날짜형식의 데이터일 경우 Date객체로 변환할 지 여부.

      Default Value:
      • false

      pasteAddItemEnabledboolean

      붙여넣기 실행시에 마지막 행을 초과하는 데이터가 있는 경우 행 추가를 수행할 지 여부.

      Since:
      • 5.0
      Default Value:
      • true

      pasteEditEndJsFunctionfunction

      사용자가 Ctrl-V를 통해 붙여넣기를 할 때 불려지며, 수정가능이면 true를, 수정 불가이면 false를 반환하여 수정한 내용의 반영 여부를 조작할 수 있습니다.

      개별 셀에 대해 불려지므로 여러 번 불려지며 false가 반환되는 경우 해당 데이터는 변경되지 않고 다음 셀의 처리로 넘어가게 됩니다.
      붙여넣기에 의해 데이터가 변경되는 경우에는 itemEditBeginningJsFunction, itemEditEndJsFuction, itemFocusInJsFunction 함수들은 실행되지 않습니다.

      Example

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

      function pasteEditEndJsFunction(rowIndex, columnIndex, item, dataField, oldValue, newValue)
  - rowIndex : 해당 행의 index번호
  - columnIndex : 해당 열의 index번호
  - item : 해당 행의 data 객체
  - dataField : 필드명
  - oldValue : 수정전의 값
  - newValue : 수정후의 값

      pasteEnabledboolean

      Ctrl-V 나 context menu에 의해 붙여넣기 기능의 사용 여부.

      (붙여넣기 되는 내용은 셀의 값이며 속성은 붙여넣기 되지 않습니다)

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

      pasteParseJsFunctionfunction

      사용자가 Ctrl-V를 통해 붙여넣기를 할 때 불려져 붙여넣기할 자료를 자바스크립트 함수에서 변경할 수 있습니다.

      개별 셀에 대해 불려지므로 여러 번 불려지며 반환 값으로 해당 필드의 데이터가 변경됩니다.

      Example

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

      function pasteParseJsFunction(parsedValue, parsedObj, item, column)
  - parsedValue : 붙여넣기할 필드의 값
  - parsedObj : 붙여넣기할 행 data 객체
  - item : 붙여넣기 할 행의 원본 data 객체
  - column : 붙여넣기할 컬럼

      resizableColumnsboolean

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

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

      Default Value:
      • true
      See:

      rowAttributeJsFunctionfunction

      Span류의 collection을 사용할 경우 행의 속성을 사용자 정의 할 수 있는 콜백함수.

      null을 반환하면 행 속성은 변경되지 않으며, 속성에 적용할 객체를 반환하면 해당 속성이 변경됩니다.

      (단. SpanRowAttribute 에서 정의된 속성만을 사용해야 합니다)

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

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

      function rowAttributeJsFunction(item, rowAttr)
  - item : 해당 행의 data 객체
  - rowAttr : 해당 행에 적용된 SpanRowAttribute 객체

      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키와 마우스를 이용하여 여러 개를 선택할 수 있습니다.

      selectorColumn은 4.0 버전부터 추가된 기능으로 작동 방식은 multipleRows와 유사하나 선택을 DataGridSelectorColumn을 통해 제어하도록 하는 모드입니다.
      유효값 : "singleCell", "singleRow", "multipleCells", "multipleRows" ,"selectorColumn" ,"none"

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

      selectorColumnDataGridSelectorColumn

      DataGridSelectorColumn으로 표현된 컬럼을 지정합니다.

      selectionMode가 "selectorColumn"일 때 선택 제어 컬럼의 위치가 맨 앞이 아닌 경우 지정합니다.

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

      showDataTipsboolean

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

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

      showDeletedRowsboolean

      삭제된 행을 보여줄지 여부.

      true로 설정할 경우, GridRoot를 통해 데이터를 삭제하여도 실제 데이터에서 삭제하지 않고 DataGridRowStateColumn을 통해 삭제 표시만 됩니다.

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

      showFootersboolean

      푸터 표시 여부.

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

      showHeadersboolean

      헤더 표시 여부.

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

      showHorizontalScrollTipsboolean

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

      Since:
      • 5.0
      Default Value:
      • false

      showScrollTipsboolean

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

      Default Value:
      • false

      showVerticalScrollTipsboolean

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

      Since:
      • 5.0
      Default Value:
      • false

      sortableColumnsboolean

      컬럼의 정렬 가능 여부.

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

      Default Value:
      • false
      See:

      sortExpertModeboolean

      그리드 헤더에 표시되는 정렬 아이콘 표시를 숙련자 모드로 표시할 지 여부.

      true이면 화면에 정렬표시 영역이 기본으로 나타나지 않고, 정렬시에만 나타나며, 다중 정렬은 Ctrl Key를 통해 조정하게 됩니다.

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

      styleNamestring

      적용할 스타일 이름.

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

      treeColumnDataGridColumn

      계층형 트리가 표현될 컬럼을 지정합니다.

      지정하지 않을 경우 첫번째 컬럼이 지정됩니다.

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

      undoableboolean

      Undo / Redo 가능 여부.
      true로 설정하면, 편집시에 Ctrl-Z, Ctrl-Y 키나 GridRoot의 undo, redo 명령을 통해 편집내용의 되돌리거나 다시 실행 시킬수 있게 됩니다.

      Default Value:
      • false
      See:

      useSameFreeItemRenderersTableboolean

      IE등에서 성능 향상을 위해 내부적으로 컬럼마다 생성되는 렌더러 테이블을 전체적으로 하나만 생성토록 하여 렌더러의 재사용성을 향상시키는 기능.

      Since:
      • 5.0
      Default Value:
      • false

      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를 제거합니다

      clearColumnFilters()

      컬럼에 적용된 모든 필터를 지웁니다.

      clearStyle(styleProp)

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

      Name Type Description
      styleProp string

      스타일 속성명

      collapseAll()

      계층형 네비게이션의 모든 노드들의 자식을 표시하지 않도록 닫힌 형태로 표현합니다. 즉, 모든 폴더를 닫힌 형태로 만듭니다.

      endEditExternalEditor()

      편집을 위해 ExternalEditor 또는 ExternalInputEditor를 사용할 경우 현재의 편집상태를 끝내고 해당 편집 컴포넌트에 설정된 값을 가져와 데이터에 반영합니다.

      Since:
      • 6.0

      expandAll()

      계층형 네비게이션의 모든 노드들의 자식을 표시하도록 모두 열린 상태로 표현합니다. 즉, 모든 폴더를 열린 형태로 만듭니다.

      expandLevel(level)

      계층형일때 특정 레벨까지의 노드를 펼칩니다.

      Name Type Description
      level number

      오픈하려는 레벨

      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합니다.

      isItemDeleted(data){boolean}

      showDeletedRows가 true일 경우 데이타의 삭제여부를 반환합니다.

      Name Type Description
      data object

      삭제여부를 조사할 데이타.
      Returns:
      Type Description
      boolean 삭제 여부.

      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

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

      setColumnFiltering(columnIndex, dataField, operator, filterData, filterFunction)

      컬럼에 대한 필터링을 설정합니다.

      operator와 filterData를 null로 주게 되면 해당 컬럼의 필터링을 해제하게 됩니다.

      파라메터중 filterFunction은 실제 사용할 함수를 넣어주거나 적용할 filterType을 넣어주거나, 안 넣을 경우에는 컬럼에 따라 내부함수가 사용되게 됩니다.

      Name Type Description
      columnIndex number

      필터링을 설정할 컬럼의 인덱스번호
      dataField string

      컬럼의 데이타필드명
      operator string | object

      필터링에 적용할 연산자
      filterData string | Array

      필터링할 문자열 또는 배열
      filterFunction string | function

      필터링에 적용할 함수 또는 문자열 - 문자열일 경우 적용할 filterType으로 간주하여 함수로 변환함
      Since:
      • 4.0

      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

      colorcolor

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

      Default Value:
      • #31393F

      defaultLeafIconstring

      계층형 노드에서 단말 노드 아이콘.

      Default Value:
      • "leaf"

      depthColorsArray

      계층형 네비게이션의 각 레벨(depth에 맞는) 행들의 컬러 배열을 나타냅니다.

      데이터가 Span류의 컬렉션일때는 적용되지 않습니다.

      disabledColorcolor

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

      Default Value:
      • #AAAAAA

      disclosureClosedIconstring

      계층형 노드를 닫기 위한 버튼 아이콘.

      (Plus, FolderClosed, Arrow중 택일, 없애고자 할 경우 null)

      Default Value:
      • "Arrow"

      disclosureOpenIconstring

      계층형 노드를 열기 위한 버튼 아이콘.

      (Minus, FolderOpen, DownArrow중 택일, 없애고자 할 경우 null)

      Default Value:
      • "DownArrow"

      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

      folderClosedIconstring

      계층형 노드가 닫혔을 경우 표시되는 아이콘.

      (Plus, FolderClosed, Arrow중 택일, 없애고자 할 경우 null)

      Default Value:
      • "FolderClosed"

      folderOpenIconstring

      계층형 노드가 열렸을 경우 표시되는 아이콘.

      (Minus, FolderOpen, DownArrow중 택일, 없애고자 할 경우 null)

      Default Value:
      • "FolderOpen"

      fontFamilystring

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

      fontSizestring

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

      Default Value:
      • 13px

      fontStylestring

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

      (유효값 : "normal","italic")

      Default Value:
      • "normal"

      fontWeightstring

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

      (유효값 : "normal","bold")

      Default Value:
      • "normal"

      headerBorderBottomColorcolor

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

      Since:
      • 3.5
      Default Value:
      • #999999

      headerBorderBottomWidthnumber

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

      Since:
      • 3.5
      Default Value:
      • 1

      headerBorderTopColorcolor

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

      Since:
      • 3.5
      Default Value:
      • #555555

      headerBorderTopWidthnumber

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

      Since:
      • 3.5
      Default Value:
      • 1

      headerColorsArray

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

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

      Default Value:
      • [#FFFFFF, #FFFFFF]

      headerHorizontalSeparatorColorcolor

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

      Default Value:
      • #EAEAEA

      headerPaddingBottomnumber

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

      Since:
      • 3.5
      Default Value:
      • 9

      headerPaddingTopnumber

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

      Since:
      • 3.5
      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

      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

      useRollOverboolean

      마우스 오버시 하이라이트 색상 표시 여부.

      Default Value:
      • true

      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번호
      Since:
      • 3.5
      See:

      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

      오류 내역

      filterClick

      사용자가 헤더에서 필터의 설정이나 해제 버튼을 클릭하면 발생합니다.

      Type:
      • Event
      Properties:
      Name Type Description
      columnIndex number

      클릭한 컬럼의 index번호 (displayableColumns 기준)
      dataField string

      필터링이 수행되는 필드명
      reason string

      수행할 명령 (run :필터링 실행, cancelled : 필터링 해제)
      newValue object

      필터링할 값
      Since:
      • 5.0

      footerClick

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

      Type:
      • Event
      Properties:
      Name Type Description
      columnIndex number

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

      클릭한 풋터 행의 index번호
      item string

      클릭한 풋터 셀의 라벨
      htmlEvent Event

      브라우져에서 발생한 원본 이벤트
      Since:
      • 5.0

      headerClick

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

      Type:
      • Event
      Properties:
      Name Type Description
      columnIndex number

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

      행 번호가 없어 -1로 설정됨
      item string

      클릭한 헤더 셀의 라벨
      htmlEvent Event

      브라우져에서 발생한 원본 이벤트
      Since:
      • 5.0

      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번호
      htmlEvent Event

      브라우져에서 발생한 원본 이벤트

      itemClose

      데이터가 계층형일 때 사용자가 특정 행의 하위 행을 닫을 때 발생합니다.

      Type:
      • Event
      Properties:
      Name Type Description
      item object

      닫은 node 데이터
      rowIndex number

      -1

      itemDoubleClick

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

      Type:
      • Event
      Properties:
      Name Type Description
      columnIndex number

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

      클릭한 행의 index번호

      itemEditComplete

      사용자가 셀의 수정을 끝내면 발생합니다.

      셀의 수정에 따라 다른 필드의 내용을 수정할 경우에 이용할 수 있습니다.

      Type:
      • Event
      Properties:
      Name Type Description
      columnIndex number

      수정한 컬럼의 index번호
      rowIndex number

      수정한 행의 index번호
      item object

      수정된 데이터
      dataField string

      수정된 컬럼의 필드명
      oldValue object

      수정되기 전의 값
      newValue object

      수정된 후의 값
      reason string

      수정이 끝난 이유 (cancelled : 사용자가 수정 취소, sameValue : 같은 값을 유지, newColumn : 수정후 다른 열로 이동, newRow : 수정후 다른 행으로 이동, blur : 그리드 외부 클릭이나, 수정이 안되는 영역으로 이동, other : 포커스 이동이나 설정값 변경등등)
      Since:
      • 4.0
      See:

      itemFocusOut

      사용자가 셀에 대한 수정을 완료하여 editor가 사라질 때 발생합니다. (값의 변경여부와 무관하게 발생함)

      Type:
      • Event
      Properties:
      Name Type Description
      columnIndex number

      수정한 컬럼의 index번호
      rowIndex number

      수정한 행의 index번호
      itemRenderer object

      수정에 사용된 itemEditorInstance

      itemOpen

      데이터가 계층형일 때 사용자가 특정 행의 하위 행을 열 때 발생합니다.

      Type:
      • Event
      Properties:
      Name Type Description
      item object

      오픈한 node 데이터
      rowIndex number

      -1

      itemRollOver

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

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

      Type:
      • Event
      Properties:
      Name Type Description
      columnIndex number

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

      롤오버한 행의 index번호
      htmlEvent Event

      브라우져에서 발생한 원본 이벤트

      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

      선택한 메뉴의 메뉴명

      pasteComplete

      붙여넣기가 완료되면 발생합니다.

      Type:
      • Event
      Properties:
      Name Type Description
      columnIndex number

      붙여넣기가 시작된 컬럼의 index번호 (displayableColumns 기준)
      fieldCount number

      붙여넣기한 필드의 갯수
      rowCount number

      붙여넣기한 행의 갯수. 사용자가 넣으려 한 데이터의 갯수이며 pasteEditEndJsFunction에 의한 제한된 경우 실제 입력된 데이터는 이 보다 작을 수 있습니다.
      rowIndex number

      붙여넣기가 시작된 행의 index번호
      Since:
      • 5.0
      See:

      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

      이벤트 반영후 스크롤 위치

      sort

      컬럼의 정렬이 수행될 때 발생합니다.

      Type:
      • Event
      Properties:
      Name Type Description
      columnIndex number

      정렬을 수행하는 컬럼의 index번호
      dataField string

      정렬이 수행되는 필드명
      multiColumnSort boolean

      다중정렬 여부