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

DevExtreme dxDataGrid CustomStore 사용 시 자주 묻는 질문 정리 DevExtreme의 dxDataGrid를 사용하면서 가장 많이 접하는 질문 중 하나가 Pager의 전체 건수 설정, Loading Panel 제어, 그리고 수정된 데이터 반영 방법입니다. 이번 글에서는 실제 개발 과정에서 자주 사용하는 방법들을 정리해 보겠습니다.1. dxDataGrid Pager의 전체 건수(totalCount) 설정하기CustomStore를 사용할 경우 Pager는 데이터 개수를 자동으로 알 수 없습니다. 따라서 load 함수에서 반드시 totalCount 값을 함께 반환해야 합니다.const store = new DevExpress.data.CustomStore({ key: "id", ..

📌 dxDataGrid 편집 & Selection 관련 1. JSON 문자열 처리서버에서 JSON 문자열을 받으면 JSON.parse()로 객체로 변환해야 값 추출이 가능합니다.var jsonString = '[{"id":1,"name":"Electronics"},{"id":2,"name":"Books"}]';var data = JSON.parse(jsonString);var values = data.map(item => item.name);console.log(values); // ["Electronics", "Books"] 2. editCellTemplate에서 SelectBox 구성셀 편집 시 서버에서 가져온 데이터를 SelectBox로 표시하려면:{ dataField: "categoryId"..

DevExtreme dxDataGrid 활용 정리 이번 글에서는 DevExtreme dxDataGrid를 사용하면서 자주 쓰이는 기능과 팁들을 정리했습니다. JavaScript와 함께 동적으로 데이터를 제어하거나 UI를 커스터마이징할 때 유용합니다.1. 특정 셀 숨기기cellTemplate을 활용하여 조건에 따라 셀을 숨길 수 있습니다.columns: [ { dataField: "Phone", cellTemplate: function(container, options) { if (options.data.IsHidden) { container.text(""); // 숨김 처리 } else { container.text(options.value); ..

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..