안녕하세요 그레이프시티입니다.
문의 주신 내용에 답변 드립니다.
1. 해당 현상과 관련하여 Wijmo에서 자체적으로 정렬을 하는 것이 아닌 Excel 데이터로 객체를 만들 때 데이터가 추가될 때마다 object가 숫자 형식의 키를 정렬하여 FlexGrid에서 불러온 결과와 엑셀의 열의 순서가 다르게 됩니다.(item[binding] = cellValue;) 이를 해결 하기 위해서는 FlexGrid의 열 바인딩을 별도로 제공해주셔야 합니다.
2. 샘플에서 이전 binding을 삭제하기 위해 columnCollection을 지우고 난 뒤, auutoGenerateColumns을 true로 설정하는데 이 때문에 FlexGrid가 data(key)에서 헤더를 가져오게 됩니다. 다만, 열 header가 정의 되지 않아 파스칼 표기법으로 형식이 지정되어 대문자로 표시합니다. 해당 이슈를 해결하기 위해서도 별도로 열 헤더를 지정해주셔야 합니다.
위의 문제를 해결 하기 위해서 아래와 같이 별도로 열 헤더를 그리드 생성할 때와 같이 바인딩과 header 값에 대해서 하나씩 지정하여 추가해주시거나
function init() {
function bindImportedDataIntoModel() {
const newData = (getImportedCVData());
grid.columns.clear();
data = new wijmo.collections.CollectionView(newData);
grid.autoGenerateColumns = false;
grid.itemsSource = data;
// // ################# 헤더 정렬 파일 column binding #################
grid.columns.push(new wijmo.grid.Column({ binding: '이름', header: '이름' }))
grid.columns.push(new wijmo.grid.Column({ binding: '3', header: '3' }))
grid.columns.push(new wijmo.grid.Column({ binding: '1', header: '1' }))
grid.columns.push(new wijmo.grid.Column({ binding: '7', header: '7' }))
grid.columns.push(new wijmo.grid.Column({ binding: '3', header: '3' }))
// ################# 소문자 column binding #################
// grid.columns.push(new wijmo.grid.Column({ binding: '이름', header: '이름' }))
// grid.columns.push(new wijmo.grid.Column({ binding: 'a', header: 'a' }))
// grid.columns.push(new wijmo.grid.Column({ binding: 'b', header: 'b' }))
// grid.columns.push(new wijmo.grid.Column({ binding: 'c', header: 'c' }))
// grid.columns.push(new wijmo.grid.Column({ binding: 'd', header: 'd' }))
}
또 다른 방법으로는 열 헤더에 대한 정보를 별도로 배열에 저장하고 그리드의 itemsSource에 할당하고 나서 반복문을 통해 지정하시는 방법도 있습니다. 아래 코드는 headerInfo 변수에 데이터를 push하여 순서대로 열 정보를 담고 열을 생성 및 추가하는 코드입니다. 다만 키가 중복되는 경우, 객체에 추가 시 기존 값이 새로운 값으로 덮어씌워지기 때문에 중복 체크 후, 공백을 넣어 기본 값이 덮어씌워지는 것을 방지하였습니다.
var headerInfo; //헤더 정보를 담을 변수
function init() {
function bindImportedDataIntoModel() {
(...)
grid.autoGenerateColumns = false;
grid.itemsSource = data;
headerInfo.forEach((el) =>{
grid.columns.push(new wijmo.grid.Column({binding:el,header:el}));
}
)
}
function getImportedCVData() {
const arr = [];
headerInfo =[];//헤더 정보 초기화
(...)
var binding = _convertHeaderToBinding(header);
if(Object.keys(item).includes(binding)){ // 키 중복 체크
binding += " " // 공백 추가
};
item[binding] = cellValue;
if(row===0){ // 헤더 정보가 중복되는 것을 방지
headerInfo.push(binding);
}
}
arr.push(item);
}
return arr;
}
다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.
작성일 2021-09-01 12:52 조회 4,050회
댓글 0건
2 답변
