DevExtreme DxDataGrid 셀에 버튼 추가하기

 

DevExtreme DxDataGrid 셀에 버튼 추가하기

버튼달기

 

웹 애플리케이션에서 DevExtreme의 DxDataGrid를 사용할 때, 각 셀에 버튼을 추가하고 클릭 이벤트를 제어하는 방법을 소개합니다. 특히 JSP 환경에서 사용할 수 있도록 JavaScript 기반으로 설명합니다.

📌 목표: 각 행의 셀에 버튼을 추가하고, 버튼 클릭 시 셀 클릭 이벤트가 실행되지 않도록 제어합니다.

1. 기본 Grid 구성

먼저 간단한 데이터와 함께 DxDataGrid를 생성합니다.

<div id="gridContainer"></div>

<script>
  $(function () {
    $("#gridContainer").dxDataGrid({
      dataSource: [
        { id: 1, name: "홍길동" },
        { id: 2, name: "김철수" }
      ],
      columns: [
        {
          dataField: "name",
          caption: "이름"
        },
        {
          caption: "작업",
          cellTemplate: function (container, options) {
            // 버튼 생성
            $("")
              .addClass("btn btn-primary")
              .text("클릭")
              .on("click", function (e) {
                e.stopPropagation(); // 셀 클릭 이벤트 전파 차단
                e.preventDefault();  // 기본 동작 방지 (포커스, 선택 등)
                alert("버튼 클릭됨! ID: " + options.data.id);
              })
              .appendTo(container);
          }
        }
      ],
      showBorders: true,
      onCellClick: function(e) {
        // 셀 클릭 시 동작
        console.log("셀 클릭됨: ", e.data);
      }
    });
  });
</script>

2. 핵심 포인트 설명

• cellTemplate: 셀을 커스터마이징할 수 있는 함수로, 버튼을 직접 삽입할 수 있습니다.
• e.stopPropagation(): 버튼 클릭 이벤트가 셀 클릭 이벤트로 전파되는 것을 막습니다.
• e.preventDefault(): 셀 포커스나 선택 같은 기본 동작을 방지합니다.
• onCellClick: 셀 클릭 시 실행되는 이벤트로, 버튼 클릭 시에는 실행되지 않도록 위에서 차단합니다.

3. dxclick vs click 차이점

DevExtreme에서는 dxclick이라는 전용 이벤트를 제공합니다. 일반 click 이벤트와의 차이는 다음과 같습니다:

항목	click	dxclick
반응 속도	모바일에서 약간의 지연 발생	즉시 반응
모바일 지원	터치 지연 있음	터치 최적화됨
사용 권장	일반 DOM 요소	DevExtreme 컴포넌트 내부

따라서 DevExtreme 컴포넌트 안에서는 dxclick을 사용하는 것이 더 안정적입니다. 하지만 이벤트 전파를 제어하려면 click을 사용하는 것이 더 유연할 수 있습니다.

마무리

이처럼 DevExtreme의 DxDataGrid를 활용하면 셀에 버튼을 자유롭게 추가하고, 이벤트를 세밀하게 제어할 수 있습니다. JSP 환경에서도 JavaScript를 통해 충분히 구현 가능하며, 사용자 경험을 높이는 데 큰 도움이 됩니다.

더 복잡한 기능(예: Ajax 호출, 모달 창 열기 등)을 버튼에 연결하고 싶다면, 그에 맞는 이벤트 핸들러를 추가하면 됩니다. 필요하시면 언제든지 도와드릴게요!