1.3.0.0 이상

설명

onDX5CompressWaitingBegin 함수는 압축 다운로드가 시작될 때 호출되는 콜백 함수이다.

function onDX5CompressWaitingBegin(id) {
    ...
}

형식

# 전역으로 이벤트 핸들러 선언
function onDX5CompressWaitingBegin(id) { ... }

# 컴포넌트 생성 시점에 이벤트 핸들러 등록 (3.10.0.0 버전 이상)
dx5.create({
    ...
    events: {
        compressWaitingBegin: function(id) { ... }
    }
});

파라미터

1.3.0.0 이상

설명

onDX5CompressWaitingCompleted 함수는 압축 작업이 완료되면 호출되는 콜백 함수이다.

function onDX5CompressWaitingCompleted(id) {
    ...
}

형식

# 전역으로 이벤트 핸들러 선언
function onDX5CompressWaitingCompleted(id) { ... }

# 컴포넌트 생성 시점에 이벤트 핸들러 등록 (3.10.0.0 버전 이상)
dx5.create({
    ...
    events: {
        compressWaitingCompleted: function(id) { ... }
    }
});

파라미터

1.3.0.0 이상

설명

onDX5CompressWaitingStopped 함수는 압축 요청이 강제로 중지된 후 호출되는 콜백 함수이다.

function onDX5CompressWaitingStopped(id) {
    ...
}

만일 압축 과정이 끝나고, 대상 파일이 다운로드되는 과정이라면 onDX5CompressWaitingStopped 함수가 호출되더라도, 다운로드 과정까지 취소되지 않는다.

형식

# 전역으로 이벤트 핸들러 선언
function onDX5CompressWaitingStopped(id) { ... }

# 컴포넌트 생성 시점에 이벤트 핸들러 등록 (3.10.0.0 버전 이상)
dx5.create({
    ...
    events: {
        compressWaitingStopped: function(id) { ... }
    }
});

파라미터

1.4.1.0 이상

설명

onDX5DragAndDrop 함수는 드래그앤 드롭 작업을 할 때, 파일 항목을 드롭하면 호출되는 콜백 함수이다.

function onDX5DragAndDrop(id) {
    ...
}

onDX5DragAndDrop 함수는 항목이 드롭될 때 발생하지만, 항목을 추가하기 전후를 구별하는 용도로 사용할 수 없고, 단순히 드롭 액션이 일어났음을 알리는 목적으로만 제공된다.

드롭 후, 파일 추가 정보를 알려면, onDX5ItemsAdded 콜백 함수를 사용해야 한다.

형식

# 전역으로 이벤트 핸들러 선언
function onDX5DragAndDrop(id) { ... }

# 컴포넌트 생성 시점에 이벤트 핸들러 등록 (3.10.0.0 버전 이상)
dx5.create({
    ...
    events: {
        dragAndDrop: function(id) { ... }
    }
});

파라미터

3.2.0.0 이상

설명

onDX5ColumnDataBinding 함수는 GRID 스타일에서 열 마다 출력할 내용을 표현하기 위해서 호출되는 콜백 함수이다.

GRID 스타일에서 열은 각 항목의 메타데이터 값을 그대로 화면에 출력한다. 그러나 가상 파일과 달리 로컬 파일은 meta 속성을 사용하여 등록 시점에 메타데이터를 설정할 수 없다.

onDX5ColumnDataBinding 함수를 사용하면 항목의 메타데이터 상태에 따라 적절한 표현을 할 수 있다.

function onDX5ColumnDataBinding(id, itemId, columnKey, columnValue) {
    if (columnKey == "composer" && columnValue == null) return "Unknown";
    else if (columnKey == "country" && columnValue == null) return "Unknown";
}

형식

# 전역으로 이벤트 핸들러 선언
function onDX5ColumnDataBinding(id, itemId, columnKey, columnValue) { ... }

# 컴포넌트 생성 시점에 이벤트 핸들러 등록 (3.10.0.0 버전 이상)
dx5.create({
    ...
    events: {
        columnDataBinding: function(id, itemId, columnKey, columnValue) { ... }
    }
});

파라미터

4.1.0.0 이상

설명

onDX5ColumnDataDisplaying는 GRID 스타일에서 열 마다 출력할 내용을 다양하게 표현하기 위해서 호출되는 이벤트 핸들러이다.

GRID 스타일에서 열은 텍스트 또는 간단한 HTML 코드만 출력할 수 있었으나, onDX5ColumnDataDisplaying 함수를 사용하면 열의 출력을 다양하게 표현할 수 있다.

// "movie" 열(column)인 경우, 텍스트를 빨간색으로 표시
function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) {
    if (columnKey === "movie") {
        return `<span style='color: red;'>${columnValue}</span>`;
    }
}

// "action" 열의 경우, 버튼을 생성하여 클릭 시 이벤트 발생 
function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) {
    if (columnKey === "action") {
        return Object.assign(document.createElement("button"), {
            type: "button",
            style: "padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; background-color: #f8f8f8; color: #333; font-size: 11px; cursor: pointer;",
            onclick: (ev) => {
                echo(itemId);
            },
            textContent: "Echo"
        });
    }
}

유의할 점

• 렌더링되는 HTML 요소는 외부 CSS를 사용하지 못하므로, style 속성을 사용하여 인라인으로 설정해야 한다.
• 셀 왼쪽과 오른쪽은 4px 정도 padding 영역이 존재한다.
• HTML input[type=text] 요소를 렌더링하면, setEnableDeletionByKey 메소드를 사용하여 키보드 삭제 기능을 비활성화해야 한다. 그렇게 하지 않으면 입력란에서 삭제 키를 사용하는 경우, 글자가 아닌 항목이 삭제가 될 수 있다.

형식

# 전역으로 이벤트 핸들러 선언
function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) { ... }

# 컴포넌트 생성 시점에 이벤트 핸들러 등록
dx5.create({
    ...
    events: {
        columnDataDisplaying: function(id, itemId, columnKey, columnValue) { ... }
    }
});

파라미터

반환

• 출력될 내용을 변경할 필요가 없다면 아무것도 반환을 하지 않거나, return 문만을 사용하도록 한다.
• 텍스트를 반환하면 해당 텍스트를 HTML 문자열로 판단하고 출력한다.
• HTML 객체를 반환하면 해당 HTML을 셀에 렌더링한다.