안녕하세요 그레이프시티입니다.
문의 주신 내용에 대해 다음과 같이 답변 드립니다.
1. 그리드를 둘로 나누어 좌우에 분할 표시하는 방법
그리드에 바인딩 할 데이터를 재 형성 한 후, 해당 데이터를 그리드의 itemsSource 속성에 지정하고 columns 속성을 이용하여 항목에 따라 각 열에 데이터를 바인딩 해 분할 표시 할 수 있습니다.
이때 slice 메서드 통해 데이터를 반으로 나눈 뒤, 나머지 반의 데이터를 새로운 항목의 이름으로 추가하는 방법을 이용하여 데이터를 재 형성하시면 됩니다.
데이터를 재 형성하는 코드의 경우 아래의 코드를 참고해 보시기 바랍니다.
샘플의 4~11번 라인에서 해당 코드를 확인해 보실 수 있습니다.
let data = getData();
let data1 = data.slice(0,Math.ceil(data.length/2));
data1.forEach((item,index) => {
item.id2 = data[Math.floor(data.length/2) + index].id;
item.country2 = data[Math.floor(data.length/2) + index].country;
item.active2 = data[Math.floor(data.length/2) + index].active;
})
2. 특정 열의 셀의 선택을 방지하는 방법
특정 열의 셀이 선택 되었을 때 select 메서드를 사용해 다른 열의 셀을 선택하는 코드를 그리드의 selectionChanged 이벤트에 작성하여 특정 열에 존재하는 셀의 선택을 막을 수 있습니다.
아래의 코드를 참고해 보시기 바랍니다.
샘플의 27~41번 라인에서 해당 코드를 확인해 보실 수 있습니다.
selectionChanged : function(s,e){
for (var i = 0; i < s.rows.length; i++) {
// 현재 선택한 Item이 그리드에 존재하는 Item인지 확인합니다.
if (s.selectedItems[0] == s.rows[i].dataItem) {
// 첫번째 두번째 열이 선택되었을 때
if(e.col<2){
s.select(e.row,2,false);
}
// 네번째 다섯번째 열이 선택되었을 때
else if(e.col>2&&e.col<5){
s.select(e.row,5,false);
}
}
}
}
자세한 코드는 아래의 샘플을 참고해 보시기 바랍니다.
- itemsSource API 문서
- columns API 문서
- selectionChanged API 문서
- select API 문서
API 문서를 공유드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
작성일 2022-11-09 14:07 조회 729회
댓글 0건
1 답변
