rMateGridH5 6.0

Class: DataGridColumn

DataGridColumn

new DataGridColumn()

그리드에서 컬럼을 설정할 때 사용하는 컴포넌트입니다.

컬럼의 표시여부와 관계없이 하나의 컬럼에 대해 하나의 DataGridColumn이 설정됩니다.

데이터에는 컬럼에 표시되지 않는 속성이 포함될 수 있으며, 표시되지 않는 속성을 위해 DataGridColumn을 설정할 필요는 없습니다.

DataGridColumn에는 해당 컬럼의 셀에 대한 글씨색, 배경색등의 스타일 요소와 수정가능여부, 정렬가능여부, 넓이 조정 가능여부, 헤더에 표시할 문자열 등등의 속성을 적용할 수 있습니다.

(DataGridColumn에는 컬럼 관련 정보만을 저장할 뿐, 컬럼의 셀들을 포함하고 있지는 않습니다)

See:
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

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 객체

copyWithItemRendererDataProviderboolean

copy시 itemRendererDataProvider 또는 itemRendererDataProviderField에 의한 값 변환을 할지 여부.

false로 설정하면 데이타의 원본값을 copy 합니다.

Since:
  • 3.5
Default Value:
  • true
See:

dataFieldstring

데이터에서 해당 컬럼이 표현할 데이터의 필드명.

XML의 attribute로 있는 자료를 필드에 넣을 경우에는 attribute명 앞에 @를 붙여서 넣어줍니다

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

dataTipFieldstring

데이터팁(툴팁)으로 표시할 데이터의 필드명.

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

dataTipJsFunctionfunction

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

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

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

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

function dataTipJsFunction(item, value, column)
  - item : 해당 행의 data 객체
  - value : 해당 셀의 라벨
  - column : 해당 셀의 컬럼을 정의한 Column 객체

defaultWidthnumber

컬럼의 기본 넓이.

DataGrid의 horizontalScrollPolicy 속성이 off 이거나 lastColumnWidthPolicy 속성이 balance일 경우, 컬럼의 width가 설정되어 있지 않으면, 컬럼의 크기를 조정할 때 참조하여 폭의 비율을 맞출 수 있게 됩니다.

Since:
  • 3.5
Default Value:
  • 100
See:

draggableboolean

컬럼의 순서 재조정 가능여부.

DataGrid의 draggableColumns 속성이 true로 설정되어야만 적용됩니다

Default Value:
  • true
See:

editableboolean

컬럼의 수정 가능 여부.

DataGrid의 editable 속성이 true일 때만 적용됩니다.

Default Value:
  • true
See:

editorDataFieldstring

itemEditor 사용시 수정이 완료된 경우, itemEditor에서 결과를 받아 올 속성명.

CheckBoxEditor나 CheckBoxItem 사용시에는 "selected"를 설정해야 하고,
ComboBoxEditor나 DynamicComboBoxEditor 사용시에는 "selectedDataField"를 설정해 줍니다.

Default Value:
  • "text"

editorPropertiesobject string

컬럼의 셀 편집시 사용할 itemEditor에 적용할 속성.

레이아웃에서 JSON 형식으로 넣을 경우에는 Object로 변환하여 적용하고, 문자열로만 넣을 경우에는 자바스트립트에서 해당 문자열의 변수를 찾아 적용하게 됩니다.

자바스크립트에서 값을 넣을 때는 설정하려는 값들을 Object로 만들어 설정해야 합니다.

설정 가능한 속성은 itemEditor에 설정한 컴포넌트의 속성을 참고하시기 바랍니다.

Since:
  • 3.5
See:

editorUsesEnterKeyboolean

itemEditor 사용시 엔터키를 사용하여 수정을 완료 시킬지에 대한 선택값.

true로 설정시 itemEditor에서 Enter키를 눌러도 셀 수정완료로 처리되지 않고 itemEditor 내부의 Enter키로 적용됩니다.

Default Value:
  • false

exportWithItemRendererDataProviderboolean

export시 itemRendererDataProvider 또는 itemRendererDataProviderField에 의한 값 변환을 할지 여부.

false로 설정하면 데이타의 원본값을 export 합니다.

Since:
  • 3.5
Default Value:
  • true
See:

externalEditorBeginningJsFunctionfunction

셀을 편집할 때 외부 javascript 컴포넌트를 사용하여 편집할 경우 편집용 셀을 만들기 위한 준비가 완료되면 불려지는 콜백함수.

이는 외부 javascript library를 이용하여 원하는 편집 컴포넌트를 자바스크립트로 만들 수 있게 합니다.

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

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

function externalEditorBeginningFunction(rowIndex, columnIndex, inputElement, inputElementID, item, dataField, value, column)
  - rowIndex : 해당 행의 index번호
  - columnIndex : 해당 열의 index번호
  - editorElement : 편집을 위해 생성된 element 객체
  - editorElementID : 편집을 위해 생성된 element 의 id
  - item : 해당 행의 data 객체
  - value : 해당 셀의 라벨
  - column : 해당 셀의 컬럼을 정의한 Column 객체

falseValuestring

컬럼이 editable이고 CheckBoxEditor, CheckBoxItem, CheckBoxHeader등 CheckBox를 사용할 경우 CheckBox에서 사용되는 falseValue를 지정합니다.

(가령 데이터가 Y/N으로 되어 있고 체크박스를 통해 에디팅하려는 경우 trueValeu를 "Y"로, falseValue를 "N" 설정하면 데이터에 맞춰 수정이 일어나게 됩니다)

Default Value:
  • null

filterableboolean

컬럼에 대한 필터링 가능 여부.

true일 경우 컬럼 헤더에 필터링 아이콘이 표시되며, 클릭시에 필터링을 설정할 수 있는 창이 열리게 되어 컬럼에 대한 필터링을 할 수 있게 됩니다.

열린 창에 필터링할 문자열을 넣으면 필터링이 설정되고, 문자열을 없애면 필터링이 해제되게 됩니다.

단 컬럼에 dateField가 설정되지 않은 경우에는 이 속성은 작동하지 않으며, GridRoot의 setFilterFunction기능과 동시에 쓸 수 없습니다.

(데이터가 계층형일 경우 지원되지 않습니다)

Default Value:
  • false

filterCaseInSensitiveboolean

필터링 비교 수행시 대소문자 구분 여부.

true로 설정하면 문자열 비교시 대소문자 구분을 안하고 비교합니다.

이 속성은 filterType이 "none" 또는 "string" 일 경우에만 적용됩니다.

Since:
  • 4.0
Default Value:
  • false

filterFunctionfunction

컬럼에 대한 사용자 정의 필터링 함수.

시스템에서 제공하는 기본 필터링외에 다른 필터링 처리를 원할 경우, 사용자 함수를 설정하여 별도로 필터링을 처리할 수 있습니다.

사용자 함수에서는 전달된 파라메터에 따라 비교한 후 결과로 true를 반환하면 해당 행은 보여지고 false를 반환하면 숨겨지게 됩니다.

Since:
  • 4.0
Example

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

function filterFunction(data, value, operator, filterData, column)
  - data : 해당 행의 data 객체
  - value : 해당 셀의 값
  - operator : 사용자가 선택한 필터링 연산자
  - filterData : 사용자가 입력한 필터링 문자열(또는 숫자) 또는 문자열(또는 숫자)의 배열(filterType이 list 또는 range일 경우)
  - column : 필터가 적용된 컬럼

filterOperatorsArray

컬럼에 대한 필터링 수행시 사용자가 선택 가능한 연산자들.

filterType에 의해 보여지는 필터창에서 ComboBox 또는 List에 표시되는 내용을 설정할 수 있습니다.

표시되는 연산자는 filterType에 따라 다음 형식의 배열로 넣어져야 합니다.

filterType배열 형식
list[     {"label" : "(모두 선택)", "selectAll" : true, "checked" : true},     {"code" : "연산자 코드", "label" : "연산자 명 또는 설명", "checked" : true},     {"code" : "연산자 코드", "label" : "연산자 명 또는 설명", "checked" : true},     {"code" : "연산자 코드", "label" : "연산자 명 또는 설명", "checked" : true},     {"label" : "(필드 값 없음)", "isNull" : true, "checked" : true}, ] - label은 List의 선택가능 옵션으로 표시되며, 필터링 수행시 선택된 code들의 배열이 filterFunction의 filterData로 전달됩니다. - 첫번째 라인과 맨 마지막 라인은 (모두선택)과 (필드 값 없음) 을 표시하기 위한 것으로 필요 없을 경우에는 생략할 수 있습니다.
그외[     {"code" : "연산자 코드", "label" : "연산자 명 또는 설명"},     {"code" : "연산자 코드", "label" : "연산자 명 또는 설명"},     {"code" : "연산자 코드", "label" : "연산자 명 또는 설명"} ]
- label은 ComboBox의 옵션으로 표시되며, 필터링 수행시 code가 filterFunction의 operator로 전달됩니다.
Since:
  • 4.0

filterTypestring

컬럼에 대한 필터 유형.

필터링 수행시 표시되는 창의 모양과 내용을 지정할 수 있습니다.

기본으로는 컬럼의 type이나 포맷터, itemRendererDataProvider, trueValue, falseValue설정에 의해 자동 지정되나, 이 속성에 의해 지정이 된 경우 해당 유형의 화면을 보여주게 됩니다.

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

  • none : 기본이 되는 필터링창으로 필터링할 문자열을 입력할 수 있는 TextInput으로 구성되며, 데이터에 해당 문자열이 포함되어 있으면 보여지게 됩니다.
  • number : 숫자에 대한 연산자를 표시할 ComboBox와 기준이 되는 숫자를 받는 TextInput으로 구성되며, 연산자와 기준 숫자에 따라 데이터가 보여지게 됩니다.
  • date : 날짜에 대한 연산자를 표시할 ComboBox와 기준이 되는 날짜 또는 날짜의 일부 문자열을 받는 TextInput으로 구성되며, 연산자와 기준 문자열에 따라 데이터가 보여지게 됩니다.
  • string : 문자열에 대한 연산자를 표시할 ComboBox와 기준이 되는 문자열을 받는 TextInput으로 구성되며, 연산자와 기준 문자열에 따라 데이터가 보여지게 됩니다.
  • range : 두개의 문자열을 받을 수 있는 TextInput으로 구성되며, 데이터가 범위 안에 들어가면 보여지게 됩니다.
  • itemrendererdataprovider : 컬럼의 itemRendererDataProvider에 있는 내용을 표시하는 ComboBox로 구성되며, 해당 문자열 또는 코드를 가지고 있는 데이터가 보여지게 됩니다.
  • boolean : 컬럼의 trueValue, falseValue에 있는 내용을 표시하는 ComboBox로 구성되며, 해당 값을 가지고 있는 데이터가 보여지게 됩니다.
  • list : 컬럼의 데이터에 나타나는 값을 모두 조사하여 List형식으로 표시하고, 사용자가 체크한 값들을 보여지게 합니다.
Since:
  • 4.0

formatterobject

숫자나 통화, 날짜 등의 포맷터.

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

headerColSpannumber

컬럼헤더의 병합 컬럼수.

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

headerLabelJsFunctionfunction

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

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

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

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

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

headerRendererobject

컬럼의 헤더에 컴보박스나 html을 표현하고자 하는 경우 해당 컴포넌트명을 지정합니다.

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

column.setHeaderRenderer(gridRoot.newFactoryInstance("ComboBoxHeader"));

가능한 컴포넌트명은 다음과 같습니다.

  • CheckBoxHeader : 체크박스로 컬럼의 전체 값을 변경할 수 있는 기능을 가진 헤더 렌더러
  • ComboBoxHeader : 콤보박스로 선택할 수 있는기능을 가진 헤더 렌더러
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getHeaderRenderer(), setHeaderRenderer(value)

headerRendererDataProviderobject

컬럼의 headerRenderer에 적용할 dataProvider 값.

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

headerRendererLabelFieldstring

컬럼의 headerRenderer에 headerRendererDataProvider를 적용할 경우 라벨 필드명.

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

headerTextstring

컬럼의 헤더 텍스트

지정하지 않을 경우 헤더에는 dataField가 사용됩니다.

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

headerWordWrapboolean

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

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

indexStartNonumber

itemRenderer를 IndexNoItem로 사용할 경우 표시되는 인덱스 번호의 시작번호

Default Value:
  • 1

itemEditorobject

컬럼에 표현되는 셀을 수정할 경우, 사용할 에디터를 지정할 경우 해당 객체의 컴포넌트명을 지정합니다.

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

column.itemEditor = gridRoot.newFactoryInstance("ComboBoxEditor");

가능한 컴포넌트명은 다음과 같습니다.

  • AutocompleteTextInput : 브라우저의 자동완성(autocomplete) 기능이 제공되는 문자열 입력 에디터 (브라우저의 자동완성 기능을 켜줘야 사용가능합니다)
  • CheckBoxEditor : 체크박스를 표현하는 에디터
  • ComboBoxEditor : 콤보박스를 표현하는 에디터
  • DateEditor : 날짜를 수정하는 에디터
  • DynamicComboBoxEditor : 표시되는 list를 선택가능한 콤보박스를 표현하는 에디터
  • ExComboBoxEditor : 사용자가 문자열을 편집가능한 콤보박스를 표현하는 에디터
  • ExternalInputEditor : 외부 자바스크립트 컴포넌트를 이용하여 편집하는 에디터(input element 사용)
  • ExternalEditor : 외부 자바스크립트 컴포넌트를 이용하여 편집하는 에디터(div element 사용)
  • MonthEditor : 년월을 선택할 수 있는 에디터
  • NumericStepper : 정해진 범위낸의 숫자를 수정하는 에디터
  • TextArea : 여러줄의 문자열을 입력할 수 있는 에디터
See:

itemRendererobject

컬럼에 표현되는 셀에 이미지나 아이콘등등을 표현하고자 하는 경우 원하는 렌더러 컴포넌트명을 지정합니다.

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

column.setItemRenderer(gridRoot.newFactoryInstance("ComboBoxItem"));


지정 가능한 렌더러 컴포넌트명은 다음과 같습니다.

  • HtmlItem : html을 표현하는 렌더러
  • HtmlEditableItem : html을 표현하는 편집가능 렌더러
  • DataProviderItem : itemRendererDataProvider 에 설정된 값에서 표시할 라벨을 찾아 표현하는 렌더러
  • IconItem : icon을 포함한 문자열을 표현하는 렌더러
  • ImageItem : 이미지를 표현하는 렌더러
  • IndexNoItem : 행 번호를 표현하는 렌더러 (사용할 경우 dataField를 설정할 필요는 없으며, 편집은 무의미하므로 editable을 false 처리하여 편집이 안되도록 합니다)
  • CheckBoxItem : 체크박스를 표현하는 렌더러 (데이터를 직접 수정하게 되며, 수정모드, doubleClickEnabled이 false일 경우에 한해 변경내역이 관리되게 됩니다)
  • ComboxItem : 콤보박스를 표현하는 렌더러 (데이터를 직접 수정하게 되며, 수정모드, doubleClickEnabled이 false일 경우에 한해 변경내역이 관리되게 됩니다)
  • TextAreaItem : 여러줄의 텍스트를 표현하는 렌더러 (데이터에서 줄바꿈 문자(carriage return)을 br태그로 변환하여 표시합니다)
  • EditableIconItem : 수정가능할 경우 수정 가능icon을 포함한 문자열을 표현하는 렌더러
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getItemRenderer(), setItemRenderer(value)

itemRendererDataFieldstring

itemRenderer에 itemRendererDataProvider나 itemRendererDataProviderField를 적용할 경우 데이터가 라벨과 코드데이터형식으로 되어있을때 코드를 나타내는 데이터 필드명.

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

itemRendererDataProviderobject

itemRenderer에 dataProvider속성이 있을 경우 dataProvider에 적용할 데이터.

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

itemRendererDataProviderFieldstring

itemRenderer에 dataProvider속성이 있고 dataProvider에 적용할 데이터가 그리드 데이터의 특정 필드로 들어 있을 경우 해당 필드명.

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

itemRendererLabelFieldstring

itemRenderer에 itemRendererDataProvider나 itemRendererDataProviderField를 적용할 경우 해당 데이터의 라벨 필드명.

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

labelJsFunctionfunction

셀에서 표시할 라벨의 콜백함수.

이는 셀의 표시 내용을 자바스크립트로 조작할 수 있게 합니다.

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

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

function labelFunction(item, value, column, callByExport)
  - item : 해당 행의 data 객체
  - value : 해당 셀의 라벨
  - column : 해당 셀의 컬럼을 정의한 Column 객체
  - callByExport : export 실행에 의해 불려졌는 지 여부 - 5.0 버전부터 지원됩니다.

minWidthnumber

컬럼의 최소 넓이.

그리드의 최소넓이는 컬럼들의 최소 넓이들의 합이 되며, 그리드의 표시영역이 이 크기보다 작아지면 안 보여지는 컬럼이 생길 수 있습니다.

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

rendererIsEditorboolean

렌더러로 사용되는 객체가 에디터로도 사용될지 여부.

렌더러를 CheckBoxItem 이나 ComboBoxItem 을 사용할 경우에 true로 설정하여 렌더러를 통해 수정을 할 수 있도록 합니다.

Default Value:
  • false

resizableboolean

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

DataGrid의 resizableColumns 속성이 true일 때만 적용됩니다.

Default Value:
  • true
See:

secondDataFieldstring

컬럼 표현에 필요한 두번째 데이터 필드명.

itemRenderer에 IconItem, EditableIconItem을 사용하면, 조건에 따라 표시할 아이콘을 나타내는 데이터 필드명을 지정할 수 있으며

ComboBoxItem 또는 CheckBoxItem을 사용할 경우에는, 필드값(true/false)에 따라 표시된 객체의 enabled 속성을 조작할 수 있는 데이터 필드명을 지정할 수 있습니다.

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

secondLabelFunctionfunction

셀의 표현에 필요한 두번째 데이터를 계산할 콜백함수.

itemRenderer에 IconItem, EditableIconItem, IndexNoItem을 사용하면, 렌더러에서 표시할 아이콘 또는 인덱스 번호를 자바스크립트에서 조작할 수 있게 되며되며

ComboBoxItem 또는 CheckBoxItem을 사용할 경우에는, 반환값(true/false)에 따라 표시된 객체의 enabled 속성을 조작할 수 있게 됩니다.

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

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

function secondLabelFunction(item, value, column)
  - item : 해당 행의 data 객체
  - value : 해당 셀의 라벨 - IndexNoItem를 사용할 경우에는 row index 번호
  - column : 해당 셀의 컬럼을 정의한 Column 객체

showDataTipsboolean

셀에 데이터팁을 표시할지 여부.

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

showEditableIconstring

수정가능한 컬럼에 대해 editableIcon을 표시할 지 여부.

mouseover, always, none 이 가능하며 mouseover일 경우에는 마우스가 롤오버될 경우에만 icon을 표시하고, always일 경우에는 항상 표시되게 되며, none이나 값이 없을 경우 표시하지 않게 됩니다.

이 속성을 사용하려면 컬럼의 itemRenderer가 EditableIconItem이어야 합니다.

표시되는 icon을 변경하려면 스타일의 editableIcon에 설정하시면 되며 기본 icon은 editable입니다.

Default Value:
  • "mouseover"

sortableboolean

컬럼의 정렬 가능 여부.

DataGrid의 sortableColumns 속성이 true일 때만 적용됩니다.

Default Value:
  • true
See:

sortCompareFunctionstring

컬럼 정렬시 사용할 비교함수 명.

지정하기 않을 경우 데이터의 종류에 따라 숫자나 문자열 정렬을 하게 됩니다.

적용가능한 함수는 다음과 같습니다.

  • numericSort : 데이터가 XML이면서 숫자인 경우 문자열 정렬이 되므로 이를 피해야 할 경우 적용하여 숫자에 의한 정렬이 수행되도록 합니다.
  • firstGroupingSort : 그룹핑 기능을 사용하며 정렬을 할 경우, 합산결과를 맨위에 표시하도록 합니다.
  • lastGroupingSort : 그룹핑 기능을 사용하며 정렬을 할 경우, 합산결과를 맨아래에 표시하도록 합니다.
  • firstNumericGroupingSort : 그룹핑 기능을 사용하며 정렬을 할 경우, 합산결과를 맨위에 표시하도록 합니다. (데이터가 XML일 경우)
  • lastNumericGroupingSort : 그룹핑 기능을 사용하며 정렬을 할 경우, 합산결과를 맨아래에 표시하도록 합니다. (데이터가 XML일 경우)
Default Value:
  • null
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getSortCompareFunction(), setSortCompareFunction(value)

sortDescendingboolean

현재 컬럼의 정렬이 내림차순인지 오름 차순인지를 나타냅니다.

false일 경우 오름차순, true일 경우 내림차순입니다.

Default Value:
  • false

spanableboolean

span(병합)기능 사용 여부.

DataGrid의 dataProvider에 Span류의 collection을 사용할 때 적용됩니다.

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

styleJsFunctionfunction

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

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

(단. backgroundColor 등 배경에 대한 서식은 SpanCellAttribute기능을 사용해야 합니다)

엑셀 내보내기시에는 다음 스타일만 적용됩니다.

  • fontSize : 글씨 크기
  • fontWeight : 글씨 굵기
  • fontStyle : 글씨 모양(italic)
  • textDecoration : 밑줄 (취소선은 지원되지 않습니다)
  • color : 글씨 색상
  • fontFamily : 글꼴명
  • textAlign : 좌우 정렬
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getStyleFunction(), setStyleFunction(value)
Example

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

function styleJsFunction(item, column)
  - item : 해당 행의 data 객체
  - column : 해당 셀의 컬럼 객체

trueValuestring

컬럼이 editable이고 CheckBoxEditor, CheckBoxItem, CheckBoxHeader등 CheckBox를 사용할 경우 CheckBox에서 사용되는 trueValue를 지정합니다.

(가령 데이터가 Y/N으로 되어 있고 체크박스를 통해 에디팅하려는 경우 trueValeu를 "Y"로, falseValue를 "N" 설정하면 데이터에 맞춰 수정이 일어나게 됩니다)

Default Value:
  • null

truncateToFitboolean

셀의 크기가 텍스트보다 작은 경우, 텍스트를 적당한 크기로 자르고 "..." 를 붙이는 것을 적용할 지 여부.

적용된 itemRenderer 종류에 따라 적용이 안 될 수 있습니다.

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

visibleboolean

컬럼의 가시성 여부.

false로 처리할 경우 화면에 표시되지 않으며, Excel export 시에는 숨겨진 컬럼으로 처리됩니다.

데이터의 특정 필드를 사용하기 위해 안 보여지는 컬럼을 DataGrid에 포함 시킬 필요는 없습니다. (즉 데이터 레코드의 개별 필드는 컬럼 지정여부와 무관하게 행 제어시 접근할 수 있습니다)

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

widthnumber

컬럼의 넓이.

설정하지 않을 경우 기본으로 100이 적용되며, 넓이가 고정되지 않은 컬럼으로 인식하게 됩니다.

horizontalScrollPolicy가 "off"로 설정될 경우에는 그리드 표시영역에 따라 표시되는 컬럼의 넓이가 줄거나 커질 수 있습니다.

horizontalScrollPolicy가 "auto"일 경우에는 DataGrid의 lastColumnWidthPolicy 속성 설정에 따라 맨 마지막 컬럼 또는 마지막에 표시되는 컬럼들의 크기가 조정되어 표시될 수 있습니다.

이때 자동으로 조정되는 컬럼은 width가 지정되지 않았고 resizable속성이 true인 컬럼부터 조정하게 되며, 고정된 컬럼(width가 설정된 컬럼)과 컬럼의 최소크기(minWidth)의 합이 그리드의 표시영역을 넘을 때는 모든 컬럼에 대해 넓이가 조정됩니다.

pixel단위로 적용됩니다.

Default Value:
  • 100
See:

wordWrapboolean

컬럼 셀들의 줄바꿈 여부.

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

Methods

addEventListener(type, listener)

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

Name Type Description
type string

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

이벤트 발생시 불려질 함수

clearStyle(styleProp)

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

Name Type Description
styleProp string

스타일 속성명

dataProviderToLabel(data, label){string}

컬럼에 itemRendererDataProvider나 itemRendererDataProviderField가 설정되어 있을 경우 값을 변환하여 반환합니다.

itemRendererDataProvider나 itemRendererDataProviderField가 설정되지 않았거나 매칭되는 값이 없어 변환이 안될 경우에는 전달된 값이 그대로 반환됩니다.

Name Type Description
data object

데이터 객체 (해당 row의 데이터)
label object

변환하려는 값 (라벨로 변환하려는 코드값)
Returns:
Type Description
string 변환된 문자열

getSizeStyle(styleProp){Number}

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

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

Name Type Description
styleProp string

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

getStyle(styleProp)

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

스타일에 등록되어 있는 값, 없을시 null값을 반환합니다.

Name Type Description
styleProp string

스타일 속성명

itemToLabel(data, withFormatting){string}

데이터에서 화면에 표시할 라벨을 추출하여 반환합니다.

labelJSFunction이 설정되어 있으면 적용하여 반환하며, 아닐 경우 dataField에 설정된 속성을 찾아 반환합니다.

계산된 결과가 없거나 문자열로 변환이 안되면 한개의 공백가 들어있는 문자열이 반환됩니다.

컬럼에 itemRendererDataProvider나 itemRendererDataProviderField가 설정되어 있고 변환이 필요한 경우, dataProviderToLabel 함수를 사용하여 변환합니다.

Name Type Description
data object

데이터 객체
withFormatting boolean

컬럼에 포맷터가 적용되어 있을 경우 포맷터를 적용할 지 여부, 기본값 true
Returns:
Type Description
string 추출된 라벨 문자열 - 반환값이 없으면 " "이 반환됩니다.

itemToSecondLabel(data){object}

데이터에서 secondDataField나 secondLabelJsFunction를 적용하여 값을 추출하여 반환합니다.

secondDataField나 secondLabelJsFunction가 설정되지 않았거나 계산된 결과가 없거나 문자열로 변환이 안되면 null이 반환됩니다.

Name Type Description
data object

데이터 객체
Returns:
Type Description
object 추출된 객체 - 반환값이 없으면 null이 반환됩니다.

removeEventListener(type, listener)

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

Name Type Description
type string

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

이벤트 발생시 불려질 함수

setPxStyle(styleProp, newValue)

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

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

Name Type Description
styleProp string

스타일 속성명
newValue Number

스타일에 등록할 값

setStyle(styleProp, newValue)

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

Name Type Description
styleProp string

스타일 속성명
newValue *

스타일에 등록할 값

Styles

backgroundColorcolor

배경색을 나타냅니다.

colorcolor

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

cursorstring

열의 셀위에 표시되는 마우스 커서를 지정합니다.

(유효값 : CSS에서 지원하는 cursor)

Default Value:
  • "default"

editableIconstring

itemRender가 EditableIconItem일 경우 렌더러에서 보여줄 icon을 지정합니다.

선택 가능한 아이콘은 샘플폴더 rMateGridH5/Assets/icons 폴더에 있으며 이미지의 파일명에서 확장자를 빼고 넣으면 됩니다.

Icon 이미지의 path는 기본으로 "../rMateGridH5/Assets/"설정되어 있으며 jsVars = "assetsPath=경로"의 방식이나 rMateGridH5.setAssetsPath("경로")의 방식으로 원하는 icons 이미지 경로를 변경하여 설정할 수 있습니다.

Default Value:
  • "editable"

fontFamilystring

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

fontSizestring

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

fontStylestring

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

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

fontWeightstring

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

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

headerStyleNamestring

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

horizontalAlignstring

헤더의 수평정렬 지정.

(유효값 : "left","right","center")

Default Value:
  • "center"

iconstring

itemRender가 IconItem일 경우 렌더러에서 보여줄 icon을 지정합니다.

선택 가능한 아이콘은 샘플폴더 rMateGridH5/Assets/icons 폴더에 있으며 이미지의 파일명에서 확장자를 빼고 넣으면 됩니다.

Icon 이미지의 path는 기본으로 "../rMateGridH5/Assets/"설정되어 있으며 jsVars = "assetsPath=경로"의 방식이나 rMateGridH5.setAssetsPath("경로")의 방식으로 원하는 icons 이미지 경로를 변경하여 설정할 수 있습니다.

시스템에서 기본으로 제공하는 icon명은 다음과 같습니다.

  • Magnifier : 돋보기
  • Plus : 플러스 기호
  • Minus : 마이너스 기호
  • FolderOpen : 열린 폴더 모양
  • FolderClosed : 닫힌 폴더 모양
  • Arrow : 우측 방향 화살표
  • DownArrow : 아래 방향 화살표
  • Reguired : 빨간색 별표시
  • Diskette : 디스켓 표시
  • Node : 도큐먼트 모양 표시
  • imgBtn : 이미지 버튼 모양
  • favorBtn : 즐겨찾기 아이콘 모양
  • check : 체크 표시 모양

iconPlacementstring

itemRender가 IconItem 나 EditableIconItem일 경우 icon의 위치를 지정합니다.

(유효값 : "left","right")

Default Value:
  • "left"

letterSpacingstring

각각의 글자(character) 사이의 추가적인 공간을 지정합니다.

maxCharsnumber

입력 최대 글자수

paddingLeftstring

컬럼 셀의 왼쪽 여백을 나타냅니다.

Default Value:
  • 8px

paddingRightstring

컬럼 셀의 오른쪽 여백을 나타냅니다.

Default Value:
  • 8px

separatorColorcolor

헤더의 정렬 아이콘 표현시 텍스트와 정렬 아이콘 사이 줄의 색상

Default Value:
  • "#CCCCCC"

textAlignstring

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

(유효값 : "left","right","center")

Default Value:
  • "left"

textDecorationstring

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

(유효값 : "none","underline")

textIndentnumber

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

Default Value:
  • 0

typestring

입력될 값의 형식.

설정하지 않을 경우 입력값을 조사하여 숫자면 JavaScript Number로 변환하고(단 0으로 시작하는 숫자는 변환 안함) 아니면 문자열 처리합니다.

(유효값 : "int","float","string")

verticalAlignstring

헤더의 수직 정렬.

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

Default Value:
  • "middle"

Events

headerListChange

컬럼의 headerRender가 ComboBoxHeader인 경우 사용자가 콤보박스의 내용을 바꾸면 발생합니다.

Type:
  • Event
Properties:
Name Type Description
columnIndex number

클릭한 헤더의 컬럼 index번호
itemRenderer object

ComboBoxHeader 객체
rowIndex number

ComboBox내에서 사용자가 선택한 행의 index번호

itemIconClick

컬럼의 itemRenderer가 IconItem인 경우 사용자가 아이콘을 클릭하면 발생합니다.

Type:
  • Event
Properties:
Name Type Description
columnIndex number

클릭한 컬럼의 index번호
rowIndex number

클릭한 행의 index번호

itemImageClick

컬럼의 itemRenderer가 ImageItem인 경우 사용자가 이미지를 클릭하면 발생합니다.

Type:
  • Event
Properties:
Name Type Description
columnIndex number

클릭한 컬럼의 index번호
rowIndex number

클릭한 행의 index번호