Properties

그룹 소계 행의 표시 위치를 마지막 그룹핑 필드에 맞춰 정렬할지 지정합니다.

이 속성은 fillValueGroupingSummary=true 설정이 선행되어야 합니다.

Also See : fillValueGroupingSummary

관련 데모 보기

퍼센트(%) 너비를 가진 칼럼의 계산 기준을 지정합니다. true이면 고정 너비 칼럼을 제외한 나머지 너비를 기준으로 비율을 적용합니다.

예를 들어 칼럼을 3개 만든 경우 각각 "100", "50%", "50%" 로 작성했을 때 다음 처럼 반응합니다.

• applyRestPercentWidth = false 인 경우 : 100 픽셀을 무시하고 전체 그리드 사이즈의 50% 공간을 각각 2번째, 3번째 칼럼 사이즈로 할당합니다.
• applyRestPercentWidth = true 인 경우 : 전체 그리드 사이즈에서 100 픽셀을 제외한 공간에서 각각 50% 씩 칼럼 사이즈로 할당합니다.

이 속성은 칼럼의 width 속성을 명시적 사이즈와 퍼센티지 사이즈를 혼용해서 사용할 때만 유효합니다.

관련 데모 보기

터치 기기에서 셀을 한 번 탭하여 편집을 시작할지 지정합니다. PC에서는 editBeginMode 설정을 따릅니다.

관련 데모 보기

셀 편집 중 그리드 밖의 HTML 영역을 누르면 편집을 종료할지 지정합니다.

셀 편집 중 전역 resize 이벤트가 발생하면 편집을 종료할지 지정합니다. 창 크기 변경과 편집 종료를 연계하는 설정입니다.

global resize 이벤트는 일반적으로 최상위 계층인 window 창의 크기가 변경된 경우를 의미 합니다.

터치 디바이스의 경우 소프트 키보드의 유무에 의해 global resize 이벤트가 발생하기 때문에 이 속성은 false 로 처리됩니다.

데이터를 세로 스크롤 없이 표시하도록 그리드 높이를 자동으로 조정할지 지정합니다.

데이터를 삽입하기 전(또는 데이터 없는 경우)에는 최초 지정된 높이로 그리드가 출력되며 데이터를 삽입하거나 행을 추가하면 유동적으로 그리드의 높이는 맞게 변경됩니다.

이 속성을 true 로 설정하면 resize 메소드를 통해 사용자가 높이를 지정할 수 없습니다.

wordWrap 을 true 로 설정한 경우 이 속성은 무시됩니다. (단, usePaging=true, wordWrap=true 인 경우 autoGridHeight 은 사용 가능)

그리드의 세로 스크롤이 없이 데이터를 모두 출력하므로 많은 양의 데이터를 초기에 넣지 마십시오. 퍼포먼스에 악영향을 미칩니다.

Also See : wordWrap, usePaging

페이징을 사용하면 현재 페이지의 모든 행이 보이도록 높이를 조정합니다.

관련 데모 보기

터치 기기와 데스크톱에 서로 다른 스크롤바 크기를 적용할지 지정합니다. true이면 터치 기기에서는 scrollHeight4Mobile, 데스크톱에서는 scrollHeight를 사용합니다.

관련 데모 보기

숫자형(dataType="numeric") 셀을 편집할 때 빈 입력을 null로 저장할지 지정합니다.

true이면 null, false이면 0으로 적용합니다.

셀 편집 시 빈 문자열을 null로 저장할지 지정합니다.

true이면 null, false이면 빈 문자열로 적용합니다. 숫자형 셀은 blankNumericToNullOnEditing 설정을 따릅니다.

그리드 바디의 칼럼 배치 방식을 지정합니다.

• "flat" : 최하위 칼럼을 나란히 표시합니다.
• "band" : bodyCell이 true인 상위 칼럼의 값을 자식 셀 위에 표시합니다. 상위 칼럼에도 dataField가 필요합니다.
• "flatAll" : dataField가 있는 상위 칼럼과 하위 칼럼을 부모 다음 자식 순서로 펼쳐, 헤더와 바디를 한 줄의 칼럼으로 표시합니다.

band의 rowHeight는 데이터 한 행의 전체 높이이며, 상위 셀 높이는 bodyCellHeight로 지정합니다. band에서는 wordWrap과 enableCellMerge를 사용할 수 없습니다.

band에서 그룹핑하면 groupingBranchMode는 설정값과 관계없이 "singleColumn"으로 적용됩니다.

flatAll에서는 bodyCell 설정과 관계없이 dataField가 있는 상위 칼럼을 펼칩니다.

// 밴드형으로 표시합니다.
AUIGrid.setProp(myGridID, { bodyLayoutMode: "band", rowHeight: 120 });
AUIGrid.refresh(myGridID);

// 모든 칼럼을 한 줄로 펼칩니다.
AUIGrid.setProp(myGridID, { bodyLayoutMode: "flatAll", rowHeight: 32 });
AUIGrid.refresh(myGridID);

관련 데모 보기

가로 병합(cellColMerge)을 사용하는 경우, 행별로 가로 병합을 적용할지 판단하는 함수를 지정합니다.

cellColMergeFunction는 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)

Return : (Boolean) true 를 반환하면 가로 병합 실행, false 를 반환하면 가로 병합 하지 않습니다.

 cellColMergeFunction : function(rowIndex, column, item) {
   if(item.name === "Anna") { // 이름이 "Anna" 행은 가로 병합 하지 않습니다.
        return false; // false 를 반환하면 가로 병합 하지 않음
   }
   return true;
}

주의 : 이 속성의 값으로 지정된 함수는 렌더링 시 빈번히 호출됩니다. 따라서 이곳에서 DOM 검색이나, 복잡한 로직은 삼가하십시오. 성능에 영향을 미칩니다.

관련 데모 보기

cellMergeRowSpan이 false인 세로 병합 셀의 텍스트 표시 위치를 지정합니다.

• "top" : 첫 표시 행에 값을 표시합니다.
• "center" : 화면에 보이는 병합 구간의 중앙에 표시합니다. 고정 행과 스크롤 영역은 각각 계산합니다.

기본 텍스트 렌더러에 적용하며 버튼 등의 렌더러는 기존 위치를 유지합니다.

const gridProps = {
    enableCellMerge: true,
    cellMergeRowSpan: false,
    cellMergeLabelPosition: "center"
};

관련 데모 보기

세로 셀 병합에서 빈값(null, undefined, "")을 처리하는 방식을 지정합니다. enableCellMerge=true인 경우 적용되는 병합 정책입니다.

세로 병합에 한해 널 데이터의 병합 정책을 결정 짓습니다. 이와 무관하게 가로 병합은 온전히 값이 같아야 병합됩니다.

유효 값은 "default", "withNull", "valueWithNull" 입니다.

• default : null 을 셀 병합에서 제외하여 병합을 실행하지 않습니다.
• withNull : null 도 하나의 값으로 간주하여 다수의 null 을 병합된 하나의 공백으로 출력 시킵니다.
• valueWithNull : null 이 상단의 값과 함께 병합되어 출력 시킵니다.

관련 데모 보기

세로 셀 병합을 실제 rowspan으로 표시할지 지정합니다. enableCellMerge가 true일 때 적용합니다.

false이면 개별 셀을 선택하거나 편집할 수 있으며, 텍스트 위치는 cellMergeLabelPosition으로 지정합니다.

관련 데모 보기

행 체크박스 칼럼의 헤더에서 전체 체크박스를 표시하지 않을 때 사용할 텍스트를 지정합니다.

헤더의 컨텍스트 메뉴 항목을 지정합니다. 각 메뉴 항목을 객체로 작성하고 배열로 묶어 설정합니다.

다음은 사용자 정의한 컨텍스트 아이템들 예시입니다.

// 헤더 컨텍스트 메뉴 사용자 정의
 const myContextMenus = [{
     // label 에 $value 를 설정하면 마우스가 있는 곳의 헤더 텍스트 값으로 대체됩니다.
     label : "$value (커스텀)",  callback : contextItemHeaderHandler 
 }, {
     label : "_$line" // label 에 _$line 을 설정하면 라인을 긋는 아이템으로 인식합니다.
 }, {
     label: "오름 차순 정렬", callback: contextItemHeaderHandler
 }, {
     label: "내름 차순 정렬", callback: contextItemHeaderHandler
 }];

• label (String) : 컨텍스트 메뉴에 표시될 텍스트 입니다. label 에 $value 를 설정하면 마우스가 있는 곳 헤더 텍스트 값으로 대체되어 출력됩니다.
• style (String) : 개별 아이템의 스타일을 지정합니다. 유효값은 CSS 의 클래스 선언자명입니다.
• disable (Boolean) : 컨텍스트 메뉴의 비활성화 여부를 지정합니다.
• children (Array) : 서브 메뉴의 컨텍스트를 작성합니다.
• callback (Function) : 컨텍스트 메뉴에서 아이템을 선택했을시 호출 되는 함수입니다. callback 의 파라메터는 event 로 요소는 다음과 같습니다.
  • columnIndex : 칼럼 인덱스
  • contextIndex : 컨텍스트 메뉴 구성 인덱스
  • contextDepth : 컨텍스트 메뉴 구성의 깊이(depth)
  • contextItem : 컨텍스트 메뉴 아이템 (Object)
  • dataField : 칼럼의 데이터 필드명
  • pid : 그리드 부모 DIV의 ID
  • depth : 헤더를 그룹형(계층형)으로 작성한 경우 계층(depth)
  • target : 컨텍스트 메뉴 구성 타겟. 헤더 컨텍스트 메뉴이므로 "header" 값을 갖음
  • value : 컨텍스트 지점의 헤더 텍스트
• isGroup : 헤더를 그룹형(계층형)으로 작성한 경우 그룹 헤더인 지 여부

관련 데모 보기

그리드의 컨텍스트 메뉴 항목을 지정합니다. 각 메뉴 항목을 객체로 작성하고 배열로 묶어 설정합니다.

다음은 사용자 정의한 컨텍스트 아이템들 예시입니다.

// 컨텍스트 메뉴 사용자 정의
 const myContextMenus = [{
     // label 에 $value 를 설정하면 마우스가 있는 곳의 value 값으로 대체됩니다.
     label : "$value (커스텀)",  callback : contextItemHandler 
 }, {
     label : "_$line" // label 에 _$line 을 설정하면 라인을 긋는 아이템으로 인식합니다.
 }, {
     label : "Export To Excel", callback : contextItemHandler
 }, {
     label : "Open Google.com", callback : contextItemHandler
 }];

• label (String) : 컨텍스트 메뉴에 표시될 텍스트 입니다. label 에 $value 를 설정하면 마우스가 있는 곳의 value 값으로 대체되어 출력됩니다.
• style (String) : 개별 아이템의 스타일을 지정합니다. 유효값은 CSS 의 클래스 선언자명입니다.
• disable (Boolean) : 컨텍스트 메뉴의 비활성화 여부를 지정합니다.
• children (Array) : 서브 메뉴의 컨텍스트를 작성합니다.
• callback (Function) : 컨텍스트 메뉴에서 아이템을 선택했을시 호출 되는 함수입니다. callback 의 파라메터는 event 로 요소는 다음과 같습니다.
  • columnIndex : 칼럼 인덱스. 밴드형 상위 셀은 첫 하위 칼럼의 인덱스
  • depth : 밴드형 칼럼의 헤더 기준 깊이. 최상위는 1
  • rowIndex : 행 인덱스
  • contextIndex : 컨텍스트 메뉴 구성 인덱스
  • contextDepth : 컨텍스트 메뉴 구성의 깊이(depth)
  • contextItem : 컨텍스트 메뉴 아이템 (Object)
  • bodyCellKind : 밴드형 셀의 종류. 상위 셀은 "branch", 하위 셀은 "leaf"
  • dataField : 칼럼의 데이터 필드명
  • item : 해당 행의 데이터 (Object)
  • pid : 그리드 부모 DIV의 ID
  • target : 컨텍스트 메뉴 구성 타겟. 바디 컨텍스트 메뉴이므로 "body" 값을 갖음
  • value : 셀 값

관련 데모 보기

셀이나 행을 복사할 때 원본 값과 포매팅된 표시 값 중 무엇을 복사할지 판단하는 함수를 지정합니다. 복사할 값의 형식을 동적으로 결정할 때 사용합니다.

예를 들어 실 데이터는 1000 이나, 그리드에 의해 "1,000원" 으로 포매팅되어 출력되고 있을 때 Ctrl+C 로 복사할 대상이 1000 또는 "1,000원" 인지를 동적으로 결정하게 됩니다.

copyDisplayFunction 는 copyDisplayValue 속성보다 우선 순위가 높습니다. 따라서 copyDisplayFunction 를 지정하면 copyDisplayValue 는 무시됩니다.

copyDisplayFunction는 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

  copyDisplayFunction : function(rowIndex, columnIndex, value, item, columnItem) {
    // 드랍다운 리스트를 에디터로 작성한 경우는 포매팅된 값을 복사하도록 지시
    if(columnItem.editRenderer && columnItem.editRenderer.type === "DropDownListRenderer") {
         return true
    }
    return false; // 그 외는 일반 원래 값 복사하도록 지시
 }

• rowIndex : 행 인덱스
• columnIndex : 칼럼 인덱스
• value : 해당 셀의 값
• item : 해당 셀에 출력되고 있는 행 아이템 객체 (Object)
• columnItem : 해당 셀에 출력되고 있는 칼럼 아이템 객체 즉, 칼럼 레이아웃에서 정의한 객체 (Object)

Return : (Boolean) true 를 반환하면 포매팅된 값을, false 반환하면 원래(실제) 값을 복사하게 결정합니다.

밴드형 상위 셀의 columnIndex는 첫 하위 칼럼의 인덱스입니다. columnItem과 dataField로 칼럼을 구분하십시오.

셀이나 행을 복사할 때 포매팅된 표시 값을 사용할지 지정합니다. true이면 표시 값을, false이면 원본 데이터 값을 복사합니다.

예를 들어 실 데이터는 1000 이나, 그리드에 의해 "1,000원" 으로 포매팅되어 출력되고 있을 때 Ctrl+C 로 복사할 대상이 1000 또는 "1,000원" 인지를 지정합니다.

copyDisplayValue = true 인 경우 "1,000원" 이 복사됩니다.

같은 값으로 병합된 셀들을 복사할 때, 병합 영역을 하나의 셀 값으로 복사할지 지정합니다.

예로 '대한민국' 으로 5개의 셀이 병합되어 출력된 경우 그 5개의 셀을 선택한 경우 다음처럼 결정됩니다.

• copySingleCellOnMerge = true 설정 : '대한민국' 하나의 값이 복사됩니다.
• copySingleCellOnMerge = false 설정 : 선택한 셀 개수 그대로 5개의 값이 복사됩니다.

행 선택 모드(selectionMode="singleRow" 또는 "multipleRows")에서 행 전체 대신 선택한 셀 하나의 값만 복사할지 지정합니다.

기본적으로 "singleRow", "multipleRows" 인 경우, 행 단위로 복사가 이루어집니다.

그러나 행 모드인 경우 선택된 단일 셀을 복사하고자 한다면 이 속성을 true 설정하십시오.

관련 데모 보기

여러 셀을 블록으로 복사할 때 헤더 텍스트를 함께 포함할지 지정합니다. true이면 아래 조건에 따라 헤더가 복사 결과에 추가됩니다.

헤더가 그룹(계층형)으로 작성된 경우 계층 관계가 모두 포함되지 않습니다. 최하단에 속하는 실질적 헤더 텍스트만 포함됩니다.

단일 셀 값 복사할 때는 헤더 텍스트가 추가되지 않습니다.(최소 2개 이상이 선택된 경우만 포함 시킴)

관련 데모 보기

칼럼 레이아웃에서 width를 지정하지 않은 칼럼에 적용할 기본 너비를 지정합니다.

관련 데모 보기

헤더의 가로 병합(colSpan)에 포함된 칼럼을 숨기거나 표시할 때, 함께 병합된 칼럼에도 같은 표시 상태를 적용할지 지정합니다.

Also See : hideColumnByDataField | showColumnByDataField

모달 HTML dialog 안에 그리드를 표시할 때 해당 dialog의 ID를 지정합니다. 드롭다운, 달력, 필터 같은 팝업 레이어가 dialog를 기준으로 표시되도록 하는 설정입니다.

마우스를 누른 채 드래그하여 선택 범위를 변경하는 도중에도 selectionChange 이벤트를 발생시킬지 지정합니다.

기본값은 마우스를 누르고 이동한 후 최종적으로 뗀 경우(mouseUp 한 경우)에만 발생합니다.

관련 데모 보기

그룹핑 소계를 별도 소계 행 대신 그룹 브랜치 행에 함께 표시할지 지정합니다.

Also See : groupingBranchMode

관련 데모 보기

트리 그리드를 처음 표시할 때 브랜치를 펼칠지 지정합니다. true이면 모두 펼치고, false이면 최상위 브랜치만 표시합니다.

참고 : treeLazyMode 를 사용하는 경우 이 속성은 무시됩니다.

Also See : treeLazyMode

관련 데모 보기

셀 범위를 드래그할 때 포인터 옆에 표시할 HTML 문자열을 반환합니다. enableDragCells가 true인 경우 사용하며 기본값 null은 툴팁을 표시하지 않습니다.

함수 형식: function(rowIndex, columnIndex, item). 인자는 현재 목적 그리드의 행 인덱스, 칼럼 인덱스와 행 객체입니다. 그리드 간 드래그에서도 출발지에 지정한 함수를 호출합니다. 외부 입력을 HTML에 넣을 때는 이스케이프하여 사용하십시오. setProp으로 변경한 함수는 다음 드래그부터 적용합니다.

gridProps.dragCellsTooltipFunction = function(rowIndex, columnIndex, item) {
    return (rowIndex + 1) + "행에 놓기";
};

Also See : enableDragCells | dropCellsEndBefore | dropCellsEnd

행 드래그 손잡이가 표시되는 엑스트라 칼럼의 너비를 지정합니다.

행을 드래그할 때 마우스 포인터 옆에 표시할 텍스트를 지정합니다.

행 또는 셀 범위를 드래그할 때 드롭을 허용할 대상 그리드의 pid를 배열로 지정합니다.

이 속성을 null 로 설정하면 모든 그리드 간의 드래그&드랍을 허용합니다. 단, 모든 그리드의 속성 enableDrop=true 설정했을 경우입니다.

만약 이 속성을 dropAcceptableGridIDs=["#grid_wrap2"] 로 설정한다면 #grid_wrap2 에 있는 그리드에만 드랍을 허용합니다.

Also See : dropToOthers, enableDrop

관련 데모 보기

행 또는 셀 범위를 현재 그리드 밖의 다른 그리드에도 드롭할 수 있도록 할지 지정합니다. 그리드 간 드래그 앤 드롭을 사용하려면 true로 설정하십시오.

드래깅 하는 그리드와 드랍 받는 그리드는 동일한 문서 객체 모델(DOM)에 존재해야 합니다. 이종간의 문서 객체 모델(DOM) 에서 드래그&드랍은 불가능합니다.

Also See : enableDrag, enableDrop

관련 데모 보기

enableDragCells=true이면 셀 범위의 값을 대상 그리드의 기존 셀에 전달합니다. 그 외에는 기존처럼 행을 추가합니다. 셀 범위 전송은 3.0.19부터 지원합니다.

사용자가 그리드에서 셀 값을 직접 편집할 수 있는지 지정합니다. true이면 편집 가능한 셀을 수정할 수 있으며, 기본값인 false에서는 사용자 편집을 제한합니다. 칼럼의 editable과 editableOnFixedCell 등 개별 편집 조건도 함께 적용됩니다. addRow()나 updateRows()를 통한 데이터 변경을 막는 설정은 아닙니다.

관련 데모 보기

병합된 셀을 편집할 때 변경 값을 병합 영역 전체에 적용할지 지정합니다.

예로 이 속성을 true 설정하면 3개의 셀이 병합된 경우 셀 수정 하면 3개의 셀이 모두 동일한 값으로 수정 적용됩니다.

이 속성을 false 설정하면 3개의 셀 중 상단 1개만 수정 되고 셀 병합에서 풀리게 됩니다.

붙여 넣기(Paste)까지 병합 전체에 대해 적용되기를 희망한다면 selectionMode 를 "multipleCells" 로 설정해야 합니다.

참고 : 이 속성을 true 처리하면 selectionMultiOnMerge = true, separatedSelectionOnMerge = false로 강제 됩니다.

관련 데모 보기

editable=true인 그리드에서 고정 행과 고정 칼럼의 셀도 편집할 수 있도록 할지 지정합니다. true이면 해당 고정 셀의 편집을 허용합니다.

관련 데모 보기

그룹핑 기준 필드의 셀을 편집할 수 있도록 할지 지정합니다.

그룹핑 상태에서 셀 수정, 행 추가, 삭제를 하고자 하는 경우 editableOnGroupFields 속성을 true 설정해야 합니다.

그룹핑을 했을 때 수정이 필요한 경우 cellMergeRowSpan 속성도 true을 권장합니다.

Also See : cellMergeRowSpan

관련 데모 보기

마우스로 셀 편집을 시작하는 방식을 지정합니다.

더블클릭과 클릭 중 택할 수 있습니다. 유효값: doubleClick, click, none

키보드로 편집, 수정 모드 들어가는 방법은 F2입니다.

관련 데모 보기

편집 가능한 셀에서 키를 입력하면 바로 편집을 시작할지 지정합니다. true이면 F2나 마우스로 편집기에 먼저 진입하지 않고 키 입력으로 편집을 시작할 수 있습니다.

바로 편집 가능 상태로 진입한 경우 엔터/탭 키 완료는 물론 키보드 방향 키로도 편집 완료가 가능합니다.(엑셀 UI)

관련 데모 보기

셀 병합 기능을 사용할지 지정합니다. 칼럼별 병합 기준은 cellMerge와 cellMergeRowSpan을 참고하십시오.

가로 병합과 세로 병합을 함께 사용할 수 없습니다.

관련 데모 보기

그리드의 복사(Ctrl+C)와 붙여넣기(Ctrl+V) 기능을 사용할지 지정합니다. true이면 활성화하고, false이면 비활성화합니다.

헤더 경계를 마우스 또는 터치로 드래그하여 칼럼 너비를 변경할 수 있도록 할지 지정합니다.

v3.0.19부터 행 번호(No.) 칼럼도 오른쪽 헤더 경계에서 너비를 조절할 수 있습니다. 변경한 너비는 rowNumColumnWidth에 반영하며 최솟값은 minColumnWidth를 따릅니다. No. 헤더 경계를 더블클릭하면 현재 필터 결과의 행 번호 자릿수에 맞춰 너비를 조절하며, isFitColumnSizeHeaderText=true이면 헤더 문구도 포함합니다.

데이터 칼럼의 헤더 경계를 더블 클릭하면 셀 값 중 가장 긴 텍스트에 맞춰 너비를 조절합니다. 헤더에 HTML을 표시하거나 TemplateRenderer를 사용하는 경우 더블클릭 자동 맞춤은 적용하지 않습니다.

관련 데모 보기

행을 드래그할 수 있도록 할지 지정합니다.

만약 현재 그리드가 정렬된 상태이거나 필터링된 상태라면 그 상태에서는 행 드래깅이 불가능합니다.

정렬 및 필터링이 해제된 상태여야 합니다.

관련 데모 보기

행 드래그 손잡이 대신 셀을 직접 드래그하여 행을 이동하거나 복사할 수 있도록 할지 지정합니다.

이 속성을 설정하면 selectionMode 가 "multipleCells" 또는 "multipleRows" 인 경우 다중 셀(행) 선택을 하지 않고 바로 드래깅 행위를 하게 됩니다.

속성 enableDrag=true 설정이 선행되어야 합니다.

Also See : enableDrag

관련 데모 보기

선택한 연속 셀 범위의 값을 이동하거나 복사합니다. enableDrag와 editable을 true로 설정하고 singleCell 또는 multipleCells를 사용합니다. 선택 영역 윗변의 손잡이를 끌어 놓으십시오.

기본 동작은 이동입니다. Ctrl 또는 Cmd를 누르고 놓으면 복사하며, dropCellsEndBefore의 isMoveMode로 최종 동작을 지정할 수 있습니다. Esc, 터치 취소 또는 창 포커스 이탈 시 데이터를 변경하지 않습니다.

일반형 flat과 flatAll을 지원합니다. 밴드형, 트리, 그룹핑, 정렬된 표에서는 시작하지 않으며, 숨김 칼럼을 포함한 범위와 현재 페이지를 넘는 드롭은 적용하지 않습니다. 필터된 표는 기존 행 드래그 제한을 따릅니다(Undo 사용 중에는 시작하지 않음).

이동 원본, 목적지와 병합 잔여값의 변경 대상 중 편집 금지 셀이나 editRenderer 유효성 검사에서 거부되는 셀이 있으면 전체 작업을 취소합니다. 행 ID, 수식 및 수정 금지 고정 셀도 보호합니다. 셀마다 편집 이벤트를 송출하지 않으므로 추가 업무 규칙은 dropCellsEndBefore에서 검사하십시오.

enableUndoRedo를 사용하면 이동, 복사와 dropCellsEnd 안의 동기식 updateRowsById 및 updateRows 갱신을 한 번의 실행 취소로 복구합니다. 그리드 간 이동은 양쪽 값을 함께 복원합니다. 두 그리드에서 Undo를 사용하면 어느 쪽에서도 취소할 수 있으며, 이후의 개별 편집을 먼저 취소해야 합니다. 한쪽의 이력 초기화, 데이터 교체 또는 스택 제한으로 연결 이력이 제거되면 반대쪽에서도 해당 이력을 제거합니다. 비동기 갱신과 다른 종류의 API 작업은 각각의 기존 Undo 단위를 따릅니다.

var gridProps = {
    editable: true,
    selectionMode: "multipleCells",
    enableDrag: true,
    enableDragCells: true,
    enableDrop: true,
    enableCellMerge: true,
    selectionMultiOnMerge: true
};

다른 그리드로 보내려면 출발지의 dropToOthers를 true로 설정하고 dropAcceptableGridIDs로 도착지를 제한할 수 있습니다. 도착지는 editable과 enableDrop을 true로 설정합니다. 도착지의 enableDragCells는 받기에 필수는 아니며, 그곳에서도 셀을 끌어 보내려면 설정합니다. 출발지의 enableDrop=false는 받기만 금지합니다. 두 그리드의 필드명이 달라도 범위의 상대 위치에 따라 값만 전달하며 행은 추가하거나 삭제하지 않습니다. 이동한 원본 셀은 null로 비웁니다. setProp으로 설정한 값은 다음 드래그부터 적용합니다.

Also See : enableDragCells | dropCellsEndBefore | dropCellsEnd

셀 범위 이동과 복사 데모

드래그한 행의 드롭을 허용할지 지정합니다. false이면 행 드롭을 허용하지 않으며, true이면 다른 드롭 조건에 따라 처리합니다.

만약 이 속성을 false 설정하면 어떤 경우라도 드랍을 허용하지 않습니다.

드랍을 받을 수 있는 최상위 속성입니다.

Also See : enableDrag

관련 데모 보기

트리 그리드에서 행을 드래그하여 다른 행의 자식으로도 드롭할 수 있도록 할지 지정합니다. 행의 위치뿐 아니라 부모와 자식 관계를 바꾸는 드롭 동작에 사용합니다.

관련 데모 보기

칼럼의 값이나 조건으로 행을 걸러내는 필터링 기능을 사용할지 지정합니다.

const gridProps = { enableFilter: true };
const columnLayout = [
    { dataField: "name", headerText: "이름", filter: { showIcon: true } }
];

관련 데모 보기

그리드가 키보드 포커스를 받을 수 있도록 할지 지정합니다. false이면 키보드를 이용한 셀 이동이나 편집을 사용할 수 없습니다.

휠로 가로 스크롤할 때 Shift 키를 함께 눌러야 하는지 지정합니다.

만약 이 속성을 false 설정하면 세로 스크롤이 없는 그리드인 경우 Shift Key 없이 단순 마우스 휠로 세로 스크롤 대신 가로 스크롤에 반응 합니다.

관련 데모 보기

휠로 가로 스크롤을 조작할 수 있도록 할지 지정합니다. 기본적으로 Shift+휠 조합을 사용하며, Shift 키 조건은 enableHScrollByOnlyShiftKey에서 설정합니다.

만약, enableMouseWheel=false 설정하면 enableHScrollByWheel 는 무시됩니다.

터치 기기에서 길게 누르기(Long Tap) 이벤트를 사용할지 지정합니다. true이면 길게 누르는 동작을 사용할 수 있습니다.

마우스 휠로 그리드를 스크롤할 수 있도록 할지 지정합니다.

칼럼 헤더를 드래그하여 칼럼의 위치를 바꿀 수 있도록 할지 지정합니다.

단, 고정 칼럼(fixedColumnCount)으로 설정된 칼럼은 드래깅으로 변경 불가능합니다.

관련 데모 보기

colSpan으로 병합된 헤더는 병합에 포함된 칼럼과 함께 이동하며, 병합 내부로는 드롭할 수 없습니다. 과거 이동 방식은 useLegacyColSpanMoving으로 설정합니다.

여러 행을 한 번에 드래그할 수 있도록 할지 지정합니다.

selectionMode 를 "multipleCells" 또는 "multipleRows" 인 경우 유효합니다. 또한 속성 enableDrag=true 설정이 선행되어야 합니다.

만약 계층형 그리드(TreeGrid)인 경우 계층형 그리드는 기본적으로 다수 행 드래깅을 지원하지 않으므로 이 속성은 false 처리 됩니다.

Also See : selectionMode, enableDrag

관련 데모 보기

여러 칼럼을 기준으로 정렬할 수 있도록 할지 지정합니다. enableSorting=true인 경우 적용하며, 다중 정렬의 키 조합은 multiSortingKey로 설정합니다.

이 값이 true 라면 multiSortingKey( 기본 : shiftKey )에 따라 다중 칼럼 헤더 클릭 시 멀티 정렬이 실행됩니다.

편집 가능한 그리드에서 행 상태 아이콘을 눌러 수정, 추가, 삭제를 복구할 수 있도록 할지 지정합니다.

enableRestore 를 true 로 설정한 경우, 행 상태 칼럼(showStateColumn=true) 의 상태 아이콘을 클릭하면 복구가 됩니다.

즉, 수정을 한 경우 연필 아이콘이 나오는데 이를 클릭하면 수정 전으로 복구되고, 추가된 행인 경우 플러스 아이콘이 나오는데 이를 클릭하면 추가 취소로 복구됩니다.

마찬가지로 삭제 아이콘을 클릭하면 삭제 취소로 복구됩니다.

마우스 오른쪽 버튼으로 클릭한 셀을 선택할지 지정합니다. 컨텍스트 메뉴를 열 때 클릭 위치로 선택도 옮기려면 true로 설정하십시오.

관련 데모 보기

행 체크박스(showRowCheckColumn)에서 Shift 키를 누른 채 클릭하여 여러 행을 체크할 수 있도록 할지 지정합니다.

그리드의 현재 데이터의 셀을 전체 선택(Ctrl + A) 활성화 여부를 지정합니다.

selectionMode 를 "multipleCells" 또는 "multipleRows" 로 설정 해야 합니다.

이 속성을 활성화 하면 Ctrl + A 단축키로 전체 선택을 할 수 있으며 행번호 칼럼의 헤더인 "No" 를 클릭하여 전체 선택을 할 수 있습니다.

수천 개 이상의 데이터를 전체 선택할 경우, 브라우저 성능 저하, 일시적인 멈춤 현상 또는 스크립트 중단 등의 문제가 발생할 수 있습니다. 따라서 해당 기능은 데이터 양을 고려하여 신중하게 사용해야 합니다.

주의 : 수천 개 이상의 셀 데이터를 전체 선택할 경우 브라우저 성능 저하 또는 일시적인 멈춤 현상, 스크립트 중지 등이 발생할 수 있습니다.

참고 : 이 속성을 활성화 하면 simplifySelectionEvent 는 true 로 강제됩니다.

See Also : selectionMode | simplifySelectionEvent

관련 데모 보기

그리드의 정렬 기능을 사용할지 지정합니다. true이면 정렬을 사용할 수 있으며, false이면 정렬 기능을 비활성화합니다.

그룹 소계 행의 셀을 가로로 병합할지 지정합니다. enableCellMerge=true 설정이 먼저 필요합니다.

참고 : keepColumnOrderOnGrouping 를 true 설정한 경우 이 속성은 무시됩니다.

실행 취소(Undo)와 다시 실행(Redo)를 사용할지 지정합니다. true이면 Ctrl+Z와 Ctrl+Y 단축키가 활성화됩니다.

관련 데모 보기

Enter 키로 이동할 때 다음 행 대신 다음 칼럼으로 이동할지 지정합니다. true이면 칼럼 방향으로 이동합니다.

필터링할 때 고정 행을 필터 대상에서 제외할지 지정합니다.

트리 그리드에는 적용하지 않습니다.

관련 데모 보기

정렬할 때 고정 행을 정렬 대상에서 제외할지 지정합니다.

[deprecated Ver 3.0.15.16]

엑스트라 칼럼의 표시 순서를 지정합니다. 표시할 칼럼에 대응하는 속성 이름을 배열에 원하는 순서대로 작성합니다.

엑스트라 렌더러는 드래깅 손잡이(showDragKnobColumn), 행 번호(showRowNumColumn), 행 상태(showStateColumn), 행 체크박스(showRowCheckColumn) 4가지가 존재합니다.

예로 작성하면 다음과 같습니다.

 // 엑스트라 체크박스 칼럼을 맨 앞으로, 나머지 칼럼은 기본 순서 유지 (나머지 칼럼 유지는 배열에 지정하지 않으면 유지 시킴)
 extraColumnOrders = ["showRowCheckColumn"];
 
 // 엑스트라 체크박스, 행 번호, 상태, 드래깅 손잡이 순으로 순서 지정하기
 extraColumnOrders = ["showRowCheckColumn", "showRowNumColumn", "showStateColumn", "showDragKnobColumn"];

관련 데모 보기

칼럼 너비를 비율로 계산하여 그리드의 가로 영역을 채울지 지정합니다. true이면 가로 스크롤 없이 칼럼들을 표시합니다.

참고 : fillColumnSizeMode 를 true 로 설정하면 fixedColumnCount 속성은 무시됩니다.

Also See : fixedColumnCount

관련 데모 보기

그룹 소계 행의 앞부분에도 그룹핑 필드 값을 채울지 지정합니다.

이 속성을 true 설정하면 그룹핑 소계 행에서 그룹핑 필드에 해당되는 셀도 세로 병합의 대상이 됩니다.

관련 데모 보기

필터 메뉴의 취소 버튼에 표시할 텍스트를 지정합니다.

필터 메뉴의 전체 선택 항목에 표시할 텍스트를 지정합니다.

필터 메뉴의 필터 초기화 항목에 표시할 텍스트를 지정합니다.

[deprecated Ver 3.0.18] 필터 목록의 개수 초과 안내 문구입니다. 현재는 전체 목록을 표시하므로 이 문구를 사용하지 않습니다.

헤더 필터 아이콘으로 여는 기본 필터 메뉴의 높이를 픽셀 단위로 지정합니다.

관련 데모 보기

헤더 필터 아이콘으로 여는 기본 필터 메뉴의 너비를 픽셀 단위로 지정합니다.

관련 데모 보기

[deprecated Ver 3.0.18] 필터 메뉴의 항목 수를 제한하지 않습니다. 전체 목록을 스크롤하거나 검색할 수 있습니다.

이 속성은 기존 코드와의 호환을 위해 남아 있으며 값을 바꾸어도 목록 표시에 영향을 주지 않습니다.

필터 메뉴에서 빈값을 나타내는 항목의 위치를 지정합니다. "top"은 맨 위, "bottom"은 맨 아래를 의미합니다.

필터 메뉴에서 값이 없는 셀을 나타내는 항목의 텍스트를 지정합니다.

numeric 유형 필터의 비교 연산자에 표시할 이름을 지정합니다.

필터 메뉴의 확인 버튼에 표시할 텍스트를 지정합니다.

필터 메뉴에서 검색 결과를 전체 선택하는 항목의 텍스트를 지정합니다.

기본 필터 메뉴의 검색 입력란에 표시할 placeholder 텍스트를 지정합니다.

왼쪽에 고정할 칼럼 수를 지정합니다. 0이면 고정을 해제합니다.

밴드형에서 고정 경계가 상위 셀을 가르면 해당 셀의 마지막 하위 칼럼까지 자동으로 늘립니다. 예를 들어 상위 셀이 인덱스 1~3의 하위 칼럼을 포함하면 2 또는 3을 지정해도 4개가 고정됩니다.

실행 중에는 setFixedColumnCount()를 사용하십시오. setProp()으로 변경한 경우 refresh()를 호출합니다. 적용된 개수는 getProp()으로 확인할 수 있습니다.

관련 데모 보기

세로 스크롤에도 위치를 유지할 고정 행의 개수를 지정합니다.

참고 : 페이징 모드(usePaging=true)인 경우 fixedRowCount 속성은 무시됩니다.

고정 행에도 셀 병합을 적용할 수 있습니다. 세로 병합은 고정 행과 일반 행의 경계에서 나뉩니다.

관련 데모 보기

계층 구조가 아닌 일반 배열 데이터를 ID와 부모 ID의 관계로 연결하여 트리로 표시할지 지정합니다.

일반 데이터의 순서(order)는 중요합니다. 부모 행은 반드시 자식 행보다 앞에 있어야 합니다.

flat2tree 속성은 반드시 treeIdField, treeIdRefField 가 선행적으로 설정되어야 합니다.

생성 시에만 설정할 수 있으며 setProp()으로 변경할 수 없습니다.

관련 데모 보기

행 체크박스(showRowCheckColumn=true)에 방향키로 포커스를 옮길 수 있도록 할지 지정합니다. true이면 스페이스 키로 체크와 해제도 할 수 있습니다.

푸터 행의 높이를 지정합니다. 여러 푸터 행의 높이를 각각 설정하려면 footerHeights를 확인하십시오.

관련 데모 보기

여러 푸터 행의 높이를 배열로 각각 지정합니다.

예를 들어 3개의 푸터 행이라면(즉, 푸터 행의 개수가 3개) 다음과 같이 배열로 개별 3개를 지정합니다.

const gridPros = {
      footerHeights : [24, 24, 50],
      ....
};

만약 footerHeights 를 지정하지 않은 경우 기본 푸터 높이 속성인 footerHeight 값을 따르게 됩니다.

이 말은 다시 말해 footerHeights 의 배열 인자가 정수가 아닌 경우 headerHeight 이 적용됩니다.

관련 데모 보기

푸터의 표시 위치를 지정합니다. "bottom"은 그리드 하단, "top"은 상단을 의미합니다.

관련 데모 보기

푸터에 표시할 행의 개수를 지정합니다.

관련 데모 보기

푸터와 메인 그리드 사이의 간격, 공백을 지정합니다.

현재 버전은 설정값과 관계없이 0으로 정규화합니다.

입력 데이터의 구조와 관계없이 그리드를 트리 형태로 표시할지 지정합니다. true이면 계층형 그리드로 출력합니다.

생성 시에만 설정할 수 있으며 setProp()으로 변경할 수 없습니다.

관련 데모 보기

밴드형 바디에서 그룹핑 제목 행의 높이를 픽셀 단위로 지정합니다.

AUIGrid.setProp(myGridID, "groupingBranchHeight", 32);
AUIGrid.refresh(myGridID);

관련 데모 보기

그룹핑 제목 행의 표시 방식을 지정합니다.

• "default" : 그룹 필드별로 트리형 제목을 표시합니다.
• "singleColumn" : 칼럼 순서를 유지하고 첫 번째 보이는 비고정 칼럼에 제목을 들여쓰기하여 표시합니다. 비고정 칼럼이 없으면 첫 번째 보이는 칼럼을 사용합니다.

bodyLayoutMode가 "band"이면 설정값과 관계없이 "singleColumn"으로 적용됩니다.

singleColumn의 소계는 제목보다 뒤쪽 칼럼에 배치하십시오.

// 그룹핑 제목을 한 칼럼에 표시합니다.
AUIGrid.setProp(myGridID, "groupingBranchMode", "singleColumn");
AUIGrid.refresh(myGridID);

Also See : displaySummaryTreeBranch

관련 데모 보기

그룹핑 기준으로 사용할 dataField를 배열로 지정합니다. 같은 값을 가진 행을 그룹으로 묶어 표시할 때 사용합니다.

예를 들어 이 값을 ["country", "product"] 로 설정한 경우 country 의 동일한 값을 묶은 후 다시 country 의 그룹 내에서 product 의 동일한 값으로 묶어서 출력하게 됩니다.

그룹핑을 설정한 후 각 그룹별 소계(Summary Rows) 출력이 가능합니다.

Also See : groupingSummary

참고 : 설정한 그룹핑의 개수만큼 해당 계층이 형성됩니다. 계층이 많아지면 그룹핑 시 많은 시간이 필요합니다. 계층이 많은 경우 퍼포먼스에 악영향을 끼칩니다.

Also See : groupingBranchMode

관련 데모 보기

그리드 상단의 그룹핑 패널에 표시할 안내 메시지를 지정합니다.

그리드 상단에 표시되는 그룹핑 패널의 높이를 지정합니다.

그룹별 소계 행을 구성하는 설정을 지정합니다. 소계에 사용할 필드와 연산 등을 객체로 작성하며, groupingFields 설정이 먼저 필요합니다.

groupingSummary 속성은 Object 로 정의 하며 Object 의 키는 다음 요소를 가질 수 있습니다.

• dataFields (Array) : 소계 연산의 대상이 되는 필드로 칼럼의 dataType 이 "numeric" 인 경우에만 유효합니다.(dataFields 는 소계 출력을 위해 필수 정의해야 합니다.)
• excepts (Array) : 그룹핑 시 소계에서 제외할 필드들을 정의합니다.

  groupingFields 에서 설정한 필드의 depth 대로 소계 행이 모두 출력되는 것이 기본입니다. 원하지 않는 depth 의 소계를 제외하고자 할 때 여기서 정의합니다.

• labelTexts (Array) : 그룹핑 시 해당 항목 아래에 출력되는 소계 텍스트들을 정의합니다.

  depth 별로 소계를 출력 할 때 "Value 합계" 에 대한 텍스트를 대체할 텍스트를 설정합니다.

• rows (Array) : 소계 행의 구체적인 설정을 정의합니다.

  기본적으로 소계는 각 그룹 depth 별 합계를 출력하게 됩니다. 합계 외의 연산 및 사용자 정의 연산, 동일한 depth 에서 다수의 소계 행 정의 등의 구체적 설정을 여기서 정의합니다.

  rows 에서 정의한 배열 요소의 개수만큼 동일한 depth 에서 소계 행이 출력되며 개별 소계행을 여기서 제어 합니다.

  rows 는 Array 를 정의하며 Object 를 배열 요소로 갖습니다. 다음은 Object 의 요소에 대한 설명입니다.

  • operation (String) : 소계로 출력할 구체적 연산을 정의합니다. 유효 값은 "SUM", "MIN", "MAX", "AVG", "COUNT" 입니다.
  • text (String or Object) : 소계 행의 그룹핑 항목 아래에 출력될 텍스트를 설정합니다. Object 를 정의한 경우 해당 소계 행에 임의의 텍스트 설정이 가능합니다.
  • constraintField (String) : 조건에 부합하는 값만 소계 연산 적용 시키고자 할 때 조건에 해당되는 필드명를 설정합니다.
  • constraint (String) : constraintField 에서 정의한 필드의 실제 값을 지정합니다.

    constraint 는 확장하여 Function 을 지정하여 원하는 결과를 도출해 낼 수 있습니다. 고급 사용자를 위한 기능이므로 구체적인 내용은 를 참고합시오.

  • exceptFunction (Function) : 조건에 부합하는 경우에만 소계 행을 출력할지 여부를 결정하는 함수입니다. 예로 소계의 대상이 되는 건수가 1개인 경우 소계행 출력하지 않도록 지시 할 수 있습니다.

    이 함수에서 false 를 반환하면 소계행을 출력하지 않습니다.

  • expFunction (Function) : 정해진 연산이 아닌 사용자가 원하는 연산이 가능한 수식 함수입니다.

    이 함수에서 반환하는 값을 소계로 출력합니다.

다음은 groupingSummary 설정 예제입니다.

  // 차례로 country, product, name 순으로 그룹핑을 합니다.
  // 즉, 각 나라별, 각 제품을 구매한 사용자로 그룹핑
  groupingFields : ["country", "product", "name"],

  // 그룹핑 후 합계필드를 출력하도록 설정합니다.
  groupingSummary  : {
        // 소계 필드는 price 1개에 대하여 실시 합니다.
        dataFields : [ "price" ],

        // groupingFields 에서 설정한 필드의 depth 대로 썸머리 행이 출력되는 것이 기본입니다.
        // 그러나 원하는 않는 썸머리는 제외 시키십시오.
        // 즉, 썸머리로 출력되는 대상 제외 시키는 필드 설정
        excepts : [ "name"],

        // 그룹핑 썸머리 행의 구체적 설정
        // 2개의 Object 에 각각, 합계, 개수를 표현
       rows: [{
          operation: "SUM", text : "$value 합계"
       }, {
          operation: "COUNT", text : "$value 개수"
       }]
 }

Also See : groupingFields

참고 : 설정한 그룹핑(groupingFields)의 개수만큼 해당 계층이 형성되며 소계(groupingSummary)는 모든 계층에 대한 소계를 구하게 되어합니다. 계층이 많은 경우 퍼포먼스에 악영향을 끼칩니다.

Also See : groupingBranchMode

관련 데모 보기 | 관련 데모 보기 | 관련 데모 보기 | 관련 데모 보기 | 데모 | 관련 데모 보기 | 관련 데모 보기

그룹 소계 행의 표시 위치를 지정합니다. "bottom"은 그룹 하단, "top"은 그룹 상단에 표시합니다.

관련 데모 보기

칼럼 헤더의 높이를 지정합니다. 그룹 헤더의 계층별 높이를 다르게 설정하려면 headerHeights를 확인하십시오.

관련 데모 보기

그룹 헤더의 계층별 높이를 배열로 지정합니다.

예를 들어 헤더 계층이 3계층이라면(즉, 헤더 행의 개수가 3개) 다음과 같이 배열로 개별 3개를 지정합니다.

const gridPros = {
      headerHeights : [24, 24, 50],
      ....
};

만약 그룹형 헤더일 때 headerHeights 를 지정하지 않은 경우 기본 헤더 높이 속성인 headerHeight 값을 따르게 됩니다.

이 말은 다시 말해 headerHeights 의 배열 인자가 정수가 아닌 경우 headerHeight 이 적용됩니다.

관련 데모 보기

그리드 전체의 높이를 픽셀 단위로 지정합니다. 값을 지정하지 않으면 부모 DIV의 높이를 사용합니다.

단일 칼럼 그룹 브랜치에 표시되는 그룹 필드의 칼럼을 자동으로 숨길지 지정합니다.

groupingBranchMode가 "singleColumn"이고 showBranchOnGrouping이 true일 때 groupingFields에 지정된 칼럼을 숨깁니다. 기본값은 false입니다.

그룹 필드에서 제거하거나 그룹핑을 해제하면 자동으로 숨긴 칼럼을 복원합니다. visible: false 또는 hideColumnByDataField로 직접 숨긴 상태는 유지합니다. 자동 숨김 중 showColumnByDataField와 showAllColumns를 호출하면 그룹 해제 후의 표시 상태만 바뀝니다.

계층형 헤더와 밴드형에서는 최하위 칼럼에 적용하며 상위 헤더와 상위 바디 셀은 유지합니다. flatAll에서는 상위 필드도 독립된 열이므로 숨김 대상에 포함합니다. 그룹 제목과 소계를 표시할 수 있도록 소계 칼럼 앞에 하나 이상의 표시 칼럼을 남기십시오.

기본 소계 제목이 자동 숨김 칼럼에 있으면 첫 번째 표시 제목 칼럼으로 옮깁니다. 실행 중 변경은 setProp 후 refresh를 호출하여 적용합니다.

var gridProps = {
    groupingFields: ["country", "product", "name"],
    groupingBranchMode: "singleColumn",
    hideGroupingColumns: true
};

관련 데모 보기

마우스 포인터가 셀 위에 있을 때 강조 표시할 단위를 지정합니다. "singleCell"은 셀, "singleRow"는 행을 강조하며, "none"은 강조를 사용하지 않습니다.

관련 데모 보기

가로 스크롤 위치를 정수 픽셀 단위로 나타냅니다. 소수 위치를 요청하면 소수 부분을 버리고 스크롤 가능한 범위 안에서 적용합니다.

사용자가 칼럼 너비를 조절할 때 해당 칼럼의 minWidth 제한을 무시할지 지정합니다. true이면 칼럼별 최소 너비 제한을 적용하지 않습니다.

행 체크박스(showRowCheckColumn=true)를 사용할 때 헤더의 전체 체크박스를 개별 행의 체크 상태와 독립적으로 처리할지 지정합니다.

독립적인 행위란, 기본적으로 전체 선택/해제를 할 경우 개별 행들의 체크 박스가 선택/해제가 이루어집니다.

그러나 independentAllCheckBox=true 설정 시 전체 선택/해제 이벤트만 발생 할 뿐 개별 행들의 체크 박스를 선택/해제 하지 않습니다.

전체 선택/해제를 원하는 방식으로 사용자 정의하고자 한다면 independentAllCheckBox 를 true 설정하여 rowAllCheckClick 이벤트를 바인딩하여 제어하십시오.

인라인 필터의 입력 후 필터링을 실행하기까지의 대기 시간을 밀리초(ms)로 지정합니다. 0이면 매 입력에 반응합니다.

예로 500 설정 시 사용자가 입력 종료 500ms 시간이 지난 이후 필터링을 실행합니다.

많은 수의 데이터나 사용자의 매 입력의 불필요한 필터링을 원치 않으면 300~500 설정을 권합니다.

관련 데모 보기

Home과 End 키의 이동 기준을 지정합니다. true이면 칼럼의 시작, 끝으로, false이면 행의 시작, 끝으로 이동합니다.

헤더 경계를 더블클릭하여 칼럼 너비를 맞출 때 헤더 텍스트도 계산에 포함할지 지정합니다. false이면 실제 셀 텍스트만 고려합니다.

붙여넣는 데이터가 현재 마지막 행을 넘어갈 때 새 행을 추가할지 지정합니다. true이면 새 행을 만들고, false이면 기존 행을 넘는 데이터는 적용하지 않습니다.

헤더의 전체 체크 동작을 현재 표시 데이터 기준으로 처리할지 지정합니다.

예로 필터링되어 현재 3개의 행만 보일 때 전체 체크를 하면 현재 보이는 3개의 행만 선택됩니다.

페이징 모드(usePaging = true)에서 현재 페이지의 행들 대상으로 전체 체크 설정/해제 하고자 한다면 이 속성을 설정하십시오.

현재 데이터에 변화가 생긴 경우 전체 체크는 풀립니다

참고 : 계층형 그리드(트리 그리드)에서 해당 속성 설정은 무시됩니다.

그룹핑 시 칼럼 레이아웃의 기존 순서를 유지할지 지정합니다. true이면 그룹핑 필드를 앞쪽 칼럼으로 옮기지 않습니다.

참고 : 이 속성을 true 처리하면 fillValueGroupingSummary, adjustSummaryPosition, enableSummaryMerge 속성들은 비활성화(false 설정) 됩니다.

관련 데모 보기

편집 가능한 그리드(editable=true)에서 F2나 클릭 또는 더블클릭으로 편집을 시작한 뒤, Tab 또는 Enter 키로 완료하면 다음 셀에서도 편집을 계속할지 지정합니다.

터치 기반의 모바일 디바이스에서는 무시됩니다.

[deprecated Ver 3.0.16.17]

행을 추가할 때 정렬과 필터 조건을 유지할지 지정합니다.

• true : 정렬과 필터를 유지한 상태로 추가합니다.
• false : 정렬과 필터를 해제하고 지정한 위치에 추가합니다.

addRow(), addTreeRow()와 addTreeRowByIndex()에 적용합니다.

// 필터를 유지하면서 행을 추가합니다.
AUIGrid.setProp(myGridID, "keepViewOnAdd", true);
AUIGrid.addRow(myGridID, { name: "홍길동", age: 25 }, "last");

관련 데모 보기

일부가 가려진 칼럼의 셀을 클릭하면 칼럼이 보이도록 가로 스크롤을 자동으로 이동할지 지정합니다.

화면 위쪽이나 아래쪽에서 일부가 가려진 셀을 클릭하면 해당 셀이 보이도록 세로 스크롤을 자동으로 이동할지 지정합니다.

관련 데모 보기

터치 기기에서 길게 누르기(Long Tap)로 인식할 누름 시간을 밀리초(ms)로 지정합니다. enableLongTap=true가 필요하며 최솟값은 500입니다.

셀 병합 여부를 포매팅된 표시 값으로 판단할지 지정합니다. true이면 표시 값, false이면 실제 dataField 값을 기준으로 판단합니다.

포매팅한 결과 값의 의미는 실제 데이터가 아닌 labelFunction, formatString 등으로 가공된 최종 뷰(view)적인 표현 값을 의미합니다.

칼럼의 최소 너비를 지정합니다. 이 값은 칼럼을 줄일 수 있는 하한이며, 지정 가능한 최솟값은 10입니다.

다중 칼럼 정렬을 위해 헤더 클릭과 함께 사용할 키를 지정합니다. "shiftKey", "ctrlKey", "always"를 사용할 수 있으며, "always"는 키 조합 없이 다중 정렬합니다.

예를 들어 이 값을 "shiftKey" 로 설정한 경우 쉬프트키와 함께 칼럼 헤더 클릭 시 다중 정렬이 실행됩니다.

"always" 값은 단순 클릭만으로 항상 다중 정렬이 실행됩니다.

관련 데모 보기

showAutoNoDataMessage=true일 때 데이터가 없는 그리드에 표시할 메시지를 지정합니다.

붙여넣기로 새로 추가된 행의 셀에 대해 cellEditBegin 이벤트를 생략할지 지정합니다. true는 이벤트 생략, false는 이벤트 발생을 의미합니다.

이때 만들어진 새 행의 모든 셀 값에 대하여 cellEditBegin 이벤트를 송출 시킬지 여부를 지정합니다.

true 를 설정한다면 cellEditBegin 이벤트를 송출하지 않습니다.

false 를 설정한다면 cellEditBegin 이벤트가 송출됩니다.

Also See : uneditableNewRowsOnPaste

관련 데모 보기

셀을 세로 병합 범위 안에 드롭할 때, 목적 값 외의 병합 잔여값을 null로 변경합니다. enableDragCells로 드래그한 셀을 받는 그리드의 enableCellMerge가 true인 경우 적용합니다. 그리드 간 전송에서는 도착지의 이 속성을 따릅니다.

false이면 목적 범위만 덮어쓰고 나머지는 보존합니다. true이면 기존 병합 범위의 나머지 값을 비우며 dropCellsEnd.uidsNullMergeOthers로 해당 행 ID를 전달합니다. null 값을 드롭하면 그 목적 행 ID도 포함합니다. ID는 중복 없이 전달됩니다.

예: B 칼럼 0~2행이 B0으로 병합되어 있을 때 1행에 C1을 놓으면, true에서는 null / C1 / null이 되고 false에서는 B0 / C1 / B0이 됩니다. setProp으로 변경하면 다음 드롭부터 적용합니다.

Also See : enableDragCells | dropCellsEndBefore | dropCellsEnd

정렬 방향과 관계없이 빈값(undefined, null, "")을 항상 아래에 배치할지 지정합니다. true이면 오름차순과 내림차순 모두 빈값을 뒤에 둡니다.

만약 nullsLastOnSorting=fasle 설정한다면 빈값에 해당되는 값은 오름차순 시 상단에, 내림차순 시 하단에 위치합니다.

관련 데모 보기

관련 데모 보기

Enter 키로 셀 편집을 완료할 때 다음 행으로 선택을 옮기지 않을지 지정합니다. true이면 편집 완료만 수행합니다.

관련 데모 보기

트리 그리드에서 최하위 깊이의 행만 정렬할지 지정합니다.

관련 데모 보기

그룹핑할 때 그룹 기준 필드의 값을 오름차순으로 배치할지 지정합니다. 그리드 정렬 기능과는 별도의 그룹 출력 방식입니다.

이 속성을 true 설정하면 그룹핑 필드 설정된 칼럼의 데이터 순서는 오름차순으로 출력됩니다.

실제 그리드 정렬(sorting)과는 무관한 단순 출력 방식 지정 입니다.

관련 데모 보기

한 페이지에 표시할 행 수를 양의 정수로 지정합니다. usePaging이 true일 때 적용합니다.

관련 데모 보기

페이지당 행 수를 선택하는 목록의 옵션을 지정합니다. 선택 가능한 행 수를 정수 배열로 작성하십시오.

반드시 정수형의 배열을 설정해야 합니다.

Also See : showPageRowSelect | 관련 데모 보기

관련 데모 보기

페이징 모드(usePaging=true)에서 세로 스크롤의 맨 아래에 추가할 여백을 지정합니다. 여백의 단위는 픽셀입니다.

예로 속성의 값을 10으로 설정하면 10 픽셀만큼 추가로 세로 스크롤을 통해 더 내릴 수 있습니다.

페이징 영역의 현재 페이지, 전체 페이지 안내 문구를 작성하는 함수를 지정합니다.

라벨펑션은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

• currentPage : 현재 페이지
• totalPageCount : 총 페이지수
• currentTopNumber : 현재 페이지에서 최상단의 행 번호
• currentBottomNumber : 현재 페이지에서 최하단의 행 번호
• dataLen : 총 데이터 수

 
pagingInfoLabelFunction : function(currentPage, totalPageCount, currentTopNumber, currentBottomNumber, dataLen) {
   // 로직 처리
   return "현재 : " + currentPage + " / 전체 : " + totalPageCount + "( " + currentTopNumber + "~" + currentBottomNumber + " )";
} 

함수의 반환값이 곧 출력값이 됩니다.

관련 데모 보기

페이징 UI의 표시 방식을 지정합니다. "default", "simple", "button" 중에서 화면에 맞는 방식을 선택합니다.

"simple" 로 설정한 경우 이전, 다음 버턴과 현재페이지/전체페이지 만 출력됩니다.

"button" 로 설정한 경우 페이징 패널 없이 그리드 하단에 오버레이되어 이전, 다음 버턴만 출력됩니다.

관련 데모 보기

페이징을 사용하는 경우 하단 페이징 영역의 높이를 지정합니다.

편집 가능한 그리드에서 Delete 또는 Ctrl+X로 값을 지울 수 없도록 할 renderer, editRenderer의 type을 지정합니다.

여기서 정의한 renderer, editRenderer는 Del 키, Ctrl + X 키로 값을 삭제 할 수 없습니다.

다음은 기본값으로 정의된 모습입니다.

preventDelKeyMap = {
    DropDownListRenderer : true,
    LinkRenderer : true,
    CalendarRenderer : true,
    JQCalendarRenderer : true,
    BTCalendarRenderer : true,
    CheckBoxEditRenderer : true,
    SwitchRenderer : true
};

즉, editRenderer(또는 renderer)의 type이 "DropDownListRenderer", "LinkRenderer", "CalendarRenderer", "JQCalendarRenderer", "BTCalendarRenderer", "CheckBoxEditRenderer", "SwitchRenderer"인 셀의 값은 Del 키, Ctrl + X 키로 삭제할 수 없습니다.

입력 데이터를 칼럼의 dataType에 맞게 변환할지 지정합니다. 문자열로 전달된 숫자 등을 비교, 정렬에 맞는 형식으로 처리해야 할 때 사용합니다.

예를 들어 dataType 이 "numeric" 으로 선언된 칼럼에 대입되는 데이터들은 숫자여야 합니다. 그러나 JSON, XML 작성 시 완전한 숫자 형식으로 데이터를 작성하기 힘들 때가 있습니다.

JSON 으로 데이터를 작성한 형태가 다음 2가지가 존재한다고 가정해 보면:

1. [{ "id" : "id1", "price" : "1000"}, { "id" : "id2", "price" : "2000"} ..... ]

2. [{ "id" : "id1", "price" : 1000}, { "id" : "id2", "price" : 2000} ..... ]

1번은 price 의 값이 숫자이지만 따옴표로 묶여 문자처리가 되어 있습니다. 이를 그대로 데이터에 삽입하면 문자로 인식됩니다.

따라서 정렬이나 비교 연산 시 문자 비교를 하게 됩니다. 이를 방지하고자 온전한 숫자로 캐스팅할 필요가 있습니다.

만약 1번처럼 데이터를 작성했다면 processValidData 를 true 로 설정하십시오. 그러면 그리드가 자체 캐스팅을 합니다.

데이터 수가 10만, 20만 등 대용량일 경우 processValidData 를 true 로 설정했다면 퍼포먼스가 낮아질 수 있으니 JSON 데이터 작성 시 2번 형태로 작성하십시오.(1번 형태는 anti-pattern임)

XML 데이터를 사용할 경우는 반드시 processValidData 를 true 로 설정해야 비교 연산 시 숫자 연산을 하게 됩니다.

만약 정렬 기능과 같이 비교 연산을 사용하지 않는 경우 processValidData 를 false 로 설정하는게 유리합니다.

생성 시에만 설정할 수 있으며 setProp()으로 변경할 수 없습니다.

관련 데모 보기

리모트 리스트 편집기의 입력란에 표시할 placeholder 텍스트를 지정합니다.

placeholder 는 브라우저에 의존적입니다. 따라서 무시될 수 있습니다.(브라우저 영향)

데이터가 변경될 때 가로 스크롤 위치를 초기화할지 지정합니다. false이면 기존 가로 스크롤 위치를 유지합니다.

데이터가 변경될 때 세로 스크롤 위치를 초기화할지 지정합니다. false이면 기존 세로 스크롤 위치를 유지합니다.

행 번호를 역순으로 표시할지 지정합니다. true이면 큰 번호부터 작은 번호 순서로 표시합니다.

reverseRowNum 을 true 로 설정하면 행번호 칼럼의 넘버링이 큰수에서 작은수로 출력됩니다.

관련 데모 보기

사용자가 행 체크박스의 체크 상태를 변경할 때 이를 허용할지 판단하는 함수를 지정합니다.

rowCheckableFunction는 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

• rowIndex : 행 인덱스
• isChecked : 현재 체크 유무 (사용자 반응 이전 체크값 여부임)
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)

Return : (Boolean) true 를 반환하면 사용자가 자유롭게 체크 변경이 가능하며, false 반환 시 불가 상태(초기 유지)로 만듭니다.

 rowCheckableFunction : function(rowIndex, isChecked, item) {
   if(item.name === "Anna") { // 이름이 "Anna" 인 경우 행 체크 유지 설정(즉, 사용자가 체크 변경 불가)
        return false;
   }
   return true;
}

관련 데모 보기

rowCheckableFunction에서 체크 변경을 허용하지 않는 체크박스를 비활성화 상태로도 표시할지 지정합니다.

rowCheckableFunction 으로 정의된 함수를 그리드가 렌더링 시 빈번히 호출됩니다.

따라서 rowCheckableFunction 으로 정의된 함수의 로직이 복잡하다면, 이 속성 rowCheckableWithDisabled = false 처리 후 rowCheckDisabledFunction 을 따로 정의하십시오.

행 체크박스 칼럼의 너비를 지정합니다. showRowCheckColumn=true인 경우 적용됩니다.

showRowCheckColumn=true 설정인 경우만 유효합니다.

트리 그리드에서 부모 행의 체크 상태를 자손 행에도 적용할지 지정합니다. true이면 부모의 체크, 해제를 자손에게도 적용합니다.

즉, 부모를 체크하면 하위 자손들도 체크되고, 체크 해제 하면 그 하위 자손들도 체크 해제 됩니다.

이 속성은 트리 그리드에서만 유효합니다.

행 체크박스를 비활성화(disabled)할지 판단하는 함수를 지정합니다.

rowCheckDisabledFunction는 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

• rowIndex : 행 인덱스
• isChecked : 현재 체크 유무
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)

Return : (Boolean) false 를 반환하면 비활성화(disabled) 상태로 만듭니다.

 rowCheckDisabledFunction : function(rowIndex, isChecked, item) {
   if(item.name === "Anna") { // 이름이 "Anna" 인 경우 엑스트라 행 체크박스 비활성화 처리함.
        return false;
   }
   return true; // 일반 활성화 된 체크박스로 표현
}

주의 : 이 속성의 값으로 지정된 함수는 렌더링 시 빈번히 호출됩니다. 따라서 이곳에서 DOM 검색이나, 복잡한 로직은 삼가하십시오. 성능에 영향을 미칩니다.

관련 데모 보기

행 체크박스를 세로로 병합할 때 기준으로 사용할 칼럼의 dataField를 지정합니다.

예로 이 속성을 "name" 으로 설정하면 그리드의 "name" 칼럼과 동일하게 엑스트라 체크박스를 세로 병합시켜 출력 시킵니다.

따라서 엑스트라 체크박스를 세로 병합하기 위해서는 미리 그 기준이 되는 칼럼을 병합 시켜야 합니다.

관련 데모 보기

행 체크박스를 라디오 버튼 그룹으로 표시할지 지정합니다. showRowCheckColumn=true인 경우 사용할 수 있습니다.

showRowCheckColumn=true 설정인 경우만 유효합니다.

관련 데모 보기

행 체크박스의 표시, 숨김 여부를 판단하는 함수를 지정합니다. 사용하려면 independentAllCheckBox=true 설정이 먼저 필요합니다.

rowCheckVisibleFunction 을 사용하기 위해서는 선행적으로 속성 independentAllCheckBox = true 를 설정해야 합니다.

rowCheckVisibleFunction는 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

• rowIndex : 행 인덱스
• isChecked : 현재 체크 유무 (사용자 반응 이전 체크값 여부임)
• item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)

Return : (Boolean) true 를 반환하면 체크박스가 정상 표시되며 false 를 반환하면 체크박스가 숨기기 상태(hidden)가 됩니다.

 rowCheckVisibleFunction : function(rowIndex, isChecked, item) {
   if(item.name === "Anna") { // 이름이 "Anna" 인 경우 엑스트라 행 체크박스 숨기기 처리
        return false; // false 를 반환하면 체크박스가 숨기기 상태(hidden)가 됩니다.
   }
   return true; 
}

주의 : 이 속성의 값으로 지정된 함수는 렌더링 시 빈번히 호출됩니다. 따라서 이곳에서 DOM 검색이나, 복잡한 로직은 삼가하십시오. 성능에 영향을 미칩니다.

관련 데모 보기

데이터 한 행의 높이를 픽셀 단위로 지정합니다. 기본 최소 높이는 20px입니다.

wordWrap이 true이면 셀 내용에 따라 행이 더 높아질 수 있습니다. 밴드형에서는 상위 셀과 하위 셀을 합한 전체 높이이며, 개별 상위 셀 높이는 bodyCellHeight로 지정합니다.

실행 중 변경하려면 setProp()으로 지정한 뒤 refresh()를 호출하십시오.

관련 데모 보기

각 행을 고유하게 식별할 값이 들어 있는 데이터 필드명을 지정합니다. 데이터베이스의 기본 키처럼 행을 식별하고 제어할 때 사용합니다.

DB 의 Record 에 비유하면 Primary Key 입니다.

그리드의 개별 행 아이템에 쉽게 접근하고 제어하기 위해서 지정할 필요가 있습니다.

이 필드에 속하는 데이터 필드 값(value)는 고유값이여야 합니다. 즉, 중복된 값이 없어야 합니다.

예로 rowIdField 를 "id" 로 설정한 경우 모든 데이터의 개별 행에 id 필드가 존재해야 하며 그 값들은 모두 고유값이여야 합니다.

이 필드를 지정하면 그리드가 빨리 생성됩니다. 10만 행(rows) 데이터 이상에서는 빠른 렌더링을 위해 설정을 추천합니다.

편집 모드(editable=true)에서 rowIdField 로 지정된 필드는 수정이 불가능해집니다.

생성 시에만 설정할 수 있으며 setProp()으로 변경할 수 없습니다.

새 행을 추가할 때 전달한 rowIdField 값을 고유 값으로 신뢰하여 사용할지 지정합니다. true이면 그리드가 해당 고유 값을 새로 만들지 않습니다.

새 행 추가 시 rowIdField 에 대한 값을 그리드가 결정합니다. rowIdField 에 대한 값은 중복 되지 않는 고유의 값이여야 하기 때문입니다.

rowIdTrustMode 를 true 로 설정하면 rowIdField 설정 값이 중복되지 않는 값으로 신뢰하여 그리드가 해당 값을 만들지 않습니다.

예로 rowIdField 를 id 로 설정한 경우 행 추가되는 Object 의 id 필드는 기존 데이터의 id 필드와 중복되지 않는 온전한 값으로 존재한다고 믿습니다.

참고 : rowIdField 를 설정하지 않은 경우 이 속성은 무시됩니다.

Also See : rowIdField

관련 데모 보기

행 번호 칼럼의 너비를 지정합니다. showRowNumColumn=true인 경우 적용됩니다.

v3.0.19부터 enableColumnResize=true이면 No. 헤더의 오른쪽 경계를 마우스 또는 터치로 드래그하여 이 값을 변경할 수 있습니다. 헤더 경계를 더블클릭하면 행 번호에 맞게 너비를 자동으로 조절합니다. 최소 너비는 minColumnWidth를 따릅니다.

행 번호 칼럼의 헤더에 표시할 텍스트를 지정합니다. showRowNumColumn=true인 경우 적용됩니다.

현재 화면의 최상단 행 인덱스를 나타냅니다. 페이징 모드에서는 현재 페이지의 최상단 행 인덱스입니다.

rowPosition 이 곧 현재 화면에 보이는 그리드의 최상단 행의 인덱스와 같습니다.

페이징 모드인 경우는 현재 페이지의 최상단 행의 인덱스와 같습니다.

[deprecated Ver 3.0.13]

관련 데모 보기

rowStyleFunction으로 정한 행 스타일을 TR에만 적용할지, TR과 TD에 모두 적용할지 지정합니다.

true 설정: 행 스타일을 TR에만 적용 (열 스타일이 우선 출력됨)

false 설정: TR, TD 모두 적용 (행 스타일이 열 스타일보다 상위에 출력될 수 있음)

이 속성을 적절히 사용하면 행과 열의 스타일 우선순위를 명확히 제어할 수 있습니다. 브라우저의 CSS 우선순위(cascade) 규칙에 따라 결정됩니다.

행 스타일을 반드시 상위로 출력을 원하는 경우가 아니라면 true로 설정을 권장합니다. 스타일 적용 범위가 간소화되어 성능을 향상시킬 수 있습니다.

관련 데모 보기

행 단위로 적용할 스타일을 동적으로 결정하는 함수를 지정합니다.

rowStyleFunction는 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

• rowIndex : 행 인덱스
• item : 해당 인덱스의 행 아이템

 rowStyleFunction : function(rowIndex, item) {
   const myCss = "my-Css";
   // 로직 처리
   return myCss;
}

함수의 반환값은 CSS 에서 이미 선언되어 있는 CSS 클래스여야 합니다.

다중의 CSS 클래스는 지원하지 않습니다. 예를 들어 "right-style bold-style font12-style" 과 같은 구조는 지원하지 않습니다.

엑셀 내보내기 시에는 해당 스타일의 글자 색상(color), 배경색(background-color), 이탤릭체(font-style: italic), 볼드체(font-weight: bold), 언더라인(text-decoration: underline)만 적용됩니다.

관련 데모 보기

상위 요소에 CSS transform 배율을 적용한 경우, 그리드에도 같은 배율을 지정하여 좌표 기준을 맞춥니다.

이는 그리드 상위 태그의 CSS transform 에 scale 과 matrix를 설정한 경우만 유효합니다.

예로 80%의 scale 을 설정했다면 상위 태그의 CSS transform 은 다음과 같고 그리드 속성 scaleFactor 는 동일한 값인 0.8 을 설정해야 합니다.

    1. transform: scale(0.8);
    2. transform: matrix(0.8, 0, 0, 0.8, 0, 0);

기본값(default) : 1

스크롤바의 두께를 지정합니다. 가로 스크롤바에서는 높이, 세로 스크롤바에서는 너비에 해당합니다.

관련 데모 보기

autoScrollSize=true인 경우 터치 기기에 적용할 스크롤바 두께를 지정합니다. 가로 스크롤바에서는 높이, 세로 스크롤바에서는 너비에 해당합니다.

스크롤바 손잡이(thumb)의 두께를 지정합니다. 가로 스크롤바에서는 높이, 세로 스크롤바에서는 너비에 해당합니다.

관련 데모 보기

검색할 때 원본 값 대신 포매팅된 표시 값을 사용할지 지정합니다. true이면 표시 값, false이면 원본 데이터 값을 검색합니다.

기본은 그리드의 포매팅된 값이 아닌 원본 데이터 값을 검색합니다.

예로 그리드에 드랍다운리스트의 key-value 모드로 001 을 "영업본부" 로 출력하고 있는 경우 검색을 할 때 검색의 대상이 되는 값은 원본 데이터는 001 입니다.

그러나 searchByFormatValue 을 설정한다면 사용자가 "영업본부" 로 검색하면 001에 대한 셀을 찾아 갑니다.

관련 데모 보기

셀 또는 행의 선택 방식을 지정합니다.

• "singleCell" : 셀 하나 선택
• "singleRow" : 행 하나 선택
• "multipleCells" : 여러 셀 선택
• "multipleRows" : 여러 행 선택
• "none" : 그리드 선택 기능을 끄고 브라우저의 텍스트 선택 사용

다중 선택에서는 Shift+방향키로 범위를 조절합니다. Ctrl+Shift+방향키(Windows) 또는 Cmd+Shift+방향키(Mac)는 첫 행, 마지막 행 또는 끝 칼럼까지 선택합니다.

관련 데모 보기

세로 병합된 영역을 클릭할 때 병합 시작 셀 대신 실제 클릭한 셀을 구분하여 선택할지 지정합니다.

예로 3개의 셀이 세로 병합된 경우 가운데 셀을 클릭하면 병합되었기 때문에 첫번째 셀이 선택됩니다. 이 속성을 true 처리하면 가운데 셀만 선택시킵니다.

관련 데모 보기

그리드에 데이터가 없을 때 안내 메시지를 자동으로 표시할지 지정합니다. 메시지 내용은 noDataMessage로 설정합니다.

출력 메세지는 noDataMessage 속성의 값이 출력되니 메세지를 변경하고자 할 때는 noDataMessage 를 변경하십시오.

관련 데모 보기

그룹핑으로 생성되는 브랜치 행을 표시할지 지정합니다. false이면 그룹 브랜치 행을 표시하지 않습니다.

그룹핑을 지정하면 계층 구조(트리 구조)로 데이터가 변하게 됩니다. 이 때 그룹핑의 브랜치에 해당되는 행이 동적으로 생성됩니다.

이 속성을 false 로 지정하면 그룹핑 시 브랜치 행이 표시되지 않습니다.

그리드 왼쪽에 행을 드래그할 수 있는 손잡이 칼럼을 표시할지 지정합니다.

생성된 엑스트라 칼럼의 셀을 드래깅하여 행을 이동 시킬 수 있습니다.

관련 데모 보기

행을 드래그할 때 안내 툴팁을 표시할지 지정합니다. true이면 표시하고, false이면 숨깁니다.

편집 가능한 그리드에서 수정된 셀에 수정 표시를 보여 줄지 지정합니다. 셀 값의 변경과 표시 여부를 구분하는 설정입니다.

그리드에 푸터를 표시할지 지정합니다. true이면 설정한 푸터를 표시하며, false이면 표시하지 않습니다.

관련 데모 보기

고정 칼럼의 구분선을 데이터 행 수와 관계없이 그리드 전체 높이에 맞춰 표시할지 지정합니다.

만약 showFullFixedRule 속성을 true 로 지정하면, 고정 칼럼 세로 선은 항상 그리드 최하단까지 출력됩니다.

그리드의 칼럼 헤더를 표시할지 지정합니다. true이면 표시하고, false이면 숨깁니다.

관련 데모 보기

헤더 아래에 필터 값을 직접 입력하는 행을 표시할지 지정합니다. enableFilter=true인 경우 인라인 필터를 사용할 수 있습니다.

인라인 필터 행에 값을 입력하면 매 입력마다 필터링이 됩니다.(선행 속성 enableFilter = true 설정)

관련 데모 보기

페이징 영역에 표시할 페이지 버튼 수를 지정합니다.

지정할 수 있는 최댓값은 20입니다.

관련 데모 보기

페이징 영역에 페이지당 행 수를 변경하는 선택 목록을 표시할지 지정합니다.

Also See : pageRowSelectValues | 관련 데모 보기

관련 데모 보기

행 체크박스 칼럼의 헤더에 전체 체크박스를 표시할지 지정합니다. showRowCheckColumn=true인 경우 적용됩니다.

관련 데모 보기

홀수 행과 짝수 행에 지정된 배경색 스타일을 적용할지 지정합니다.

행을 체크할 수 있는 엑스트라 체크박스 칼럼을 표시할지 지정합니다. true이면 체크박스 칼럼을 표시합니다.

이 속성 값이 true 이면 최좌측에 체크박스 칼럼이 생성됩니다.

관련 데모 보기

행 번호를 표시하는 칼럼을 사용할지 지정합니다. true이면 행 번호 칼럼을 표시합니다.

이 속성 값이 true 이면 최좌측에 행번호 칼럼이 생성됩니다.

선택한 셀에 테두리를 표시할지 지정합니다. true이면 테두리를 표시하고, false이면 표시하지 않습니다.

관련 데모 보기

그리드 왼쪽에 행 상태 칼럼을 표시할지 지정합니다. 편집 가능 여부에 따라 표시되는 아이콘의 의미가 달라집니다.

editable 을 true 로 설정한 경우 삭제, 수정, 추가 행에 대한 정보가 이 칼럼에 아이콘을 출력됩니다.

만약 editable 을 false 로 설정한 경우 showStateColumn = true 를 설정하면 선택행에 대한 정보가 아이콘으로 출력됩니다.

관련 데모 보기

그리드 셀에 마우스를 올렸을 때 툴팁을 표시할지 여부를 지정합니다.

툴팁은 셀의 내용이 길어 화면에 모두 표시되지 않는 경우 유용하게 사용할 수 있습니다. 툴팁은 셀 내용 전체를 확인할 수 있도록 도움을 줍니다.

관련 데모 보기

selectionChange 이벤트에서 selectedItems를 생략한 간소화된 정보를 전달할지 지정합니다.

간소화한 경우 selectionChange 이벤트의 파라메터 요소인 event.selectedItems 를 포함시키지 않습니다.

selectionChange 이벤트가 발생될 때 선택한 셀이 수천~수만을 넘어 가면 퍼포먼스에 악영향을 미칩니다.

선택한 셀을 모두 확인하고자 하는 경우가 아니라면 true 설정을 권장합니다.

해당 속성 true 설정하더라도 원하는 시점에 선택한 셀 모두를 확인하는 getSelectedItems 메소드로 확인 할 수 있습니다. 따라서 일반적인 경우가 아니라면 true 설정을 권장합니다.

Also See : selectionChange | getSelectedItems

관련 데모 보기

방향키, Tab, Home과 End 키로 선택을 이동할 때 editable=false인 읽기 전용 칼럼을 건너뛸지 지정합니다.

주의 : cellEditBegin 이벤트로 동적 편집 불가 설정은 한 셀에 대해서는 적용되지 않습니다.

관련 데모 보기

여러 값을 붙여넣을 때 editable=false인 칼럼에 대응하는 값을 버릴지 지정합니다. true이면 그 칼럼의 값을 무시하고, false이면 다음 편집 가능한 칼럼으로 이어 적용합니다.

명시적으로 수정 불가능한 칼럼은 editable = false 와 같이 설정한 경우를 의미합니다. 동적으로 수정 여부가 결정되는 경우 이 속성과 관계가 없습니다.

예로 A, B, C 칼럼이 존재하고 B칼럼이 수정 불가 일 때 1, 2, 3 으로 대표되는 값을 A열에서 붙여넣기 하면

true 인 경우에는 A열에 1, B열 수정 불가, C열은 3으로 붙여 넣기 됩니다. 즉, 해당 열이 수정 불가라 그 자리에 들어가야 할 값 자체를 무시합니다.

false 인 경우에는 A열에 1, B열 수정 불가, C열은 그 다음 값인 2로 붙여 넣기 합니다. 이와 같이 건너뛰기는 명시적으로 수정 불가 설정한 칼럼에만 가능합니다.

참고 : 이 속성을 false 설정하면 붙여넣기로 새행을 만들지 않습니다. 즉, isGenNewRowsOnPaste = false 로 강제됩니다.

밴드형 붙여넣기는 이 값과 관계없이 원래 셀 위치를 유지하며 읽기 전용 셀의 값만 무시합니다. 뒤의 값을 당겨 넣지 않습니다. false로 생성하면 새 행 자동 추가를 끄는 규칙은 그대로 적용됩니다.

소프트 삭제 모드에서 새로 추가한 행도 삭제 표시를 남길지 지정합니다.

그러나 서버에서 가져온 원래 데이터(그리드에 최초에 삽입한 데이터)가 아닌 사용자가 추가한 행을 삭제할 때, 사용자가 추가한 행은 softRemoveRowMode 를 적용하지 않을 수 있습니다.

즉, 사용자가 추가한 행은 삭제 표시가 아닌 바로 제거하도록 할려면 softRemovePolicy="exceptNew" 를 설정하십시오.

softRemovePolicy 의 유효값은 "all", "exceptNew" 입니다.

편집 가능한 그리드에서 행 삭제 시 즉시 제거하지 않고 삭제 표시를 남길지 지정합니다.

삭제된 표시는 기본적으로 가운데 줄이 그어지는 형태입니다.

softRemoveRowMode=true 인 경우, 삭제된 행은 복구(삭제 취소) 할 수 있습니다.(restoreSoftRows 메소드 참고)

속성 dropToOthers 을 true 로 설정한 경우 softRemoveRowMode 는 강제적으로 false 입니다.

Also See : dropToOthers

관련 데모 보기

정렬 기준으로 실제 데이터 대신 그리드에 표시된 값을 사용할지 지정합니다. enableSorting=true인 경우 적용됩니다.

예로 드랍다운리스트의 key-value 모드를 사용하는 경우 실제 데이터는 key 값이, 보여지는 값은 value 입니다.

뷰(View)적 정렬을 위해서는 데이터와 뷰의 관계가 1:1 관계여야 합니다. 즉, key : value 의 관계가 1:1 관계여야 합니다.

여기서 정렬을 할 때 기본은 데이터 기반으로 정렬이 됩니다. 그러나 이 속성을 true 설정하면 보여지는 값인 value 기반으로 정렬을 실행합니다.

데이터 기반의 정렬보다 퍼포먼스에 영향을 미치므로 무조건적인 true 설정은 피하십시오.

관련 데모 보기

헤더를 반복 클릭할 때 적용할 정렬 상태의 순서를 지정합니다.

헤더 클릭하여 정렬을 할 때 기본 순서는 오름차순, 내림차순, 원복의 순서 입니다.

이 순서를 변경하거나 항목에서 제외 시킬 수 있습니다.

예로 작성하면 다음과 같습니다.

 // 정렬 순서 : 첫 정렬을 내림차순부터, 오름차순, 원복의 순서 설정.
 sortingSequence = [0, -1, 1];
 
 // 정렬 순서 : 오름차순, 내림차순만 가능. 즉, 원복 사용하지 않음.
 sortingSequence = [1, -1];
 
 // 정렬 순서 : 내림차순만 사용. 내림 차순 이후 원복의 순서 설정. 즉, 오름차순은 사용하지 않음. 
 sortingSequence = [0, -1]; 

관련 데모 보기

행 상태 칼럼의 너비를 지정합니다. showStateColumn=true인 경우 적용됩니다.

그룹 소계 셀을 병합하는 방식을 지정합니다. enableSummaryMerge=true인 경우 적용되는 정책입니다.

유효값은 다음과 같습니다.

• "default" : 그룹핑 필드 자신의 이전에서만 가로 병합 실행
• "all" : 그룹핑 필드 지정 개수 만큼 병합 실행

groupingSummary를 사용하는 경우 합계 필드에 표시할 텍스트를 지정합니다.

툴팁을 셀 기준의 고정된 위치에 표시할지 지정합니다.

true이면 tooltipDockedPosition에 지정한 위치에 표시하고, false이면 마우스를 따라 표시합니다. 이때 간격은 tooltipOffsetX와 tooltipOffsetY로 지정합니다.

관련 데모 보기

툴팁을 셀에 고정하여 표시할 위치를 지정합니다. showTooltip과 tooltipDocked가 모두 true인 경우 적용됩니다.

유효값은 "topLeft", "topRight", "bottomLeft", "bottomRight" 입니다.

관련 데모 보기

마우스와 툴팁 사이의 가로 간격을 픽셀 단위로 지정합니다.

showTooltip이 true이고 tooltipDocked가 false일 때 적용합니다. 0 이상의 숫자를 사용하십시오.

AUIGrid.setProp(myGridID, "tooltipOffsetX", 20);

관련 데모 보기

마우스와 툴팁 사이의 세로 간격을 픽셀 단위로 지정합니다.

showTooltip이 true이고 tooltipDocked가 false일 때 적용합니다. 0 이상의 숫자를 사용하십시오.

AUIGrid.setProp(myGridID, "tooltipOffsetY", 20);

관련 데모 보기

마우스를 셀 위에 올린 뒤 툴팁이 나타날 때까지 기다리는 시간을 밀리초 단위로 지정합니다.

예를 들어 1000이면 1초 후에 표시합니다. 같은 셀 안에서 마우스를 움직여도 대기 시간을 다시 시작하지 않습니다.

관련 데모 보기

트리 그리드에서 펼치기, 접기 아이콘을 표시할 칼럼 인덱스를 지정합니다.

트리 칼럼의 아이콘을 동적으로 결정하는 함수를 지정합니다.

파라메터 설명

• rowIndex (Number) : 행인덱스
• isBranch (Boolean) : Branch 인지 leaf 인지 여부
• isOpen (Boolean) : Branch 인 경우 열기/닫기 상태 여부
• depth (Number) : 트리의 depth, 최상위 루트가 1에 해당되며 차례로 1씩 증가함
• item (Object) : 행 아이템

Return : (String) 아이콘으로 출력하고자 하는 아이콘의 주소값(이미지 소스)

   function signature : 
   function(rowIndex, isBranch, isOpen, depth, item) {
      let imgSrc = null;
      if(item.charge === "Lawrence") {
          imgSrc = "./assets/man1.png";
      } else {
          imgSrc = "./assets/man2.png";
      }
      return imgSrc;
    }    
   

관련 데모 보기

일반 배열 데이터를 트리로 변환할 때 각 행의 ID를 가진 필드명을 지정합니다. flat2tree와 treeIdRefField를 함께 설정하십시오.

생성 시에만 설정할 수 있으며 setProp()으로 변경할 수 없습니다.

관련 데모 보기

일반 배열 데이터를 트리로 변환할 때 부모 행의 ID를 참조하는 필드명을 지정합니다. flat2tree와 treeIdField를 함께 설정하십시오.

생성 시에만 설정할 수 있으며 setProp()으로 변경할 수 없습니다.

관련 데모 보기

자식 데이터를 필요할 때 요청하여 표시하는 트리 모드를 사용할지 지정합니다. 브랜치를 펼칠 때 해당 행의 자식 데이터를 동적으로 제공하려는 경우 사용합니다.

이 그리드는 온전한 트리 그리드의 모습을 갖추고 있으나 하위 데이터가 없기 때문에 해당 행의 트리의 열기/닫기 아이콘을 눌렀을 때 그 행에 맞는 하위 데이터를 요청하는 형태의 트리 그리드로 출력합니다.

따라서 트리 그리드의 하위 행을 동적으로 열기/닫기 아이콘을 눌렀을 때 서버 요청하여 적용하고자 하는 경우 treeLazyMode 를 true 설정하십시오.

이 속성은 수정 가능한 그리드(editable = true)인 경우 사용이 불가능합니다. 오로지 조회용 그리드 속성입니다.

수정 가능한 그리드에서의 하위 행 추가는 addTreeRow 메소드를 사용하십시오.

생성 시에만 설정할 수 있으며 setProp()으로 변경할 수 없습니다.

관련 데모 보기

트리 그리드에서 부모 행과 자식 행 사이의 들여쓰기 간격을 지정합니다.

트리 브랜치를 펼치거나 접을 때 바로 아래 자식뿐 아니라 자손에게도 재귀적으로 적용할지 지정합니다.

행 선택 모드(selectionMode="singleRow" 또는 "multipleRows")에서 같은 행의 다른 칼럼으로 이동할 때도 selectionChange 이벤트를 발생시킬지 지정합니다. 기본값 false에서는 해당 이동만으로 이벤트가 발생하지 않습니다.

행 선택자를 지정 한 후, 같은 행에서 다른 칼럼으로 이동할 때 selectionChange 이벤트를 발생하고자 한다면 이 속성을 true 설정 하십시오.

관련 데모 보기

실행 취소(Undo)와 다시 실행(Redo)에 보관할 작업 기록의 최대 개수를 지정합니다. 0은 길이 제한을 두지 않는 설정입니다.

예를 들어 이 속성의 값을 30 으로 설정하면, 30개의 커맨드만 관리 됩니다.

0인 경우 길이의 제한은 없습니다. 그러나, 내부적으로 필요에 의해 스택 사이즈 초기화가 이루어집니다.

붙여넣기로 새 행을 만들 때도 editable=false인 칼럼에 값이 적용되지 않도록 할지 지정합니다. true이면 해당 칼럼에 붙여넣지 않습니다.

false 인 경우에는 붙여넣기로 새행이 생길 때 클립보드 데이터가 적용됩니다.

true 인 경우에는 붙여넣기로 새행이 생길 때 클립보드 데이터 적용되지 않습니다.

Also See : notBeginEventNewRowsOnPaste

관련 데모 보기

updateRow()로 칼럼 레이아웃에 없는 필드도 수정할 수 있도록 할지 지정합니다. true이면 임의의 필드도 수정 대상으로 사용할 수 있습니다.

임의의 필드를 수정하면 그 행은 수정된 행 상태로 변경됩니다. 따라서 getEditedRowItems 메소드를 통해 얻을 수 있습니다.

셀 편집 중 위와 아래 방향키로 편집을 마칠지 지정합니다.

InputEditRenderer에서 F2, 더블클릭 또는 editBeginMode:"click"으로 편집을 시작했을 때 적용합니다. 문자 입력으로 편집을 시작하면 적용하지 않습니다.

true이면 편집을 마치고 false이면 현재 입력기를 유지합니다.

헤더의 컨텍스트 메뉴를 사용할지 지정합니다. 기본 메뉴가 없으므로 contextMenuHeaderItems로 메뉴 항목을 작성해야 합니다.

Also See : useContextHeaderMenu

관련 데모 보기

그리드의 컨텍스트 메뉴를 사용할지 지정합니다. 기본 필터 메뉴를 사용하려면 enableFilter=true도 함께 설정하십시오.

관련 데모 보기

헤더 위에 그룹핑 패널을 표시할지 지정합니다. 헤더를 패널로 끌어 놓으면 해당 필드로 그룹핑합니다.

패널의 필드 이름을 클릭하면 정렬하고, × 버튼을 클릭하면 그룹핑에서 제거합니다. 필드를 끌어 순서를 바꿀 수 있으며 패널 밖에 놓으면 제거합니다. Escape 키로 드래그를 취소합니다.

관련 데모 보기

colSpan으로 병합한 헤더의 칼럼 이동에 과거 방식을 사용할지 지정합니다.

기본값 false에서는 병합에 포함된 칼럼을 함께 이동하고, 병합 내부로 다른 칼럼을 삽입할 수 없습니다. true이면 드래그한 칼럼 하나만 이동하는 기존 방식을 사용합니다. enableMovingColumn을 true로 설정한 경우 적용합니다.

그룹핑 패널에 필드를 추가하여 칼럼이 자동 재정렬되는 경우에도 같은 기준을 적용합니다. setProp으로 변경하면 다음 드래그부터 적용됩니다.

var gridProps = {
    enableMovingColumn: true,
    useLegacyColSpanMoving: true // 과거 칼럼 이동 방식 사용 (기본값 false)
};

Also See : enableMovingColumn | colSpan

데이터를 페이지로 나누어 표시할지 지정합니다.

페이지당 행 수는 pageRowCount로 지정합니다. 현재 페이지의 데이터는 getCurrentPageData()로 조회합니다.

autoGridHeight가 true이면 현재 페이지의 모든 행이 보이도록 높이를 조정합니다. 페이징에서는 fixedRowCount를 적용하지 않습니다.

관련 데모 보기

페이징 모드(usePaging=true)에서 하단의 페이지 이동 영역을 표시할지 지정합니다. false이면 페이징 패널을 숨깁니다.

마우스 휠 및 트랙패드 스크롤 이동을 부드럽게 처리할지 여부를 지정합니다.

운영체제의 동작 줄이기 설정을 사용하면 부드러운 이동을 생략합니다.

그룹 소계(groupingSummary) 계산에 칼럼의 expFunction으로 계산한 데이터를 사용할지 지정합니다.

트리 및 그룹핑 칼럼의 필터 목록을 계층형으로 표시할지 지정합니다.

트리 그리드의 treeColumnIndex 칼럼과 groupingFields에 지정한 칼럼에 적용합니다.

// 트리 칼럼에 계층형 필터 아이콘을 표시합니다.
const gridProps = { enableFilter: true, useTreeFilterMenu: true, treeColumnIndex: 0 };
const columnLayout = [
    { dataField: "name", headerText: "이름", filter: { showIcon: true } }
];

Also See : getFilterCache() | setFilterCache()

관련 데모 보기

그리드의 처음이나 마지막에서 휠을 더 움직일 때 바깥 페이지의 스크롤을 허용할지 지정합니다.

true이면 이미 경계에 도달한 상태의 다음 휠 입력부터 페이지 스크롤을 허용합니다. false이면 그리드에서 휠 입력을 처리합니다. 터치 스크롤은 브라우저 동작을 따릅니다.

마우스 휠의 세로 스크롤 민감도를 지정합니다.

값이 클수록 더 많이 이동합니다. 1 이상의 숫자를 사용하십시오.

관련 데모 보기

그리드 전체의 너비를 픽셀 단위로 지정합니다. 값을 지정하지 않으면 부모 DIV의 너비를 사용합니다.

칼럼 내용에 맞는 너비를 계산할 때 추가로 더할 픽셀 값을 지정합니다. 내용과 칼럼 경계 사이에 여유를 둘 때 사용합니다.

셀 텍스트를 자동으로 줄바꿈하고 내용에 맞춰 행 높이를 조정할지 지정합니다.

true이면 가로 가상화를 사용하지 않으므로 칼럼이 많을수록 표시 성능에 영향을 줄 수 있습니다. 생성 시에만 설정할 수 있습니다.

한 행의 높이가 그리드 영역의 2/3를 넘는 경우에는 페이징(usePaging:true)을 함께 사용하십시오.

관련 데모 보기

마지막 칼럼에서 오른쪽 방향키나 Tab 키를 누르면 다음 행의 첫 칼럼으로 이동할지 지정합니다. 반대 방향에서는 이전 행의 마지막 칼럼으로 이동합니다.

관련 데모 보기

행 번호를 0부터 시작할지 지정합니다. true이면 0부터, false이면 1부터 표시합니다.