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