realgrid package

Classes

Abstract Classes

Enumerations

Interfaces

Type Aliases

Enumerations Desc

BarOrigin

BarCellRenderer 의 바의 위치

Members:

Example:

column.renderer = {
     "type": "bar",
     "origin":"right"
}

ButtonVisibility

컬럼에 버튼이 설정된 경우, 데이터 셀에 컬럼 버튼과 편집 버튼을 표시하는 방법

Members:

Remarks:

ValueColumn의 buttonVisibility 속성과 editButtonVisibility 속성에 사용된다.

Example:

// 컬럼 버튼
column.buttonVisibility = false;
 
// 편집기의 버튼
column.editButtonVisibility = false;

CalendarMode

년도, 월, 일 선택화면의 제한을 설정한다.

Members:

Remarks:

년-월 또는 년도만 선택할때 사용한다.

CellButton

데이터 셀의 우측에 표시할 버튼 종류

Members:

Remarks:

ValueColumn.button 에서 사용된다.

Example:

column.button = 'popup';

CellLayoutType

layout의 type을 지정한다.

Members:

Remarks:

GridBase.addLayout() 또는 CellLayoutGroupItem.addLayout() 을 이용해서 Layout을 추가할때 layout의 type을 지정한다.

ColumnHeaderItemLocation

컬럼 헤더의 이미지나 체크 박스의 위치 유형

Members:

Remarks:

ColumnHeader.checkLocation 에서 사용된다.

Example:

let col = grid.columnByName('col1')
col.header.checkLocation = 'leftEdge';

ColumnLayoutDirection

Cell Layout 설정 시 배치 방향

Members:

Remarks:

CellLayoutGroupItem.direction 에서 사용된다.

DataDropMode

데이터 drop 시 모드

Members:

DataFillMode

데이터 채우기 방법

Members:

Remarks:

DataFillOptions.fillMode 에서 사용한다.

DefaultShowDate

달력 편집기를 사용할 때, 달력에 표시되는 날짜 유형

Members:

Remarks:

DateCellEditor 에서 사용된다.

Example:

column.editor = { type: "date", maxLength: 6, yearNavigation: true, defaultShowDate: 'today' }

DragFeedbackStyle

mouse가 over 될때 drop 되는 위치를 보여주는 feedback의 style

Members:

DropDownPosition

DropDownCellEditor 의 목록 또는 DateCellEditor, BTDateCellEditor 달력 선택 상자의 위치

Members:

Example:

column.editor = {
		type: 'list',
		values: ['value1', 'value2'],
		dropDownPosition: 'editor'
}

DropDownSortStyle

DropDownCellEditor 목록의 정렬 방식

Members:

Example:

column.editor = {
		type: 'list',
		values: ['value1', 'value2'],
		itemSortStyle: 'descending'
}

DropDownValueLabel

DropDownCellEditor 의 목록을 보여주는 방법

Members:

Example:

column.editor = {
		type: 'list',
		values: ['value1', 'value2'],
		labels: ['label1', 'label2'],
		displayLabels: 'valueLabel'
}

EdgeMark

edgeMark

Members:

Remarks:

ValueColumn.edgeMark에서 사용된다.

Example:

column.edgeMark = "leftTop"

ExitGridWhenTab

tab 입력 시 그리드를 벗어나기 위한 조건

EditOptions.exitGridWhenTab 에서 설정 가능하다.

Members:

Example:

grid.editOptions.exitGridWhenTab = 'grid';

ExpanderVisibility

행 그룹핑 시 Expander 표시여부

Members:

Remarks:

RowGroup.mergeExpanderVisibility 에서 사용된다.

Example:

gridView.rowGroup.mergeExpanderVisibility = 'always';

ExportCompression

파일을 생성할때 압축여부

Members:

ExportLayoutExpand

layout Expandable이 true인 layut을 excel로 export할때

Members:

ExportTarget

그리드를 외부 문서로 내보내기 할 때의 대상

Members:

ExportType

그리드를 외부 문서로 내보내기 할 때의 종류

Members:

Remarks:

ExportBaseOptions.type 에서 사용된다.

FilterMode

데이터 수정 이후 필터 동작 모드

Members:

Remarks:

GridView.filterMode 에서 사용된다.

Example:

gridView.filterMode = 'explicit';

FocusMoveStep

columnGroup이 있을때 왼쪽화살표 또는 오른쪽 화살표를 입력했을때 focus이동 방식

Members:

FocusType

focus를 layer형태로 표시하거나 테두리만 표시한다.

DisplayOptions.focusType 에서 설정 가능하다.

Members:

GridCellType

그리드의 셀 종류

Members:

Remarks:

ClickData 등에서 사용된다.

Example:

gridView.onMenuItemClicked =  function (grid, item, clickData) {
     console.log(item.label + "was clicked.");
     console.log("cellType is: " + clickData.cellType);
};

GridFitStyle

컬럼들의 표시 방식을 조정하는 상수

Members:

Remarks:

DisplayOptions.fitStyle 등에서 쓰인다.

Example:

grid.displayOptions.fitStyle = 'even'

GroupShowMode

그룹컬럼을 접거나 펼쳤을때 보여질것인가를 결정한다.

CellLayoutItem.groupShowMode에서 설정한다.

Members:

Remarks:

상위 layout의 expand상태에 따라서 보이거나 숨도록 한다.

HandleVisibility

핸들의 표시 방법

Members:

Remarks:

소팅(sorting), 필터링(filtering) 시 컬럼 헤더에 표시되는 기능 아이콘을 핸들(Handle)이라고 한다.

HandleVisiblity는 SortingOptions, FilteringOptions 의 handleVisibility 속성으로 구현되어 있다.

Example:

grid.sortingOptions.handleVisibility = 'visible';

IconLocation

렌더링하는 아이콘, 체크박스, 도형 등의 위치

Members:

Remarks:

IconCellRenderer, CheckCellRenderer, ShapeCellRenderer 에서 사용된다.

Example:

...
"renderer": {
         "type": "check",
         "checkLocation": "right"
     },
...

IndicatorValue

인디케이터에 표시될 내용 종류

Members:

InlineFilterOperator

FilterPanel에서 사용할수 있는 연산자의 종류이다.

Members:

Remarks:

DataColumn.valueType에 따라서 사용할수 있는 연산자에 제한이 있다.

ItemState

아이템의 상태

Members:

ItemType

그리드에서 아이템의 종류

Members:

Remarks:

getModelAs() 등에서 사용한다.

Example:

let model = gridView.getModelAs(3, 'row');

LayoutDirection

item의 배치방향

Members:

MenuItemType

PopupMenu 등에 표시되는 메뉴 항목의 유형

Members:

Remarks:

PopupMenuItem.type 과 MenuItem.type 에서 사용된다.

Example:

let menu = [{
     label: "menu3 입니다",
     type: "check",
     checked: true,
 }]

NullsOrder

정렬할때 undefined, null ''을 오름차순, 내림차순에 관계없이 상단 또는 하단에 위치시킨다.

SortingOptions.nullsOrder에서 설정한다.

Members:

PolygonShape

ShapeCellRenderer 에서 사용 가능한 도형 목록

Members:

Example:

column.renderer = {
    "type": "shape",
    "shape": "triangle" // PolygonShape
}

RefreshMode

그리드를 다시 그릴 때 필요한 상수

Members:

Remarks:

DisplayOptions.refreshMode 에서 사용한다.

Example:

grid.displayOptions.refreshMode = 'visibleOnly';

RestoreMode

복원 모드 종류

Members:

RowGroupAdornments

행 그룹 상태일 때 헤더나 푸터의 표시 방법

Members:

Remarks:

RowGroup.collapsedAdornments, RowGroup.expandedAdornments 에서 사용된다.

Example:

grid.setRowGroup({expandedAdornments: "none"});

RowMaskType

선택 된 행의 표시 형태 (행의 마스크 종류)

Members:

Remarks:

rowBlockType, rowHoverType, rowFocusType 등에서 사용된다.

Example:

grid.displayOptions.rowBlockCallback = f;
grid.displayOptions.rowBlockType = 'row';

RowState

행의 상태

Members:

ScrollOnEditing

편집 중 일때 스크롤 시 처리 상태

Members:

Remarks:

EditOptions.scrollOnEditing 에서 설정 가능하다.

Example:

grid.editOptions.scrollOnEditing = 'cancel';

SelectionDisplay

셀 선택 디스플레이

Members:

Remarks:

개발 중...

SelectionMode

셀 선택 영역에 대한 모드

Members:

Remarks:

DisplayOptions.selectionMode 에서 사용된다.

SelectionStyle

셀 선택 영역에 대한 스타일

Members:

Remarks:

SINGLE, SINGLE_ROW, SINGLE_COLUMN 을 single selection style 이라한다.

DisplayOptions.selectionStyle 에서 사용된다.

RowIndicator.selectable 기능이 정상적으로 작동하려면 DisplayOptions.selectionStyle 이 single selection style 이 아니어야 한다.

DisplayOptions.selectionStyle 이 single selection style 이 아니어야 ctrl key 를 누른 후 컬럼헤더 드래그 시 컬럼 단위 선택 영역이 지정된다.

SortCase

대소문자 구분 유형

Members:

Remarks:

SortingOptions.textCase, orderBy() 등에서 사용된다.

Example:

gridView.orderBy(['fruit'], ['descending'], ['insensitive']);

SortDirection

정렬 방식

Members:

Remarks:

getDistinctValues(), orderBy() 등에서 사용된다.

Example:

gridView.orderBy(['fruit'], ['descending'], ['insensitive']);

SortMode

데이터 수정 이후 정렬 동작 모드

Members:

Remarks:

GridBase.sortMode 에서 사용된다.

Example:

gridView.sortMode = "explicit";

SortStyle

그리드 컬럼 헤더 클릭 시 정렬 유형

Members:

Remarks:

SortingOptions.style 에서 사용된다.

Example:

grid.sortingOptions.style = 'inclusive'

StateMark

상태바의 상태 표시 방법

Members:

SummaryMode

그리드의 각 컬럼의 합계를 계산하는 방식

Members:

Remarks:

GridBase.summaryMode 등에서 설정하여 사용할 수 있다.

Example:

let sum = gridView.getSummary('unitPrice', 'sum');

SummaryType

필드의 합계값을 계산하기 위한 유형

Members:

Remarks:

GridBase.getSummary() 에서 사용된다.

Example:

let sum = gridView.getSummary('unitPrice', 'sum');

SyncGridHeight

조회된 data가 모두 보일수 있도록 그리드의 높이를 변경한다.

Members:

Remarks:

data가 없는 경우 초기 높이로 표시된다. 많은 data가 출력되는 경우 느려지기 때문에 일부 data만 가져온후 더보기 버튼등을 이용해서 data를 추가해야 한다.

TextInputCase

대소문자 형태

Members:

Remarks:

ValueColumn.textInputCase, CellEditor.textCase 등에서 사용된다.

Example:

column.editor = { type: "line", maxLength: 1, textCase: 'lower'}

TimeCategory

시간으로 filtering할때 분류 단위

Members:

Remarks:

FilterAutomatingOptions.timeCategorize에서 사용한다.

TimeSelectType

Members:

TreeExpanderIconStyle

Tree Expander에 표시되는 기본 아이콘의 스타일을 지정한다.

Members:

ValidationLevel

데이터 검증 결과 수준

Members:

Remarks:

GridBase.setValidations() 등에서 쓰인다.

Example:

gridView.setValidations({
     message: 'Too expensive!',
     criteria: "values['UnitPrice'] > 100",
     level: 'error'
})

ValidationMode

검증 방법

Members:

Remarks:

GridBase.setValidations() 등에서 쓰인다.

Example:

gridView.setValidations({
     message: 'Too expensive!',
     criteria: "values['UnitPrice'] > 100",
     mode: 'always'
})

ValueType

데이터 필드의 데이터 자료형

Members:

Remarks:

DataField.dataType 에서 사용될 때는 TEXT, NUMBER, DATETIME, BOOLEAN, OBJECT 으로 사용되며, 적용한 자료형을 제한하고 싶을 때에는 DataField.subType 에 다음과 같이 부여 가능하다.

dataType 이 TEXT: CHAR

dataType 이 NUMBER: INT, UNUM, UINT

dataType 이 DATETIME: DATE

Example:

let fields = [{
...
     dataType: "text",
     subType: "char",
...
}]
 
ds.setFields(fields);

VerticalMoveStep

direction이 vertical인 ColumnGruop의 하위 컬럼에서 위화살표 또는 아래화살표를 입력했을때 focus이동 방식.

Members:

Type Aliases Desc

BooleanOutputCallback

boolean 필드 변환시 수행 될 콜백함수 형식

Remarks:

DataOutputOptions.booleanCallback 에서 사용된다.

[매개변수 목록]

ds - DataProvider 컨트롤

row - 아이템의 인덱스

field - 필드명

value - 값

[반환값] - 출력할 값

Example:

const f = function(ds, row, field, value) {
     return !!value;
}

CategoryCallback

자동 필터링 시 사용자 지정 분류를 위한 콜백 형식

Remarks:

[매개변수 목록]

column - 자동 필터링이 걸려있는 컬럼

values - 전체 값들

[반환값] - 카데고리 분류 모델의 배열 형태

Example:

const f = function(column, values) {
     const emptyText = '빈 아이템'
     if (!values) {
         return null;
     }
     const valids = values.filter(function (el) { return el != undefined && el != null; });
     const min = Math.min.apply(null, valids);
     const vlen = values.length;
     let unit;
     if (vlen > 15) {
         const groupCount = Math.min(Math.round(vlen / 5)), 10);
         unit = Math.round(vlen / groupCount);
     } else {
         unit = 1;
     }
     let categories = [];
     let gvals = [];
     let gindex = 0;
     let gmin = min;
     let isEmpty = false;
     for (let i = 0; i < vlen; i++) {
         const v = values[i];
         if (v === undefined || v === null) {
             isEmpty = true;
             continue;
         }
         if (i == gindex + unit || i === vlen - 1) {
             categories.push({ text: gmin + ' ~ ' + v, values: gvals });
             gvals = [v];
             gindex = i;
             gmin = v;
         } else {
             gvals.push(v);
         }
     }
     if (isEmpty) {
         categories.push({ text: emptyText, empty: true });
     }
     return categories;
}

CellSpanCallback

사용자 지정의 cell spanning을 설정하기 위한 콜백

Remarks:

CellLayoutColumnItem 에서 사용된다.

[매개변수 목록] grid - GridBase 컨트롤

layout - 레이아웃 아이템

itemIndex - 행의 인덱스

Example:

const f = function (grid, layout, itemIndex) {
    var value = grid.getValue(itemIndex, layout.column.dataIndex);
    if (value) {
        return value[0] === "B" ? 3 : value[0] === "F" ? 2 : 1;
    }
    return 1;
};

CellStyleCallback

동적 셀 스타일 변경을 위한 콜백

Remarks:

ColumnStyleObject 를 반환 할 때는 GridBase.setCellStyleCallback(), ValueColumn.styleCallback 에서 사용한다.

ColumnSummaryStyleObject 를 반환 할 때는 GridFooter.cellStyleCallback, HeaderSummary.cellStyleCallback 에서 사용한다.

문자열 반환 시 스타일 명으로 지정

[매개변수 목록]

grid - GridBase 컨트롤

model - 그리드의 셀

[반환값] - 동적 스타일을 부여하기 위한 오브젝트 혹은 스타일 클래스 명

Example:

const f1 = function(grid, model) {
     if (model.value > 5) return "rg-data-cell bold-cell";
     if (model.value < 0 && model.value > -10) {
         return {
             styleName: 'custom-negative-cell',
             renderer: {
                 type: 'bar',
                 absoluteValue: true
             }
         }
     }
}
 
const f2 = function(grid, model) {
     if (model.value > 10) {
         return {
             styleName: 'custom-summary-cell'
         }
     }
}
 
// 전체 데이터 셀에 적용
gridView.setCellStyleCallback(f1);
 
// 컬럼 별 적용
let column = gridView.columnByName('Price');
column.styleCallback = f1;
 
// 푸터 적용
gridView.footer.cellStyleCallback = f2;
 
// header summary 적용
gridView.headerSummary.cellStyleCallback = f2;

CheckableCallback

CheckBar 에서 체크 가능 여부를 결정하는 콜백

Remarks:

[매개변수 목록]

dataSource - DataProvider 컨트롤

item - 체크의 대상이 되는 아이템 (행 아이템, 헤더 아이템 등)

[반환값] - 체크 가능 여부

Example:

const f = function(dataSource, item) {
     if (item.value) {
         return item.value !== 'doNotCheck';
     }
     else {
         return false;
     }
}

ColumnObjectCallback

dataType이 object인 data를 화면에 표시할때 사용되는 콜백

Remarks:

[매개변수 목록]

fieldName - field명

dataRow - dataRow

value - value

[반환값] - 화면에 표시할 내용

Example:

const callback = function(fieldName, dataRow, value) {
  return JSON.stringify(value);
}
 
gridView.columnByName("objectColumn").objectCallback = callback;

ColumnSummaryCallback

컬럼의 footer 또는 summary에 표시되는 값을 사용자가 지정할때 사용되는 콜백의 형식

Remarks:

[매개변수 목록]

grid - gridView

column - footer 또는 summary의 컬럼

footerIndex - column의 footer가 여러개인경우 순번

summary - footer 또는 summary객체 groupFooter인 경우 GroupItem객체

value - expression이 지정된 경우 값

[반환값] - 화면에 표시될 내용.

CompareCallback

검색할 때 사용자 임의로 조건을 지정하기 위한 값 비교 콜백 형식

Remarks:

[매개변수 목록]

v1 - 검색되어지는 값

v2 - 검색한 값

sensitive - 대소문자 구분 여부

partialMatch - 포함되는 글자도 검색하는지 여부

[반환값] - 해당 값 매칭 여부

Example:

const f = function(v1, v2, sensitive, partialMatch) {
     if (v1 === v2) {
          return true;
     }
     let s1 = String(v1);
     let s2 = v2 == null ? undefined : String(v2);
     if (!s1 && !s2) {
          return true;
     }
     if (!s1 || !s2) {
          return false;
     }
     if (!caseSensitive) {
          s1 = s1.toLowerCase();
          s2 = s2.toLowerCase();
     }
     if (partialMatch) {
     	    return s2.indexOf(s1) >= 0;
     } else {
     	    return s1 == s2;
     }
}

CompareFunction

비교함수 형식

Remarks:

Array.prototype.sort() 에서 쓰는 CompareFunction 과 같은 형식이다.

DataProviderBase.setDataComparer() 에서 사용한다.

ConfigObject

CopyTextCallback

그리드를 복사할때 클립보드에 저장되는 text를 반환하는 콜백 형식

Remarks:

CopyOptions.copyTextCallback에서 사용된다.

[매개변수 목록]

grid - GridBase 컨트롤

itemIndex - 복사되는 행의 itemIndex

column - DataColumn 객체

[반환값] - 클립보드에 복사될 text undefined 를 return 하면 value 또는 copyOptions의 다른 설정값에 따른 text가 복사된다.

Example:

const f = function(grid, itemIndex, column, value) {
     if (value != null && column.name === "number1") {
         return value + "";
     }
}
grid.copyOptions.copyTextCallback = f;

CreateFooterCallback

특정 그룹 푸터의 표시 여부를 지정하기 위한 콜백 형식

Remarks:

RowGroup.createFooterCallback 에서 사용되는 형식이다.

[매개변수 목록]

owner - GridBase 컨트롤

group - 그룹 아이템

footerIndex - 푸터 콜렉션 내에서의 인덱스

Example:

createFooterCallback: function(owner, group, footerIndex) {
		if (group.level >= 5) { return false }
		if (group.level === 4) {
			let relation2 = owner.getDataSource().getValue(group.firstItem.dataRow, "relation2");
			return relation2 === "친족"
		}
		if (group.level === 3) {
			let relation1 = owner.getDataSource().getValue(group.firstItem.dataRow, "relation1");
			return relation1 === "동일인측"
		}
		return true;
	}

DataDragCallback

그리드 간 drag and drop 을 시작할 때 발생하는 콜백 형식

Remarks:

false 반환 시 drag and drop 이 취소된다. DataDropOptions.dragCallback 에서 쓰인다.

[매개변수 목록]

source - 드래그한 아이템이 있던 GridBase 컨트롤

sourceItems - 드래그한 그리드의 아이템들의 인덱스

target - 드랍할 GridBase 컨트롤 또는 HTMLElement

targetItem - 드랍할 그리드에서의 아이템 인덱스

targetColumn - 드랍할 그리드에서의 targetColumn

[반환값] - drag and drop 가능 여부

Example:

gridView.dataDropOptions.dragCallback = function (source, sourceItems, target, targetItem) {
    return targetItem % 2 == 0;
}

DataDragLabelCallback

drag 중인 item 의 label 텍스트를 결정하기 위한 콜백의 형식

Remarks:

[매개변수 목록]

source - 드래그한 아이템이 있던 GridBase 컨트롤

sourceItems - 드래그한 그리드의 아이템들의 인덱스

target - 드랍할 GridBase 컨트롤 또는 HTMLElement

targetItem - 드랍할 그리드에서의 아이템 인덱스

targetColumn - 드랍할 그리드에서의 targetColumn

[반환값] - 레이블의 텍스트

Example:

gridView.dataDropOptions.labelCallback = function (source, sourceItems, target, targetItem) {
    return sourceItems.length + " 개의 행";
}

DataDropCallback

그리드 간 drag and drop 했을 때 발생하는 콜백 형식

Remarks:

DataDropOptions.callback 에서 사용 된다.

[매개변수 목록]

source - 드래그한 아이템이 있던 GridBase 컨트롤

sourceItems - 드래그한 그리드의 아이템들의 인덱스

target - 드랍할 GridBase 컨트롤 또는 HTMLElement

targetItem - 드랍할 그리드에서의 아이템 인덱스

targetColumn - 드랍할 그리드에서의 targetColumn

Example:

gridView.dataDropOptions.callback = function (source, sourceItems, target, targetItem) {
    alert('row from ' + sourceItems + ' to ' + targetItem);
    for (var i = 0; i < sourceItems.length; i++) {
        var r = source.getDataRow(sourceItems[0]);
        var ds = source.getDataSource();
        var row = ds.getJsonRow(r)
        if (targetItem >= target.getItemCount()) {
            ds.addRow(row);
        } else {
            r = target.getDataRow(targetItem);
            target.getDataSource().insertRow(r, row);
        }
    }
}

DataFieldInput

데이터 필드에 관한 입력 형식

Remarks:

setFields 등에서 사용한다.

Example:

// string
ds.setFields('fieldnName');
 
// model
let fields = ds.getFields();
ds.setFields(fields);
 
// config
ds.setFields({
     fieldName: 'OrderID',
     dataType: 'text',
});