오늘의 이야기

DevExtreme dxDataGrid Lookup 검색 기능과 Date 컬럼 입력 설정 방법

dxDataGrid

 

DevExtreme의 dxDataGrid를 사용하다 보면 자주 마주치는 기능 중 하나가 Lookup 컬럼 검색과 Date 컬럼 입력 처리입니다. 특히 Batch 편집 모드에서 사용자 입력 편의성을 높이려면 몇 가지 옵션을 추가로 설정하는 것이 좋습니다. 이번 글에서는 Lookup(콤보박스) 검색 활성화 방법과 Date 컬럼 입력 시 하이픈(-) 처리 방법을 정리해 보겠습니다.

dxDataGrid Lookup 컬럼에서 검색 기능 사용하기

dxDataGrid의 lookup 컬럼은 내부적으로 dxSelectBox를 사용합니다. 기본적으로 목록 선택만 가능하지만 searchEnabled 옵션을 설정하면 사용자가 직접 검색할 수 있습니다.

{
    dataField: "CategoryId",
    lookup: {
        dataSource: categoryList,
        valueExpr: "id",
        displayExpr: "name"
    },
    editorOptions: {
        searchEnabled: true,
        searchMode: "contains"
    }
}

하지만 편집 모드에 따라 editorOptions가 제대로 적용되지 않는 경우가 있습니다. 이럴 때는 onEditorPreparing 이벤트에서 설정하는 방법이 가장 안정적입니다.

onEditorPreparing: function(e) {
    if (e.parentType === "dataRow"
        && e.dataField === "CategoryId") {

        e.editorOptions.searchEnabled = true;
        e.editorOptions.searchMode = "contains";
        e.editorOptions.showClearButton = true;
    }
}

여러 필드를 대상으로 검색하기

Lookup 데이터가 많은 경우 품목코드와 품목명 등 여러 필드를 동시에 검색하도록 설정할 수 있습니다.

e.editorOptions.searchExpr = [
    "itemCode",
    "itemName"
];

이 설정을 적용하면 사용자는 코드나 이름 중 어느 것으로도 검색할 수 있어 사용성이 크게 향상됩니다.

dxDataGrid Date 컬럼 입력 시 하이픈(-)을 꼭 입력해야 할까?

Date 컬럼은 일반적으로 아래와 같이 정의합니다.

{
    dataField: "ORDER_DATE",
    dataType: "date"
}

많은 개발자들이 궁금해하는 부분은 사용자가 직접 날짜를 입력할 때 20250101 형태로 입력 가능한지 여부입니다.

결론부터 말하면 브라우저 환경과 DevExtreme 버전에 따라 인식 여부가 달라질 수 있습니다. 따라서 가장 안전한 입력 방식은 아래와 같습니다.

2025-01-01

Batch 모드에서 날짜 입력 편의성 높이기

Batch Editing 모드를 사용하는 경우 날짜 입력 편의를 위해 useMaskBehavior 옵션을 사용하는 것을 추천합니다.

{
    dataField: "ORDER_DATE",
    dataType: "date",
    format: "yyyy-MM-dd"
}

onEditorPreparing: function(e) {
    if (e.dataField === "ORDER_DATE") {
        e.editorOptions.useMaskBehavior = true;
    }
}

해당 옵션을 사용하면 날짜 입력 형식이 강제되어 사용자가 보다 쉽게 날짜를 입력할 수 있습니다.

실무에서 추천하는 설정

실무에서는 다음과 같은 조합을 자주 사용합니다.

{
    dataField: "ORDER_DATE",
    dataType: "date",
    format: "yyyy-MM-dd"
}

onEditorPreparing: function(e) {

    if (e.dataField === "ORDER_DATE") {
        e.editorOptions.useMaskBehavior = true;
    }

    if (e.dataField === "CategoryId") {
        e.editorOptions.searchEnabled = true;
        e.editorOptions.searchMode = "contains";
    }
}

정리

• Lookup 컬럼 검색은 searchEnabled 속성으로 활성화 가능


• onEditorPreparing 이벤트를 사용하면 적용 안정성이 높음


• searchExpr 속성을 이용하여 여러 필드를 동시에 검색 가능


• Date 컬럼은 'yyyy-MM-dd' 형식 입력이 가장 안전함


• Batch 모드에서는 useMaskBehavior 사용을 권장

DevExtreme dxDataGrid를 사용할 때 Lookup 검색 기능과 Date 입력 마스킹만 적용해도 사용자 경험이 크게 향상됩니다. 특히 데이터 건수가 많거나 날짜 입력이 빈번한 화면에서는 필수적으로 고려해 볼 만한 설정입니다.