realgrid/dist/main.d.ts

RealGrid is a javascript data grid component with various powerful functions such as editing, row grouping, filtering, and sorting data on web environment.

/**
 * @public
 * 각각 두 개의 데이터 필드에 저장된 목표값(혹은 기대값)과 실행값을 비교하여 표시하는 시리즈 렌더러
 *
 * Bullet renderer는 목표값을 수직바로 실행값을 수평바로 표시한다.
 *
 * {@link SeriesColumn} 에서만 사용 가능하다.
 *
 * [상위 클래스]
 *
 * {@link CellRenderer}
 *
 * @example
 * ```js
 * columns = [
 *   "target",
 *   "actual",
 *   {
 *      name: "actualtargetText",
 *      type: "series",
 *      fieldNames: 'target,actual',
 *      renderer: {
 *          type: "actualtargetbullet"
 *      }
 *   }
 * ]
 * ```
 */
export declare interface ActualTargetBulletRenderer extends CellRenderer {
    /**
     * 종류: 성과/목표 bullet Renderer
     */
    type?: "actualtargetbullet";
    /**
     * actualBar의 스타일 클래스 명
     */
    actualStyle?: string;
    /**
     * targetBar의 스타일 클래스 명
     */
    targetStyle?: string;
    /**
     * background의 스타일 클래스 명
     */
    backgroundStyle?: string;
    /**
     * 최대값
     *
     * @defaultValue `100`
     */
    maxValue?: number;
    /**
     * 최소값
     *
     * @defaultValue `0`
     */
    minValue?: number;
    /**
     * targetBar의 너비를 지정한다.
     *
     * @defaultValue `3`
     */
    targetWidth?: number;
    /**
     * actualBar 테두리의 너비를 지정한다.
     *
     * @remarks
     * actualStyle에서 지정한 stroke의 width / 2를 입력한다.
     *
     * @defaultValue `1`
     */
    strokeWidth?: number;
    /**
     * actualBar의 높이를 지정한다.
     *
     * @remarks
     * 'px'또는 '%'단위로 입력한다.
     *
     * @defaultValue `25%`
     */
    actualHeight?: number | string;
}

/**
 * 각각 두 개의 데이터 필드에 저장된 목표값(혹은 기대값)과 실행값을 비교하여 표시하기 위한 렌더러.
 *
 * ActualTarget text renderer 는 '실행값 / 목표값' 형식으로 표시한다.
 *
 * {@link SeriesColumn} 에서만 사용 가능하다.
 *
 * [상위 클래스]
 *
 * {@link CellRenderer}
 *
 * @example
 * ```js
 * columns = [
 *   "target",
 *   "actual",
 *   {
 *      name: "actualtargetText",
 *      type: "series",
 *      fieldNames: 'target,actual',
 *      renderer: {
 *          type: "actualtargettext"
 *      }
 *   }
 * ]
 * ```
 *
 */
export declare interface ActualTargetTextRenderer extends CellRenderer {
    /**
     * 종류: 성과/목표 Text
     */
    type?: "actualtargettext";
    /**
     * 성과 값과 목표 값의 구분자를 입력한다.
     *
     * @defaultValue `/`
     */
    separator?: string;
    /**
     * 성과 값의 스타일 명
     *
     * @defaultValue `rg-actualtarget-target`
     */
    targetStyle?: string;
    /**
     * 목표 값의 스타일 명
     *
     * @defaultValue `rg-actualtarget-actual`
     */
    actualStyle?: string;
    /**
     * 구분자의 스타일명
     *
     * @defaultValue `rg-actualtarget-separator`
     */
    separatorStyle?: string;
}

/**
 * @public
 *
 * 숫자 형 컬럼 셀의 값을 바(bar)로 표시하는 렌더러
 *
 * @remarks
 * [상위 클래스]
 *
 * {@link CellRenderer}
 *
 * @example
 * ```js
 * // string type
 * column.renderer = 'bar';
 *
 * // object type
 * column.renderer = {
 *      "type": "bar",
 *      "minimum": 0,
 *      "maximum": 100,
 *      "minWidth": 150,
 *      "showLabel": true,
 *      "origin": "left"
 * }
 * ```
 */
export declare interface BarCellRenderer extends CellRenderer {
    /**
     * 종류: 바
     */
    type?: "bar";
    /**
     * 왼쪽에서 시작하는 바의 스타일 명
     *
     * @defaultValue `'rg-bar-renderer-bar'`
     */
    barStyle?: string;
    /**
     * 오른쪽에서 시작하는 바의 스타일 명
     *
     * @defaultValue `'rg-bar-renderer-bar-right'`
     */
    rightBarStyle?: string;
    /**
     * 위쪽에서 시작하는 바의 스타일 명
     *
     * @defaultValue `'rg-bar-renderer-bar-top'`
     */
    topBarStyle?: string;
    /**
     * 아래쪽에서 시작하는 바의 스타일 명
     *
     * @defaultValue `'rg-bar-renderer-bar-bottom'`
     */
    bottomBarStyle?: string;
    /**
     * 최소값
     */
    minimum?: number;
    /**
     * 최대값
     */
    maximum?: number;
    /**
     * 바의 넓이
     */
    barWidth?: number | string;
    /**
     * Label 을 표시할 것인지의 여부
     */
    showLabel?: boolean;
    /**
     * 바의 시작 위치
     *
     * @defaultValue {@link BarOrigin.LEFT}
     */
    origin?: BarOrigin;
    /**
     * 절대값 기준으로 렌더링 할지의 여부
     */
    absoluteValue?: boolean;
    /**
     * 값이 지정되면 middleValue보다 큰값은 오른쪽으로 작은 값은 왼쪽으로 표시한다.
     *
     * @remarks
     * `origin`이 {@link BarOrigin.LEFT} 또는 {@link BarOrigin.BOTTOM}인 경우만 적용된다.
     *
     * @defaultValue `NaN`
     */
    baseValue?: number;
    /**
     * baseValue보다 작은 값일때 적용되는 스타일 명
     *
     * @defaultValue `'rg-bar-renderer-bar-negative'`
     */
    negativeStyle?: string;
    /**
     * baseValue가 지정되었을때 bar와 text의 간격
     * @remarks
     * 값이 `0`인경우 셀의 중간에 출력된다.
     * @defaultValue `5`
     */
    textOffset?: number;
}

/**
 * {@link BarCellRenderer} 의 바의 위치
 *
 * @example
 * ```js
 * column.renderer = {
 *      "type": "bar",
 *      "origin":"right"
 * }
 * ```
 */
export declare enum BarOrigin {
    /**
     * 기본값
     */
    DEFAULT = "default",
    /**
     * 왼쪽
     */
    LEFT = "left",
    /**
     * 오른쪽
     */
    RIGHT = "right",
    /**
     * 위쪽
     */
    TOP = "top",
    /**
     * 아래쪽
     */
    BOTTOM = "bottom"
}

/**
 * @public
 *
 * {@link DataColumn.equalBlank}가 `true`일때 셀의 위치
 */
declare enum BlankState {
    /**
     * equalBlank가 적용되지 않음.
     */
    NONE = "none",
    /**
     * 첫번째 셀
     */
    HEAD = "head",
    /**
     * 중간에 위치한 셀
     */
    BODY = "body",
    /**
     * 마지막에 위치한 셀
     */
    TAIL = "tail"
}

/**
 * boolean 필드 변환시 수행 될 콜백함수 형식
 *
 * @remarks
 * {@link DataOutputOptions.booleanCallback} 에서 사용된다.
 *
 * [매개변수 목록]
 *
 * `ds` - DataProvider 컨트롤
 *
 * `row` - 아이템의 인덱스
 *
 * `field` - 필드명
 *
 * `value` - 값
 *
 * [반환값] - 출력할 값
 *
 * @example
 * ```js
 * const f = function(ds, row, field, value) {
 *      return !!value;
 * }
 * ```
 */
export declare type BooleanOutputCallback = (ds: DataProviderBase, row: number, field: string, value: any) => boolean | any;

/**
 * @public
 * BootStrap DatePicker 를 이용한 편집기
 *
 * @remarks
 *
 * 번들 이후 다음과 같이 파일을 적용해야 정상적으로 작동한다.
 *
 * {@link TextCellEditor} 를 상속 한다.
 *
 * [상위 클래스]
 *
 * {@link CellEditor} - {@link TextCellEditor}
 *
 * @example
 *
 * ```js
 * // string type
 * column.editor = "btdate"
 *
 * // object type
 * column.editor = { type: "btdate", maxLength: 6, textReadOnly: true }
 * ```
 *
 * ```html
 * <script type="text/javascript" src="/lib/bootstrap/bootstrap-datepicker.js"></script>
 * <script type="text/javascript" src="/lib/bootstrap/bootstrap-datepicker.ko.min.js"></script>
 * <link rel="stylesheet" type="text/css" href="/lib/css/bootstrap-datepicker.css">
 * ```
 */
export declare interface BTDateCellEditor extends TextCellEditor {
    /**
     * 셀 에디터 종류: 부트스트랩 날짜 편집기
     *
     */
    type?: 'btdate';
    /**
     * BootStrap DatePicker의 옵션
     *
     * @remarks
     * {@link https://uxsolutions.github.io/bootstrap-datepicker/ | 참조}
     */
    btOptions?: any;
    /**
     * 키보드를 이용한 입력 금지 여부
     */
    textReadOnly?: boolean;

    /**
     * 입력 가능한 최소 날짜
     *
     * @remarks
     * 키보드로 minDate 보다 이전 날짜가 입력되면, minDate 로 변경된다.
     *
     * @defaultValue `new Date(1970, 0, 1)`
     */
    minDate?: string | Date;
    /**
     * 입력 가능한 최대 날짜
     *
     * @remarks
     * 키보드로 maxDate 보다 이후 날짜가 입력되면, maxDate 로 변경된다.
     *
     * @defaultValue `new Date(2100, 11, 31)`
     */
    maxDate?: string | Date;
    /**
     * 그리드 DOM 내부에 포함시킬 것인지의 여부
     *
     * @defaultValue `false`
     */
    viewGridInside?: boolean;
    /**
     * 달력 선택 상자의 위치
     *
     * @defaultValue {@link DropDownPosition.BUTTON}
     */
    dropDownPosition?: DropDownPosition;
    /**
     * 셀을 클릭했을 때 목록을 펼칠지의 여부
     *
     * @defaultValue `false`
     */
    dropDownWhenClick?: boolean;
    /**
     * 키보드 입력시 목록표시 여부
     *
     * @defaultValue `true`
     *
     * @remarks
     * `false`로 지정하면 버튼을 클릭했을때만 목록이 펼쳐진다.
     */
    dropDownWhenTyping?: boolean;
    /**
     * 선택 시 commit 여부
     *
     * @defaultValue `false`
     */
    commitOnSelect?: boolean;
}

/**
 * @public
 *
 * 버튼을 표시하는 렌더러
 *
 * @remarks
 * 자동 높이에서 `TOP_EDGE`, `BOTTOM_EDGE` 를 사용할 수 없다.
 *
 * [상위 클래스]
 *
 * {@link CellRenderer}
 *
 * @example
 * ```js
 * // string type
 * column.renderer = 'button';
 *
 * // object type
 * column.renderer = {
 *      "type": "button",
 *      "hideWhenEmpty": false
 * }
 * ```
 */
export declare interface ButtonCellRenderer extends CellRenderer {
    /**
     * 종류: 버튼
     */
    type?: 'button';
    /**
     * 표시 되는 버튼의 스타일 클래스 명
     *
     * @defaultValue `'rg-button-renderer-button'`
     */
    buttonStyle?: string;
    /**
     * 빈 값일 때 버튼을 표시할지의 여부
     *
     * @remarks
     * `true` 시 `undefined`, `null`, `''`, `NaN` 일 경우 버튼을 표시하지 않는다.
     *
     * @defaultValue `true`
     */
    hideWhenEmpty?: boolean;
    /**
     * spaceKey를 입력했을때 button.click 실행여부
     *
     * @remarks
     * true이면 스페이스바를 입력했을때 button.click이 실행된다.
     * {@link GridBase.onCellItemClicked}가 있는 경우 해당 이벤트가 호출된후 결과값이 false이면 기본동작을 실행하지 않는다
     *
     * @defaultValue `true`
     */
    spaceKey?: boolean;
    /**
     * enter를 입력했을때 button.click 실행여부
     *
     * @remarks
     * true이면 enterKey를 입력했을때 입력했을때 button.click이 실행된다.
     * {@link GridBase.onCellItemClicked}가 있는 경우 해당 이벤트가 호출된후 결과값이 false이면 기본동작을 실행하지 않는다
     *
     * @defaultValue `true`
     */
    enterKey?: boolean;
}

/**
 * @public
 *
 * 컬럼에 버튼이 설정된 경우, 데이터 셀에 컬럼 버튼과 편집 버튼을 표시하는 방법
 *
 * @remarks
 * ValueColumn의 {@link ValueColumn.buttonVisibility | buttonVisibility} 속성과 {@link ValueColumn.editButtonVisibility| editButtonVisibility} 속성에 사용된다.
 *
 * @example
 * ```js
 * // 컬럼 버튼
 * column.buttonVisibility = false;
 *
 * // 편집기의 버튼
 * column.editButtonVisibility = false;
 * ```
 */
export declare enum ButtonVisibility {
    /**
     * 항상 표시
     */
    ALWAYS = "always",
    /**
     * 마우스가 셀 위에 있거나, 셀을 선택한 상태에서만 표시
     */
    DEFAULT = "default",
    /**
     * 셀을 선택한 상태에서 표시
     */
    VISIBLE = "visible",
    /**
     * 표시하지 않음
     */
    HIDDEN = "hidden",
    /**
     * 행이 선택된 상태에서 표시
     */
    ROWFOCUSED = "rowfocused"
}

/**
 * @public
 * column.button이 `action` 또는 `popup`인 경우 visible을 지정한 콜백
 *
 * [매개변수]
 *
 * `grid` - gridView
 *
 * `index` - 셀의 CellIndex
 *
 * [반환값] - boolean `false`를 return하면 버튼을 표시하지 않는다.
 */
declare type ButtonVisibleCallback = (grid: GridBase, index: CellIndex, focused: boolean, mouseEntered: boolean) => boolean;

/**
 * 년도, 월, 일 선택화면의 제한을 설정한다.
 *
 * @remarks
 * 년-월 또는 년도만 선택할때 사용한다.
 */
export declare enum CalendarMode {
    /**
     * `일`을 선택할수 있다.
     */
    DAY = "day",
    /**
     * `월`까지만 선택할수 있다.
     */
    MONTH = "month",
    /**
     * `년도`만 선택가능하다.
     */
    YEAR = "year"
}

/**
 * 자동 필터링 시 사용자 지정 분류를 위한 콜백 형식
 *
 * @remarks
 * [매개변수 목록]
 *
 * `column` - 자동 필터링이 걸려있는 컬럼
 *
 * `values` - 전체 값들
 *
 * [반환값] - 카데고리 분류 모델의 배열 형태
 *
 * @example
 *
 * ```js
 * 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;
 * }
 * ```
 *
 */
export declare type CategoryCallback = (column: DataColumn, values: any[]) => FilterCategory[];

/**
 * @public
 *
 * 데이터 셀의 우측에 표시할 버튼 종류
 *
 * @remarks
 * {@link ValueColumn.button} 에서 사용된다.
 *
 * @example
 * ```js
 * column.button = 'popup';
 * ```
 */
export declare enum CellButton {
    /**
     * 버튼 없음
     */
    NONE = "none",
    /**
     * 실행 버튼 (클릭 시 {@link GridBase.onCellButtonClicked | onCellButtonClicked} 콜백 호출)
     */
    ACTION = "action",
    /**
     * 팝업 메뉴 버튼
     *
     * @remarks
     * 컬럼에 {@link ValueColumn.popupMenu | popupMenu } 속성값이 있고, 컬럼의 popupMenu 값과 {@link GridBase.addPopupMenu | addPopupMenu} 호출 시 name 값과 일치 해야 한다.
     *
     * 팝업 메뉴의 메뉴 항목 클릭 시 {@link GridBase.onMenuItemClicked | onMenuItemClicked} 콜백이 호출된다.
     */
    POPUP = "popup"
}

/**
 * @public
 * 셀 편집기들의 기반이 되는 모델
 *
 * @remarks
 * 셀 편집기 별로 지정할 수 있는 속성이 있으며, DataColumn 에 지정하지 않을 시 {@link LineCellEditor} 가 기본으로 설정된다.
 *
 * 또, 오브젝트 형태일 때의 `type` 속성을 {@link ValueColumn.editor | column.editor} 에 문자열 형태로 지정 가능하다.
 *
 * [목록]
 *
 * {@link LineCellEditor}: 한 줄 입력 편집기
 *
 * {@link PasswordCellEditor}: 암호 입력 편집기
 *
 * {@link MultiLineCellEditor}: 여러 줄 입력 편집기
 *
 * {@link NumberCellEditor}: 숫자 입력 편집기
 *
 * {@link DateCellEditor}: 날짜 편집기
 *
 * {@link BTDateCellEditor}: 부트스트랩 날짜 편집기
 *
 * {@link DropDownCellEditor}: 드롭 다운 편집기
 *
 * {@link SearchCellEditor}: 검색 기능이 추가 된 드롭 다운 편집기
 *
 * {@link MultiCheckCellEditor}: 여러 항목이 선택 가능한 드롭 다운 편집기
 *
 * @warning CellEditor 로 직접 설정하거나 호출할 수 없다.
 *
 * @example
 *
 * ```js
 * // string type
 * column.editor = "line"
 *
 * // object type
 * column.editor = { type: "line", maxLength: 1}
 * ```
 */
export declare interface CellEditor {
    /**
     * 셀 편집기 종류
     *
     * @remarks
     *
     * {@link LineCellEditor}: "line" 또는 "text"
     *
     * {@link PasswordCellEditor}: "password"
     *
     * {@link MultiLineCellEditor}: "multiline"
     *
     * {@link NumberCellEditor}: "number"
     *
     * {@link DateCellEditor}: "date"
     *
     * {@link BTDateCellEditor}: "btdate"
     *
     * {@link DropDownCellEditor}: "dropdown" 또는 "list"
     *
     * {@link SearchCellEditor}: "search"
     *
     * {@link MultiCheckCellEditor}: "checklist"
     */
    type?: string;
    /**
     * 셀의 값을 제거하거나 편집후 공백일때 저장되는 값
     */
    emptyValue?: any;
    /**
     * 편집기의 입력되는 문자의 대소문자 구분 형태
     *
     * @remarks
     * 편집기에 입력되는 문자를 자동으로 대소문자로 변경한다.
     * {@link TextInputCase.DEFAULT} 로 지정하면 컬럼의 textInputCase에 지정한 값을 따르게 된다.
     */
    textCase?: TextInputCase;
    /**
     * 날짜 형식의 값일 때 표시되는 편집기의 서식
     *
     * @remarks
     * 데이터 필드가 날짜 타입일 때 작동
     */
    datetimeFormat?: string;
    /**
     * 편집기에서 현재 날짜를 입력하도록 하는 문자
     *
     * @remarks
     * 데이터 필드가 날짜 타입이거나, 텍스트 타입이지만 날짜 편집기일 때 동작한다.
     *
     */
    todayChar?: string;

    /**
     * Boolean 값일 때 표시되는 편집기의 서식
     *
     * @remarks
     * 데이터 필드가 boolean 타입일 때 동작한다.
     */
    booleanFormat?: string;
    /**
     * 데이터 셀의 값 수정 가능 여부
     *
     * @remarks
     * `true` 일 때
     *
     * @defaultValue `false`
     */
    readOnly?: boolean;
}

/**
 * @public
 *
 * 셀의 위치정보 모델
 *
 * @remarks
 * {@link GridBase.onCurrentChanging | onCurrentChanging} 등 {@link GridBase} 의 여러 콜백 및 셀 위치 관련 method 들에서 주로 사용된다.
 *
 * 필요한 정보만 사용하면 된다.
 *
 * @example
 * ```js
 * gridView.setCurrent({ itemIndex: 1, column: '행정구역별' });
 * ```
 */
export declare interface CellIndex {
    /**
     * 그리드 상에서의 순서
     */
    itemIndex?: number;
    /**
     * 컬럼 이름
     */
    column?: string | GridColumn;
    /**
     * 고유의 행 번호
     */
    dataRow?: number;
    /**
     * 필드 순서
     */
    fieldIndex?: number;
    /**
     * 필드명
     */
    fieldName?: string;
}

/**
 * @public
 * 컬럼 레이아웃 정보 모델
 *
 * @remarks
 * {@link GridBase.getLayoutByColumn} 에서 해당 모델을 반환할 수 있다.
 *
 * {@link GridBase.setColumnLayout} 로 설정될 때에는 특정 속성만 사용 가능하다.
 *
 * {@link GridColumn.layout} 의 속성으로 설정 가능하다.
 *
 * {@link CellLayoutItem} 을 상속한다.
 *
 * [상위 클래스]
 *
 * {@link CellLayoutItem}
 *
 *
 * @example
 * ```js
 * // 반환값일 경우
 * {
 *      mergeRule: undefined,
 *      breakMergeOnEmpty: false,
 *      equalBlank: undefined,
 *      equalBlankExpression: undefined,
 *      cellSpan: 1,
 *      headerSpan: undefined,
 *      summarySpan: undefined,
 *      footerSpan: undefined,
 *      dataSpan: undefined,
 *      spanCallback: undefined,
 *      visible: true,
 *      vindex: 1,
 *      width: 100,
 *      fillWidth: NaN,
 *      cellWidth: 250
 * }
 *
 * // method 로 설정할 경우
 * {
 *      column: 'Country'
 *      cellSpan: 3,
 *      width: 100,
 * }
 *
 * {
 *      column: 'Country'
 *      headerSpan: 2,
 *      summarySpan: 2,
 *      footerSpan: 2,
 *      dataSpan: 4,
 * }
 *
 * // 컬럼에 설정할 경우
 * column.layout.spanCallback = function (grid, layout, itemIndex) {
 *     var value = grid.getValue(itemIndex, layout.column.name);
 *     if (value) {
 *         return value[0] === "B" ? 2 : value[0] === "F" ? 3 : 1;
 *     }
 * ```
 */
export declare interface CellLayoutColumnItem extends CellLayoutItem {
    /**
     * 컬럼 머지할 때의 규칙
     *
     * @remarks
     * `undefined` 이면(기본값) 컬럼의 mergeRule 로 병합한다.
     * `null` 이면 컬럼의 mergeRule 을 무시한다.
     * `{criteria: string}`은 이전버전과 호환성을 위해서 사용한다.
     */
    mergeRule?: string | {
        criteria: string;
    };
    /**
     * 빈 셀일 때 머지 중단 여부
     */
    breakMergeOnEmpty?: boolean;
    /**
     * 같은 컬럼의 이전 행의 셀과 값이 동일할때 셀의 묶음 여부
     *
     * @defaultValue `undefined`
     */
    equalBlank?: boolean;
    /**
     * {@link CellLayoutColumnItem.equalBlank | equalBlank } 가 `true`인 경우 같은 값으로 처리할 수식
     *
     * @defaultValue `undefined`
     */
    equalBlankExpression?: string;
    /**
     * 컬럼명
     *
     */
    column: string | ValueColumn;
    /**
     * 기본 셀 스팬 개수
     *
     * @remarks
     * 다른 스팬이 지정이 되지 않을 때, 해당 값을 따른다.
     *
     * {@link GridBase.setColumnLayout} 로 설정될 때 사용 가능하다.
     */
    cellSpan?: number;
    /**
     * 헤더 스팬 개수
     *
     * @remarks
     * {@link GridBase.setColumnLayout} 로 설정될 때 사용 가능하다.
     */
    headerSpan?: number;
    /**
     * headerSummary가 하나일때 컬럼레이아웃별 headerSummary의 span을 지정한다.
     */
    summarySpan?: number;
    /**
     * summary 스팬 개수
     *
     * @remarks
     * summary가 하나인 경우 summarySpan 으로 지정한다.
     * {@link GridBase.setColumnLayout} 로 설정될 때 사용 가능하다.
     */
    summarySpans?: number[];
    /**
     * footer가 하나일때 컬럼레이아웃별 footer의 span을 지정한다.
     */
    footerSpan?: number;
    /**
     * 푸터 스팬 개수
     *
     * @remarks
     * footer가 하나인 경우 footerSpan 으로 지정한다.
     * {@link GridBase.setColumnLayout} 로 설정될 때 사용 가능하다.
     */
    footerSpans?: number[];
    /**
     * 그룹 푸터 스팬 개수
     *
     * @remarks
     * groupFooter가 하나인 경우 groupFooterSpan으로 지정한다.
     * {@link GridBase.setColumnLayout} 로 설정될 때 사용 가능하다.
     */
    groupFooterSpans?: number[];
    /**
     * 셀 스팬 개수
     *
     * @remarks
     * 상위 그룹의 direction이 vertical인 경우 rowSpan하고 horizontal인 경우 colspan한다.
     * {@link GridBase.setColumnLayout} 로 설정될 때 사용 가능하다.
     */
    dataSpan?: number;
    /**
     * 사용자 지정 스팬을 위한 콜백
     *
     * @eventProperty
     * @example
     * ```js
     * let layout = column.layout
     * layout.spanCallback = 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;
     * };
     * ```
     */
    spanCallback?: CellSpanCallback;
    /**
     * 사용자 지정 headerSummary 스팬을 위한 콜백
     *
     * @eventProperty
     */
    summarySpanCallback?: SummaryCellSpanCallback;
    /**
     * 사용자 지정 footer 스팬을 위한 콜백
     *
     * @eventProperty
     */
    footerSpanCallback?: SummaryCellSpanCallback;
    /**
     * 사용자 지정 groupFooter 스팬을 위한 콜백
     *
     * @eventProperty
     */
    groupFooterSpanCallback?: GroupFooterCellSpanCallback;
    /**
     * 사용자 지정 groupFooter UserSpan을 위한 콜백 groupFooterSpanCallback과는 다르게 block단위로 span할수 있다.
     *
     * @eventProperty
     */
    groupFooterUserSpanCallback?: GroupFooterUserSpanCallback;
    /**
     * 사용자 지정 footer span
     */
    footerUserSpans?: UserSpan[];
    /**
     * 사용자 지정 headerSummary span
     */
    summaryUserSpans?: UserSpan[];
    /**
     * 사용자 지정 groupFooter span
     */
    groupFooterUserSpans?: UserSpan[];
}

/**
 * @public
 *
 * {@link CellLayoutGroupItem.header}의 설정 정보 모델
 *
 * [상위 클래스]
 * {@link CellLayoutHeader}
 */
export declare interface CellLayoutGroupHeader extends CellLayoutHeader {
    /**
     * 툴팁에 표시될 문자열을 지정.
     *
     * @remarks
     * 지정하지 않으면 text가 표시된다.
     */
    tooltip?: string;
    /**
     * header에 적용되어 표시될 html 템플릿
     *
     * @remarks
     * header에 text가 아닌 html을 표시할때 사용한다.
     *
     * @example
     * ```js
     * var layouts = [
     *   { type: "group"
     *     header: {
     *       template : "<span class='test-style' style='color:red'>HTML 표시 ${key}</span>"
     *     }
     *   }
     * ]
     * ```
     */
    template?: string;
    /**
     * template에 특정 문자열을 교체해서 표시할때 사용
     *
     * @remarks
     * `"${}"`로 둘러싼 문자열을 특정 문자열로 변경할때 사용한다.
     * {@link CellLayoutGroupHeader.template} 참조
     *
     */
    values?: {
        [key: string]: string;
    };
    /**
     *
     * edgeMark 표시여부
     *
     * @remarks
     * Header에 강조 표시를 할때 사용한다.
     * {@link EdgeMark} 참조
     */
    edgeMark?: EdgeMark;
    /**
     * template에 특정 문자열을 교체해서 표시할때 사용
     *
     * @remarks
     * `values`에 없는 문자열인 경우 호출된다.
     */
    templateCallback?: RealizeHeaderCallback;
    /**
     * 생성된 요소에 이벤트를 추가한다.
     *
     * {@link TemplateCellRenderer} 의 설명을 참고
     */
    templateEvents?: HeaderTemplateEvent | HeaderTemplateEvent[];
}

/**
 * @public
 * 그룹 레이아웃 정보 모델
 *
 * @remarks
 * 실제 컬럼이 아닌 화면 상에서 보이는 컬럼 묶음이다.
 *
 * {@link CellLayoutItem} 을 상속한다.
 *
 * [상위 클래스]
 *
 * {@link CellLayoutItem}
 *
 * @example
 * ```js
 * {
 *     name: "companyGroup",
 *     items: [
 *         {
 *             column: "Country",
 *             cellSpan: 3
 *         },
 *         20,20,
 *         {
 *             column: "CompanyName",
 *             cellSpan: 3
 *         },
 *         20,20,
 *     ],
 *     header: true
 * },
 * ```
 */
export declare interface CellLayoutGroupItem extends CellLayoutItem {
    /**
     * 셀 배치 방향
     */
    direction?: ColumnLayoutDirection;
    /**
     * 너비 조정 가능 여부
     */
    resizable?: boolean;
    /**
     * 이동 가능 여부
     */
    movable?: boolean;
    /**
     * 하위 레이아웃의 헤더 숨김 여부
     */
    hideChildHeaders?: boolean;
    /**
     * 하위 레이아웃의 이동여부
     */
    childColumnMovable?: boolean;
    /**
     * 하위 레이아웃 아이템들
     *
     * @remarks
     * 문자열 형태로 입력 시 해당 값을 {@link CellLayoutColumnItem.column | column} 으로 설정한 {@link CellLayoutColumnItem} 을 생성한다.
     *
     * 숫자 형태로 입력시 해당 값을 {@link CellLayoutItem.width | width} 로 설정한 {@link CellLayoutColumnItem} 을 생성한다.
     */
    items?: (LayoutItem | number | string)[];
    /**
     * 헤더의 레이아웃 설정 정보
     *
     * @remarks
     * `string` 또는 `boolean` 으로 {@link CellLayoutHeader.text | text} 또는 {@link CellLayoutHeader.visible | visible} 속성에 부여 가능하다.
     *
     * @example
     *
     * ```js
     *      ...
     *              header: {
     *                  text: 'group1',
     *                  visible: true
     *              },
     *      ...
     *
     *     ...
     *              header: false,
     *      ...
     *
     *     ...
     *              header: 'group3',
     *      ...
     * ```
     */
    header?: CellLayoutGroupHeader | string | boolean;
    /**
     * 하위 레이아웃확장 여부
     *
     * @remarks
     *
     * 하위 레이아웃을 접거나 펼쳐서 일부 레이아웃만 보이도록 한다.
     *
     * @defaultValue `false`
     *
     * @example
     *
     * ```js
     * var layout = [ {
     *      name: "group0",
     *      expandable: true,
     *      expanded: true,
     *      header:{text:"2018년도"}
     *      items:[{column: "합계", groupShowMode: "always"},
     *          {column: "1분기", groupShowMode: "expand"},
     *          {column: "2분기", groupShowMode: "expand"},
     *          {column: "3분기", groupShowMode: "expand"},
     *          {column: "4분기", groupShowMode: "expand"}
     *      ]
     * }, { ....
     * }, { ....
     * }]
     * ```
     */
    expandable?: boolean;
    /**
     * 레이아웃 확장 상태
     *
     * @remarks
     * 레이아웃의 확장상태 `true`이면 하위 레이아웃중 {@link CellLayoutItem.groupShowMode}가 `expand`이거나 `always`인 레이아웃만 표시된다.
     * `false`이면 `collapse`이거나 `always`인 레이아웃이 표시된다.
     */
    expanded?: boolean;
    /**
     * {@link CellLayoutGroupItem.hideChildHeaders}가 `true`일때 그룹헤더 대신 표시할 컬럼을 지정한다.
     */
    tiedColumn?: string;
    /**
     * 하위 layout또는 컬럼을 추가한다.
     *
     * @remarks
     * 그리드에 layout이 설정되어있지 않으면 사용할수 없다 {@link GridBase.setColumnLayout}을 이용해서 layout을 설정후 사용한다.
     * 그리드의 root에 추가하기 위해서는 {@link GridBase.addLayout}을 사용한다.
     *
     * @param source - 컬럼명 또는 추가될 layout의 설정
     * @param index - 삽입될 위치 생략하면 마지막에 추가된다.
     *
     * @example
     * ```js
     * const layout = gridView.layoutByName("group0");
     * layout.addLayout("column");
     * ```
     */
    addLayout?(source: ConfigObject | string, index?: number): CellLayoutItem;
    /**
     * 하위 layout을 제거한다.
     *
     * @remarks
     * 그리드에 layout이 설정되어있지 않으면 사용할수 없다.
     * 그리드 root의 layout을 제거하기 위해서는 {@link GridBase.removeLayout}을 사용한다.
     *
     * @param layout - 제거할 layout의 이름 또는 layout객체
     */
    removeLayout?(layout: LayoutItem | string): void;
}

/**
 * @public
 * 셀 레이아웃 헤더의 설정 정보 모델
 *
 * @remarks
 * `string` 으로 부여시 `text` 에 설정된다.
 *
 * `boolean` 으로 부여시 `visible` 에 설정된다.
 *
 * 따로 `text` 가 설정되지 않은 경우 컬럼 명이 텍스트로 지정된다.
 *
 * @example
 * ```js
 * {
 *      text: 'group1',
 *      visible: true
 * }
 * ```
 */
export declare interface CellLayoutHeader {
    /**
     * 레이아웃 설정 시 보여질 헤더의 텍스트
     */
    text?: string;
    /**
     * 레이아웃 설정 시 적용될 스타일 클래스 명
     */
    styleName?: string;
    /**
     * excel로 export시 적용될 스타일 클래스 명
     */
    exportStyleName?: string;
    /**
     * 표시 여부
     *
     * @remarks
     * 그룹 헤더일 때만 적용 가능
     */
    visible?: boolean;
    /**
     * header 셀의 row count
     *
     * @remarks
     * 여러 level의 그룹이 혼재되어있을때 header의 높이를 일치시키기 위해서 사용한다.
     *
     * 그룹 헤더일 때만 적용 가능
     *
     * @example
     * ```js
     * var layout = [{
     *  name:"group0",
     *  items:[
     *      { name:"group0-1", items:["col1", "col2", "col3"] },
     *      { name:"group0-2", items:["col4", "col5", "col6"] }]
     * }, {
     *  name: "group1",
     *  header: {text:"group1", rows:2},
     *  items: ["col7", "col8"]
     * }]
     * ```
     */
    rows?: number;
    /**
     * 툴팁 표시 여부
     *
     * @remarks
     *
     * @defaultValue `undefined`
     */
    showTooltip?: boolean;
    /**
     * ellipsis상태인 셀의 툴팁 표시여부
     *
     * @defaultValue `undefined`
     */
    tooltipEllipsisOnly?: boolean;
}

/**
 * @public
 * 레이아웃을 설정하기 위한 기반 모델
 *
 * @remarks
 * 하위 모델을 이용하여 {@link GridBase.setColumnLayout} 으로 설정 시, 특정 속성만 사용 가능하다.
 *
 * [하위 클래스]
 *
 * {@link CellLayoutColumnItem}
 *
 * {@link CellLayoutGroupItem}
 *
 * @warning CellLayoutItem 으로 직접 설정할 수 없다.
 */
export declare interface CellLayoutItem {
    /**
     * layout의 type을 지정한다.
     *
     * @remarks
     * {@link CellLayoutType} 참조
     */
    type?: CellLayoutType;
    /**
     * 레이아웃 명
     *
     * @remarks
     * {@link GridBase.setColumnLayout} 로 설정 할 수 있다.
     */
    name?: string;
    /**
     * 표시 여부
     *
     * @remarks
     * {@link GridBase.setColumnLayout} 로 설정 할 수 있다.
     */
    visible?: boolean;
    /**
     * 너비
     *
     * @remarks
     * {@link GridBase.setColumnLayout} 로 설정 할 수 있다.
     */
    width?: number;
    /**
     * 셀 너비
     *
     */
    cellWidth?: number;
    /**
     * {@link GridFitStyle.FILL} 로 설정된 후 사용하는 너비 비율
     */
    fillWidth?: number;
    /**
     * 전체 그룹 혹은 상위 그룹 내에서의 표시 순서
     *
     * @readonly
     */
    vindex?: number;
    /**
     * 상위 레이아웃의 expanded상태에서 따라서 표시하거나 숨긴다.
     *
     * @defaultValue {@link GroupShowMode.ALWAYS | always}
     */
    groupShowMode?: GroupShowMode;
}

/**
 * @public
 * layout의 type을 지정한다.
 *
 * @remarks
 * {@link GridBase.addLayout} 또는 {@link CellLayoutGroupItem.addLayout} 을 이용해서 Layout을 추가할때 layout의 type을 지정한다.
 */
export declare enum CellLayoutType {
    /**
     * groupLayout을 추가할때 사용한다.
     * @remarks
     * `type`이 `group`이거나 `items`가 배열로 설정되면 groupLayout이다.
     */
    GROUP = "group",
    /**
     * 컬럼과 연결된 layout을 생성한다.
     */
    COLUMN = "column",

}

/**
 * 셀에 대한 메모 정보 모델
 *
 * @remarks
 * 각 셀의 메모에 표시할 내용을 정의
 */
export declare interface CellMemo {
    /**
     * 메모에 작성자를 설정
     * 설정하지 않을 경우, {@link ExportMemo.author}가 적용된다.
     */
    author?: string;
    /**
     * 메모에 작성될 작성자 표시 유무
     * 설정하지 않을 경우, {@link ExportMemo.authorVisible}가 적용된다.
     */
    authorVisible?: boolean;
    /**
     * 메모에 작성될 메시지
     */
    message: string;
    /**
     * 메모에 표시될 글씨 크기 (단위: pt)
     *
     * @defaultValue 10
     */
    fontSize?: number;
    /**
     * 엑셀에 표시될 메모의 minWidth 설정 (단위: px)
     *
     * @defaultValue 128
     */
    minWidth?: number;
    /**
     * 엑셀에 표시될 메모의 maxWidth 설정 (단위: px)
     *
     * @defaultValue 400
     */
    maxWidth?: number;
}

/**
 * @public
 *
 * 셀 잠금 또는 셀 숨김을 설정한다.
 *
 * @remarks
 * DataCell영역에만 적용되고 그외 영역은 적용할수 없다.
 * {@link DataColumn.cellProtectProps} 또는 {@link ColumnStyleObject.cellProtectProps}에서 사용한다.
 * {@link GridExportOptions.sheetProtect}을 이용해서 시트 보호를 설정해야 적용된다.
 */
export declare interface CellProtectProperties {
    /**
     * 잠금
     *
     * @remarks
     * 엑셀 셀의 기본 설정은 잠금이다. 입력가능한 컬럼 또는 셀만 `locked`를 `'0'`으로 설정한다.
     */
    locked?: string;
    /**
     * 수식 숨기기
     *
     * @remarks
     * 셀의 수식을 숨기기 위해서는 `hidden`을 `'1'`로 설정한다.
     */
    hidden?: string;
}

/**
 * @public
 *
 * 셀 렌더러들의 기반 모델
 *
 * @remarks
 * 데이터 셀들의 값을 그리드에 표시하기 위한 장치이다.
 *
 * CellRenderer 의 모든 프로퍼티는 이를 상속한 클래스에서만 호출 / 설정할 수 있다. 아래 목록을 참조할 것.
 *
 * 이전 버전의 셀 렌더러는 기본적으로 컬럼에서 생성되는 스타일 정보를 이용해서 렌더링하지만, 2.0 부터는 css style class 로 적용된다.
 *
 * 각각의 {@link ValueColumn.renderer | 컬럼}에 셀렌더러의 종류와 속성들을 지정한다.
 *
 * 셀 렌더러 별로 지정할 수 있는 속성이 있으며, DataColumn 에 지정하지 않을 시 {@link TextCellRenderer} 가 기본으로 설정된다.
 *
 * 또, 오브젝트 형태일 때 `type` 속성을 {@link ValueColumn.renderer | column.renderer} 에 문자열 형태로 지정 가능하다.
 *
 * [목록]
 *
 * {@link TextCellRenderer}: 기본 텍스트 렌더러
 *
 * {@link BarCellRenderer}: 바 렌더러
 *
 * {@link ImageCellRenderer}: 이미지 렌더러
 *
 * {@link IconCellRenderer}: 아이콘 렌더러
 *
 * {@link CheckCellRenderer}: 체크 셀 렌더러
 *
 * {@link ButtonCellRenderer}: 버튼 렌더러
 *
 * {@link ShapeCellRenderer}: 도형 렌더러
 *
 * {@link LinkCellRenderer}: 링크 셀 렌더러
 *
 * {@link SignalBarCellRenderer}: 시그널 바 렌더러
 *
 * {@link Code39CellRenderer}: 바코드 렌더러
 *
 * {@link Code128CellRenderer}: 바코드 렌더러
 *
 * {@link SeriesTextCellRenderer}: 시리즈 텍스트 렌더러
 *
 * {@link SparkLineRenderer}: 시리즈 스파크 라인 렌더러
 *
 * {@link SparkColumnRenderer}: 시리즈 컬럼 렌더러
 *
 * {@link SparkWinLossRenderer}: 시리즈 윈 로스 렌더러
 *
 * {@link TemplateCellRenderer}: 템플릿 렌더러
 *
 * @warning CellRenderer 로 직접 설정하거나 호출할 수 없다.
 *
 * @example
 * ```js
 * // string type
 * column.renderer = "text"
 *
 * // object type
 * column.renderer = { type: "text", showTooltip: true}
 * ```
 */
export declare interface CellRenderer {
    /**
     * 렌더러의 종류
     *
     * @remarks
     * {@link TextCellRenderer}: `'text'`
     *
     * {@link BarCellRenderer}: `'bar'`
     *
     * {@link ImageCellRenderer}: `'image'`
     *
     * {@link IconCellRenderer}: `'icon'`
     *
     * {@link CheckCellRenderer}: `'check'`
     *
     * {@link ButtonCellRenderer}: `'button'`
     *
     * {@link ShapeCellRenderer}: `'shape'`
     *
     * {@link LinkCellRenderer}: `'link'`
     *
     * {@link SignalBarCellRenderer}: `'signalbar'`
     *
     * {@link Code39CellRenderer}: `'code39'`
     *
     * {@link Code128CellRenderer}: `'code128'`
     *
     * {@link SeriesTextCellRenderer}: `'series'`
     *
     * {@link SparkLineRenderer}: `'sparkline'`
     *
     * {@link SparkColumnRenderer}: `'sparkcolumn'`
     *
     * {@link SparkWinLossRenderer}: `'sparkswinloss'`
     *
     * {@link TemplateCellRenderer}: `'template'`
     */
    type?: string;
    /**
     * 툴팁 표시 여부
     */
    showTooltip?: boolean;
    /**
     * ellipsis상태인 셀에서만 툴팁 표시 여부
     */
    tooltipEllipsisOnly?: boolean;
    /**
     * aria-label을 직접 설정할경우 사용하는 콜백
     *
     *
     * @remarks
     * 스크린 리더가 셀의 정보를 읽을때 사용할 문자열을 설정한다.
     *
     * {@link GetAriaLabelCallback} 의 형식을 따른다.
     *
     * [프로퍼티 목록]
     *
     * `grid` - GridBase 컨트롤
     *
     * `model` - 그리드의 셀
     *
     * @eventProperty
     * @example
     * ```js
     * const f = function(grid, model) {
     *      var s = model.value;
     *      var date = grid.getValue(model.item.index, "date")
     *      s += (date.getTime() > Date.now() - 60*60*24*7*1000) ? " 신규" : "";
     *      return s;
     * }
     *
     * column.renderer = {
     *      type: 'text',
     *      ariaLabelCallback: f
     * }
     * ```
     */
    ariaLabelCallback?: GetAriaLabelCallback;
    /**
     * `true`이면 focus된 셀 또는 focus가 이동할수 있는 셀인 경우에만 click이벤트가 발생하도록 한다.
     *
     * @remarks
     * {@link GridBase.onCurrentChanging} 이벤트에서 false를 return하는 경우 check, link등의 기본동작이 실행되는것을 방지하기위해 사용.
     *
     * @defaultValue `true`
     */
    clickOnlyFocusedCell?: boolean;
}

/**
 * @public
 * 사용자 지정의 cell spanning을 설정하기 위한 콜백
 *
 * @remarks
 * {@link CellLayoutColumnItem} 에서 사용된다.
 *
 * [매개변수 목록]
 * `grid` - GridBase 컨트롤
 *
 * `layout` - 레이아웃 아이템
 *
 * `itemIndex` - 행의 인덱스
 *
 * @example
 * ```js
 * 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;
 * };
 * ```
 */
export declare type CellSpanCallback = (grid: GridBase, layout: CellLayoutColumnItem, itemIndex: number) => number;

/**
 * @public
 * 동적 셀 스타일 변경을 위한 콜백
 *
 * @remarks
 * {@link ColumnStyleObject} 를 반환 할 때는 {@link GridBase.setCellStyleCallback}, {@link ValueColumn.styleCallback} 에서 사용한다.
 *
 * {@link ColumnSummaryStyleObject} 를 반환 할 때는 {@link GridFooter.cellStyleCallback}, {@link HeaderSummary.cellStyleCallback} 에서 사용한다.
 *
 * 문자열 반환 시 스타일 명으로 지정
 *
 * [매개변수 목록]
 *
 * `grid` - GridBase 컨트롤
 *
 * `model` - 그리드의 셀
 *
 * [반환값] - 동적 스타일을 부여하기 위한 오브젝트 혹은 스타일 클래스 명
 *
 * @example
 * ```js
 * 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;
 * ```
 */
export declare type CellStyleCallback = (grid: GridBase, model: GridCell) => string | ColumnStyleObject | ColumnSummaryStyleObject | undefined;

/**
 * {@link CheckBar} 에서 체크 가능 여부를 결정하는 콜백
 *
 * @remarks
 *
 * [매개변수 목록]
 *
 * `dataSource` - DataProvider 컨트롤
 *
 * `item` - 체크의 대상이 되는 아이템 (행 아이템, 헤더 아이템 등)
 *
 * [반환값] - 체크 가능 여부
 *
 * @example
 * ```js
 * const f = function(dataSource, item) {
 *      if (item.value) {
 *          return item.value !== 'doNotCheck';
 *      }
 *      else {
 *          return false;
 *      }
 * }
 * ```
 */
export declare type CheckableCallback = (dataSource: any, item: any) => boolean;

/**
 * 체크바와 관련된 설정 모델
 *
 * @remarks
 * 체크바 영역에서 shift를 누른 상태에서 이전의 행이나 이후의 행을 클릭하면 일괄체크
 *
 * {@link GridBase.setCheckBar} 사용시 필요한 정보만 입력하면 된다.
 *
 * @example
 *
 * ```js
 * gridView.setCheckBar({exclusive: true});
 * ```
 */
export declare interface CheckBar {
    /**
     * 너비
     *
     * @defaultValue `20`
     */
    width?: number;
    /**
     * 한 행만 체크 가능한지의 여부
     *
     * @defaultValue `false`
     */
    exclusive?: boolean;
    /**
     * exclusive가 `true`일때 radio의 check상태가 전환된다.
     *
     * @defaultValue `false`
     */
    toggleRadio?: boolean;
    /**
     * 체크바 헤드에 “v” 표시 여부
     *
     * @remarks
     * 표시 후 체크 시 전체 체크
     *
     * @defaultValue `true`
     */
    showAll?: boolean;
    /**
     * 행 그룹핑시 그룹 헤더 영역에 체크박스 표시 여부
     *
     * @defaultValue `true`
     */
    showGroup?: boolean;
    /**
     * 행 그룹핑시 그룹 푸터 영역에 체크박스 표시 여부
     *
     * @remarks
     * {@link CheckBar.showGroup}이 `false`인 경우에는 값이 `true`여도 표시되지 않는다.
     *
     * @defaultValue `true`
     */
    showGroupFooter?: boolean;
    /**
     * 체크바 헤드를 체크하여 전체선택 시 보이는 행만 체크할 것인지의 여부
     *
     * @defaultValue `true`
     */
    visibleOnly?: boolean;
    /**
     * 체크 가능한 행만 체크할 수 있는지의 여부
     *
     * @remarks
     * checkableExpression 에서 체크 가능 여부를 지정할 수 있다.
     *
     * @defaultValue `true`
     */
    checkableOnly?: boolean;
    /**
     * 체크 가능 여부의 수식
     */
    checkableExpression?: string;
    /**
     * 체크 가능 여부를 결정하는 콜백
     * @eventProperty
     *
     * @remarks
     * `false` 반환 시 체크가 불가능하다.
     *
     * @example
     * ```js
     * const f = function(dataSource, item) {
     *      if (item.value) {
     *          return item.value !== 'doNotCheck';
     *      }
     *      else {
     *          return false;
     *      }
     * }
     *
     * gridView.setCheckBar({checkableCallback: f});
     * ```
     */
    checkableCallback?: CheckableCallback;
    /**
     * 데이터 영역의 전체 item 체크 상태와 체크바의 헤드 연동 여부
     *
     * @remarks
     * 데이터행의 모든 item이 체크되면 Head영역에도 자동으로 체크가 됨
     *
     * @defaultValue `false`
     */
    syncHeadCheck?: boolean;
    /**
     * 일부만 체크되었을때 head영역의 checkBox에 일부선택 표시여부
     *
     * @defaultValue `false`
     */
    headThreeStates?: boolean;
    /**
     * checkBox의 위치를 지정한다.
     *
     * @remarks
     * headText가 표시될때 checkBox의 위치를 지정한다. checkBar의 너비 또는 {@link GridHeader.height} 높이를 적절히 변경해야 한다.
     *
     * @defaultValue `top`
     */
    checkLocation?: ColumnHeaderItemLocation;
    /**
     * checkBox와 headText의 간격을 지정한다.
     *
     * @defaultValue `5`
     */
    itemGap?: number;
    /**
     * checkBar의 체크상태를 dataField와 연결한다.
     *
     * @defaultValue `null`
     */
    fieldName?: string;
    /**
     * checkBar의 check를 image를 이용해서 표시한다.
     *
     * @defaultValue `false`
     */
    useImages?: boolean;
    /**
     * 체크바, 상태바, 인디케이터 중에서 보여지는 순서 (인덱스)
     *
     * @remarks
     * 숫자가 작을 수록 왼쪽에 배치된다.
     */
    displayOrder?: number;
    /**
     * head 영역에 표시할 텍스트
     *
     * @defaultValue `null`
     */
    headText?: string;
    /**
     * foot 영역에 표시할 텍스트
     *
     * @defaultValue `null`
     */
    footText?: string;
    /**
     * summary 영역에 표시할 텍스트
     *
     * @defaultValue `null`
     */
    sumText?: string;
    /**
     * 팝업 메뉴
     */
    popupMenu?: PopupMenuItem[] | string;
    /**
     * 표시 여부
     */
    visible?: boolean;
    /**
     * CheckBox 머지 규칙
     *
     * @remarks
     * 지정된 field에서 동일한 값을 가지는 행들의 CheckBox를 묶어서 보여지도록 한다.
     *
     * @example
     * ```js
     * gridView.checkBar.mergeRule = "values['fieldName']";
     * gridView.checkBar.mergeRule = "values['field1'] + values['field2']";
     * ```
     */
    mergeRule?: string;
    /**
     * checkBox를 클릭했을때 클릭된 행으로 focus이동여부
     *
     * @defaultValue `false`
     */
    focusMove?: boolean;
    /**
     * 셀의 스타일을 지정하기 위한 콜백
     */
    cellStyleCallback?: RowBarCellStyleCallback;
    /**
     * focus 된 행에 해당하는 셀의 스타일 적용여부 여부
     *
     * @remarks
     * `true`면 focus 된 행에 해당하는 셀을 `'rg-checkbar-focus'` 스타일로 표시한다.
     *
     * @defaultValue `false`
     */
    showFocus?: boolean;
    /**
     * 데이터 선택 영역에 맞춰 관련된 셀들의 스타일 적용 여부
     *
     * @remarks
     * `true`면 데이터 선택 영역에 맞춰 관련된 셀들을 `'rg-checkbar-select'` 스타일로 표시한다.
     *
     * @defaultValue `false`
     */
    showSelection?: boolean;
    /**
     * 툴팁 표시 여부
     *
     * @defaultValue `false`
     */
    showTooltip?: boolean;
}

/**
 * @public
 *
 * 값이 참인지 거짓인지를 표시하는 렌더러
 *
 * @remarks
 * 셀의 값을 `true`/`false` 두 가지 상태로 표시하는 렌더러이다.
 *
 * 컬럼에 연결된 필드의 자료형이 `Boolean`이 아니라면, 렌더러의 `trueValues` 에 지정된 값들을 `true`로, `falseValues` 로 지정된 값들을 `false`로 판단한다.
 *
 * 자동 높이에서 `TOP_EDGE`, `BOTTOM_EDGE`를 사용할 수 없다.
 *
 * [상위 클래스]
 *
 * {@link CellRenderer}
 *
 * @example
 * ```js
 * // string type
 * column.renderer = 'check';
 *
 * // object type
 * column.renderer = {
 *      "type": "check",
 *      "trueValues": "France,Germany",
 *      "falseValues": "Korea,England"
 * }
 * ```
 */
export declare interface CheckCellRenderer extends CellRenderer {
    /**
     * 종류: 체크
     */
    type?: 'check';
    /**
     * 렌더링 시 체크 값을 결정하는 콜백
     *
     * @remarks
     * `true` 반환 시 체크 값을 `false`로 간주한다.
     *
     * 지정하지 않은 경우나, `undefined` 반환 시 체크 값을 `true`로 간주한다.
     *
     * `false` 반환시 `threeStates` 가 `true` 일 경우 체크값을 `undefined`로, 아닐 경우 `true` 로 간주한다.
     *
     * `setCheckedCallback` 가 지정되어 있지 않아야 반환값이 체크 값에 영향을 미친다.
     *
     * {@link GetCheckedCallback} 의 형식을 따른다.
     * @eventProperty
     *
     * @example
     * ```js
     * const f = function(grid, itemIndex, column, value) {
     *      if (typeof value === "number") {
     *          return value % 2 === 1;
     *      }
     *      else if (typeof value ==="boolean") {
     *          return value;
     *      }
     *      else {
     *          return Boolean(v);
     *      }
     * }
     *
     * column.renderer = {
     *          "type": "check",
     *          "getCheckedCallback": f
     * }
     * ```
     */
    getCheckedCallback?: GetCheckedCallback;
    /**
     * 편집 시 체크 결과 값을 결정하는 콜백
     *
     * @remarks
     * 편집 시 `getCheckedCallback` 보다 우선하여 체크 값을 지정한다.
     *
     * {@link SetCheckedCallback} 의 형식을 따른다.
     *
     * @eventProperty
     * @example
     * ```js
     * const f = function(grid, itemIndex, column, oldValue, checked) {
     *      if (itemIndex % 2 === 0) {
     *          return checked;
     *      }
     *      else {
     *          return false;
     *      }
     * }
     * column.renderer = {
     *     "type": "check",
     *     "setCheckedCallback": f
     * }
     * ```
     */
    setCheckedCallback?: SetCheckedCallback;
    /**
     * boolean 자료형이 아닌 필드에서 `true` 로 간주할 값들
     *
     * @remarks
     * 콤마(,)로 구분하여 입력한다.
     *
     * @example
     * ```js
     * column.renderer = {
     *     "type": "check",
     *     "trueValues": "France,Germany"
     * }
     * ```
     */
    trueValues?: string;
    /**
     * boolean 자료형이 아닌 필드에서 `false` 로 간주할 값들
     *
     * @remarks
     * 콤마(,)로 구분하여 입력한다.
     *
     * @example
     * ```js
     * column.renderer = {
     *     "type": "check",
     *     "falseValues": "Korea,England"
     * }
     * ```
     */
    falseValues?: string;
    /**
     * boolean 자료형과 `trueValues` 나 `falseValues` 에 속하는 값이 없을 경우 intermediate 상태로 표시 할 것인지의 여부
     *
     * @remarks
     * `threeStates` 가 `true`며, 값이 `trueValues`, `falseValues` 에 포함되지 않는 경우 intermediate 상태로 표시된다.
     *
     * @defaultValue `false`
     */
    strictValue?: boolean;
    /**
     * intermediate 상태를 포함할 건지의 여부
     *
     * @remarks
     * `strictValue` 와 같이 쓰이거나, 값이 `''`, `undefined`, 또는 `null` 이면 intermediate 상태로 간주한다.
     *
     * @defaultValue `false`
     */
    threeStates?: boolean;
    /**
     * 스페이스 바로 체크를 가능하게 할 것인지의 여부
     *
     * @defaultValue `true`
     */
    spaceKey?: boolean;
    /**
     * enterKey로 체크를 가능하게 할 것인지의 여부
     *
     * @defaultValue `false`
     */
    enterKey?: boolean;
    /**
     * 체크박스의 위치
     *
     * @defaultValue {@link IconLocation.CENTER}
     */
    checkLocation?: IconLocation;
    /**
     * 체크박스 대신에 이미지를 사용할 것인지의 여부
     *
     * @remarks
     * 각 css 클래스에 이미지를 지정하면 된다.
     *
     * [css 스타일 명 목록]
     *
     * 체크 `true` 스타일 명:  "rg-check-renderer-checked"
     *
     * 체크 `false` 스타일 명:  "rg-check-renderer-unchecked"
     *
     * `intermediate` 스타일 명:  "rg-check-renderer-intermediate"
     *
     * @defaultValue `false`
     */
    useImages?: boolean;
    /**
     * 체크 표시랑 별개로 편집기로 수정 가능한지의 여부
     *
     * @defaultValue `true`
     */
    editable?: boolean;
    /**
     * 선택 시 표시되는 내부 focus 표시 여부
     *
     * @defaultValue `false`
     */
    showInnerFocus?: boolean;
    /**
     * editable이 false인 경우 disabled로 표시할지 여부
     *
     * @defaultValue `false`
     */
    readOnlySetDisabled?: boolean;
}

/**
 * @public
 *
 * 클릭한 아이템의 정보 모델
 *
 * @remarks
 * {@link GridBase.onMenuItemClicked} 이나 {@link GridBase.onCellClicked} 등 클릭 관련 콜백에서 사용하는 아이템의 정보 모델이다.
 *
 * @example
 * ```js
 * gridView.onMenuItemClicked =  function (grid, item, clickData) {
 *      console.log(item.label + "was clicked.");
 *      console.log("cellType is: " + clickData.cellType);
 * };
 * ```
 */
export declare interface ClickData {
    /**
     * 클릭한 셀의 종류
     */
    cellType?: GridCellType;
    /**
     * 클릭한 대상의 서브 타입
     */
    subType?: GridCellType;
    /**
     * 클릭한 대상의 필드
     */
    field?: number;
    /**
     * 클릭한 대상이 위치한 순서
     */
    itemIndex?: number;
    /**
     * 클릭한 셀의 컬럼
     */
    column?: string;
    /**
     * 클릭한 셀의 인덱스
     *
     * @remarks
     * footer, summary 등의 인덱스이다.
     */
    index?: number;
    /**
     * 클릭한 셀의 그룹 레벨
     */
    groupLevel?: number;
    /**
     * 클릭한 셀이 DataCell인 경우 dataRow
     */
    dataRow?: number;
    /**
     * 셀이 DataCell이면서 클릭한 element가 renderer의 item인 경우 renderer의 type
     */
    type?: string;
    /**
     * linkCellRenderer의 A Tag를 클릭했을때 url
     */
    url?: string;
    /**
     * 클릭한 대상의 필드명
     */
    fieldName?: string;
    /**
     * 클릭한 셀의 종류가 data인 경우의 데이터 값
     */
    value?: any;
    /**
     * TemplateCellRenderer의 HtmlElement를 클릭했을때 target
     */
    target?: HTMLElement;
    /**
     * 스크롤바의 수직여부
     *
     * @remarks
     * 세로스크롤바인 경우 `true`이다
     */
    vertical?: boolean;
    /**
     * 스크롤 버튼의 상하 또는 좌우 여부
     *
     * @remarks
     * 오른쪽 또는 아래쪽 버튼인 경우 `true`이다
     */
    far?: boolean;
}

/**
 * @public
 *
 * Code128 Barcode를 표시하는 렌더러
 *
 * @remarks
 * 셀의 값으로 Code128 바코드를 생성한다.
 *
 * [상위 클래스]
 *
 * {@link CellRenderer}
 *
 * @example
 * ```js
 * // string type
 * column.renderer = 'code128';
 *
 * // object type
 * let column.renderer = {
 *      "type": "code128",
 *      "barStyle": "custom-code128-renderer-bar"
 * }
 * ```
 */
export declare interface Code128CellRenderer extends CellRenderer {
    /**
     * 종류: code128 바코드
     */
    type?: 'code128';
    /**
     * 바코드의 바 클래스 스타일 명
     * @defaultValue `'rg-code128-renderer-bar'`
     */
    barStyle?: string;
}

/**
 * @public
 *
 * Code39 Barcode를 표시하는 렌더러
 *
 * @remarks
 * 셀의 값으로 Code39 바코드를 생성한다.
 *
 * [상위 클래스]
 *
 * {@link CellRenderer}
 *
 * @example
 * ```js
 * // string type
 * column.renderer = 'code39';
 *
 * // object type
 * let column.renderer = {
 *     "type": "code39",
 *     "barStyle": "custom-code39-renderer-bar"
 * }
 * ```
 */
export declare interface Code39CellRenderer extends CellRenderer {
    /**
     * 종류: code39 바코드
     */
    type?: 'code39';
    /**
     * 바코드의 바 클래스 스타일 명
     * @defaultValue `'rg-code39-renderer-bar'`
     */
    barStyle?: string;
}

/**
 * 컬럼 필터링에 관련된 설정 정보
 *
 * @remarks
 * {@link GridBase.onFilteringChanged} 나 {@link GridBase.getColumnFilter} 같은 필터 관련 메소드에서 사용된다.
 *
 * {@link GridBase.setColumnFilters} 같이 설정을 위한 형식일 때에는, 원하는 정보만 넣으면 된다.
 */
export declare interface ColumnFilter {
    /**
     * 이름
     */
    name: string;
    /**
     * 표현식
     *
     * @remarks
     * criteria 또는 callback 둘중 하나는 지정되어야 한다.