생각저장소 (배움의길에서 만나는 이야기)

DevExtreme DxDataGrid 셀에 버튼 추가하기 웹 애플리케이션에서 DevExtreme의 DxDataGrid를 사용할 때, 각 셀에 버튼을 추가하고 클릭 이벤트를 제어하는 방법을 소개합니다. 특히 JSP 환경에서 사용할 수 있도록 JavaScript 기반으로 설명합니다.📌 목표: 각 행의 셀에 버튼을 추가하고, 버튼 클릭 시 셀 클릭 이벤트가 실행되지 않도록 제어합니다.1. 기본 Grid 구성먼저 간단한 데이터와 함께 DxDataGrid를 생성합니다.2. 핵심 포인트 설명cellTemplate: 셀을 커스터마이징할 수 있는 함수로, 버튼을 직접 삽입할 수 있습니다.e.stopPropagation(): 버튼 클릭 이벤트가 셀 클릭 이벤트로 전파되는 것을 막습니다.e.preventDefault(..

DevExpress DxDataGrid에서 셀 편집 제어 및 포커스 설정 이번 글에서는 DxDataGrid에서 행이 추가된 이후 특정 셀의 편집을 막고, 커서를 원하는 컬럼으로 이동시키는 방법에 대해 살펴봅니다.🎯 특정 셀 편집 막기행이 추가된 후 특정 셀을 편집 불가능하게 만들기 위해선 행에 플래그를 추가하거나 조건부 설정이 필요합니다.onRowInserting: function(e) { // 행 데이터 설정 e.data.isNewRow = true;}이후 그리드 설정에서 셀 편집을 막는 방법:cellPrepared: function(e) { if (e.rowType === "data" && e.data.isNewRow && e.column.dataField === "ComboColumn") {..

DevExtreme dxDataGrid에서 셀 병합(Cell Merge) 구현 방법 DevExtreme의 dxDataGrid 컴포넌트는 기본적으로 셀 병합 기능을 제공하지 않지만, 사용자 정의 방식으로 구현이 가능합니다. 아래는 특정 열에서 같은 값이 연속으로 나타날 경우, 셀을 병합하여 표시하는 방법을 설명합니다.1. 기본 원리onCellPrepared 이벤트를 사용하여 셀 렌더링 시점에 조작동일한 값이 연속될 경우 윗 셀에 rowspan을 부여아래쪽 셀은 display: none으로 숨김 처리2. 구현 예시$("#gridContainer").dxDataGrid({ dataSource: yourDataSource, columns: [ { dataField: "category", ..

💡 DevExpress dxChart & dxDataGrid 활용 가이드 이 블로그에서는 dxChart 및 dxDataGrid를 사용하는 방법에 대해 설명합니다. 각 질문별로 요점을 강조하고 예제를 포함하여 쉽게 이해할 수 있도록 구성하였습니다.📊 dxChart 관련 질문 & 해결 방법✅ 하나의 차트에서 Bar와 Line을 동시에 표시할 수 있나요?가능합니다! dxChart에서는 여러 개의 시리즈를 활용할 수 있습니다.$("#chartContainer").dxChart({ dataSource: myData, series: [ { type: "bar", valueField: "barValue", name: "Bar Chart" }, { type: "line", val..

DevExpress dxDataGrid 활용 및 JSON 데이터 처리 Q: DxDataGrid에서 선택된 행의 데이터를 배열 형태로 받는 방법DxDataGrid에서 선택된 행의 데이터를 배열 형태로 가져오려면 getSelectedRowsData() 메서드를 사용합니다.var selectedData = $("#dxDataGrid").dxDataGrid("instance").getSelectedRowsData();console.log(selectedData); // 배열 형태로 출력Q: 선택된 행의 데이터를 AJAX로 서버에 보내는 방법`ajaxSubmit`을 사용하여 데이터를 JSON으로 변환한 후 서버로 전송할 수 있습니다.$("#myForm").ajaxSubmit({ type: "POST", ..

DevExtreme과 JavaScript를 활용한 다양한 기능 구현 1. dxDataGrid와 dxDateBox 소개dxDataGriddxDataGrid는 DevExtreme의 JavaScript UI 컴포넌트 중 하나로, 데이터를 그리드 형태로 표시하는 데 사용됩니다. 이 컴포넌트는 데이터 정렬, 그룹화, 필터링, 편집, 내보내기 등 다양한 기능을 제공합니다.dxDateBoxdxDateBox는 DevExtreme의 UI 컴포넌트 중 하나로, 날짜와 시간을 지정된 형식으로 표시하고 사용자가 필요한 날짜/시간 값을 선택하거나 입력할 수 있도록 합니다.2. dxDateBox 값 변경 감지dxDateBox의 값이 변경되었을 때 이를 감지하려면 onValueChanged 이벤트를 사용할 수 있습니다.JavaSc..