오늘의 이야기

DevExtreme dxDataGrid CustomStore 사용 시 자주 묻는 질문 정리

dxdatagrid

 

DevExtreme의 dxDataGrid를 사용하면서 가장 많이 접하는 질문 중 하나가 Pager의 전체 건수 설정, Loading Panel 제어, 그리고 수정된 데이터 반영 방법입니다. 이번 글에서는 실제 개발 과정에서 자주 사용하는 방법들을 정리해 보겠습니다.

---

1. dxDataGrid Pager의 전체 건수(totalCount) 설정하기

CustomStore를 사용할 경우 Pager는 데이터 개수를 자동으로 알 수 없습니다. 따라서 load 함수에서 반드시 totalCount 값을 함께 반환해야 합니다.

const store = new DevExpress.data.CustomStore({
    key: "id",

    load: function(loadOptions) {

        return $.ajax({
            url: "/api/users",
            data: {
                skip: loadOptions.skip,
                take: loadOptions.take
            }
        }).then(function(result) {

            return {
                data: result.items,
                totalCount: result.totalCount
            };
        });
    }
});

서버 응답 예시입니다.

{
    "items": [
        { "id": 1, "name": "홍길동" },
        { "id": 2, "name": "김철수" }
    ],
    "totalCount": 125
}

Pager는 totalCount 값을 기준으로 전체 페이지 수를 계산합니다.

---

2. Deferred($.Deferred) 사용하기

기존 프로젝트에서는 Promise 대신 Deferred를 사용하는 경우도 많습니다. 이 경우 resolve 시 totalCount를 함께 전달하면 됩니다.

const store = new DevExpress.data.CustomStore({

    load: function(loadOptions) {

        const d = $.Deferred();

        $.ajax({
            url: "/api/users",
            type: "GET",
            data: {
                skip: loadOptions.skip,
                take: loadOptions.take
            }
        })
        .done(function(result) {

            d.resolve(
                result.items,
                {
                    totalCount: result.totalCount
                }
            );

        })
        .fail(function() {

            d.reject("조회 실패");

        });

        return d.promise();
    }
});

핵심은 아래 코드입니다.

d.resolve(
    result.items,
    {
        totalCount: result.totalCount
    }
);

---

3. Loading Panel 안 보이게 하기

데이터 로딩 시 나타나는 스피너와 Loading 메시지를 숨기고 싶다면 loadPanel 설정을 사용하면 됩니다.

$("#gridContainer").dxDataGrid({
    dataSource: store,

    loadPanel: {
        enabled: false
    }
});

생성 이후에도 옵션 변경이 가능합니다.

const grid = $("#gridContainer").dxDataGrid("instance");

grid.option("loadPanel.enabled", false);

---

4. CustomStore에서 셀 수정 내용을 데이터에 반영하기

CustomStore를 사용하는 경우 셀 수정 후 자동으로 원본 데이터가 변경되지 않을 수 있습니다. 이때 update 함수를 구현해야 합니다.

const store = new DevExpress.data.CustomStore({
    key: "id",

    load: function() {
        return {
            data: dataList,
            totalCount: dataList.length
        };
    },

    update: function(key, values) {

        const item = dataList.find(x => x.id === key);

        if(item) {
            Object.assign(item, values);
        }

        return $.Deferred().resolve().promise();
    }
});

Grid 설정은 아래와 같습니다.

$("#gridContainer").dxDataGrid({
    dataSource: store,

    editing: {
        mode: "cell",
        allowUpdating: true
    }
});

셀 수정 후 포커스를 이동하거나 엔터를 누르면 update 함수가 호출됩니다.

---

5. 수정 이벤트 감지하기

행 업데이트 시점에 수정된 값을 확인하고 싶다면 onRowUpdating 이벤트를 사용할 수 있습니다.

$("#gridContainer").dxDataGrid({

    editing: {
        mode: "cell",
        allowUpdating: true
    },

    onRowUpdating: function(e) {

        console.log("기존 데이터", e.oldData);
        console.log("변경 데이터", e.newData);

        Object.assign(e.oldData, e.newData);
    }
});

---

마무리

CustomStore를 사용하는 dxDataGrid에서는 다음 네 가지를 기억하면 대부분의 문제를 해결할 수 있습니다.

• Pager를 사용하려면 totalCount를 반환한다.


• Deferred 사용 시 resolve(data, { totalCount }) 형태를 사용한다.


• Loading Panel은 loadPanel.enabled = false 로 숨길 수 있다.


• 셀 수정 내용을 반영하려면 update() 함수를 구현한다.

실무에서는 Server Paging, Sorting, Filtering을 함께 사용하는 경우가 많으므로 remoteOperations 옵션과 조합하여 사용하는 것을 추천합니다.