AUISoft
AUIGrid 3.0.16 Documentation
CustomEditRenderer

사용자 정의 에디트렌더러(CustomEditRenderer)는 그리드에서 제공되는 기본 에디트렌더러가 아닌 사용자(개발자)가 직접 작성한 에디터를 그리드의 editRenderer 로 정의하여 셀 수정 방식을 결정할 수 있는 에디트렌더러 입니다.

사용자 정의 에디트렌더러는 칼럼의 editRenderer 에 "CustomEditRenderer" 를 type으로 지정하고, 실제 사용자가 작성한 js 파일을 jsClass 값으로 설정합니다.

사용자 정의 에디트렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 editRendrerer 속성 값인 Object 형태로 선언되어야 합니다.

칼럼의 editRenderer 속성의 type 으로만 설정 가능합니다.

아래는 설정 예제 입니다. 

const columnLayout = [{
...
}, {
     dataField : "color",
     headerText : "컬러",
     width : 160,
     editRenderer : {
          type : "CustomEditRenderer", // 사용자 정의 에디트렌더러 사용
          jsClass : AUIGrid.SpectrumEditor // 작성한 사용자 정의 에디트렌더러 JS
     }
}];

사용자 정의 에디트렌더러 사용에 대한 사전 스킬 요구 사항

  • 자바스크립트로 HTML 요소(Element)를 생성하고, 제어할 수 있는 스킬이 요구 됩니다.
  • 자바스크립트로 DOM 에 접근하여 CSS 클래스 및 style 을 추가, 삭제 등 제어할 수 있는 스킬이 요구 됩니다.

사용자 정의 에디트렌더러 사용의 장점

  • AUIGrid 에서 제공하는 에디트렌더러의 한계를 넘어 원하는 형태의 셀 수정 방식을 개발자가 직접 결정, 개발 할 수 있습니다.

사용자 정의 렌더러 사용의 단점

  • editingOnKeyDown (키보드 입력으로 바로 편집할 수 있는지 여부) 속성 사용에 제한이 있습니다. 키보드 F2, 스페이스바 키만 에디팅 진입을 하게 됩니다
⚠️ 주의: CustomEditRenderer 에 대한 기술지원은 제공하지 않습니다. 해당 기능 개발/이용은 전적으로 숙련된 개발자의 영역입니다.
NameDescription
extraProps
Type : Object   Version: 3.0.14

CustomEditRenderer 에 전달할 여분의 속성을 설정합니다.

여기서 작성한 extraProps 는 사용자가 작성한 클래스에서 this.extraProps 로 접근 가능합니다.

기본값(default) : null
fitHeight
Type : Boolean   Version: 3.0.14

에디트렌더러의 세로 크기를 해당 셀의 세로 크기와 동일하게 맞춰 표시할지 여부를 지정합니다.

기본값(default) : false
fitWidth
Type : Boolean   Version: 3.0.14

에디트렌더러의 가로 크기를 해당 셀의 가로 크기와 동일하게 맞춰 표시할지 여부를 지정합니다.

기본값(default) : false
height
Type : Number   Version: 3.0.14

에디트렌더러의 세로 크기를 명시적으로 지정합니다.

기본값(default) : NaN
hPosition
Type : String   Version: 3.0.14

에디트렌더러가 표시될 때 셀 기준으로 왼쪽과 오른쪽 중 표시될 자리를 지정합니다.

유효값은 "left", "right" 입니다.

기본값(default) : "left"
jsClass
Type : Class   Version: 3.0.14

사용자가 그리드의 에디트렌더러로 작성한 클래스를 설정합니다.

작성한 클래스는 AUIGrid.Class 를 이용하여 AUIGrid.EditRendererBase 클래스를 확장(extend)하여 작성하여야 합니다.

관련 내용 보기

기본값(default) : null
offsetLeft
Type : Number   Version: 3.0.14

에디트렌더러가 표시될 때 X 위치에 추가 값을 지정합니다.

예로 이 속성을 20 설정하면 20px 오른쪽으로 이동하여 에디트렌더러가 출력됩니다.

기본값(default) : NaN
offsetTop
Type : Number   Version: 3.0.14

에디트렌더러가 표시될 때 Y 위치에 추가 값을 지정합니다.

예로 이 속성을 20 설정하면 20px 하단으로 이동하여 에디트렌더러가 출력됩니다.

기본값(default) : NaN
vPosition
Type : String   Version: 3.0.14

에디트렌더러가 표시될 때 셀 기준으로 상단과 하단 중 표시될 자리를 지정합니다.

유효값은 "top", "bottom" 입니다.

기본값(default) : "bottom"
width
Type : Number   Version: 3.0.14

에디트렌더러의 가로 크기를 명시적으로 지정합니다.

기본값(default) : NaN

Copyright(c) 2025 AUISoft Co., Ltd. All Right Reserved