안녕하세요 메시어스입니다.
문의하신 내용에 대해 답변드립니다.
1. 셀 수정 시 해당 row의 체크박스를 체크하는 방법
=> FlexGrid의 셀 편집이 커밋되거나 취소되었을 때 발생하는 cellEditEnded 이벤트에서 row의 dataItem 속성에 접근 및 체크박스 값을 설정하시면 됩니다.
아래 코드를 참고해주시기 바랍니다.
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
itemsSource:view,
cellEditEnded:function(s,e){
// 체크박스 열의 값 설정
s.rows[e.row].dataItem.active = true;
},
(....)
2. sourceCollection에 행 추가 시 해당 행의 배경색 설정 방법
=> FlexGrid의 그리드 행이 데이터소스의 항목에 바인딩된 후 발생하는 loadedRows 이벤트 내에서 새로 추가된 행의 클래스를 지정하는 cssClass 속성을 통해 클래스 지정 및 배경색을 설정하시면 됩니다.
js
var view = new wijmo.collections.CollectionView(getData());
// 기본 그리드
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
itemsSource:view,
loadedRows: function (s, e) {
for (var i = 0; i < s.rows.length; i++) {
var row = s.rows[i];
var item = row.dataItem;
if (item.isNewItem) {
row.cssClass = 'added-row'; // 행에 클래스 추가
} else{
break; // 기존 행이면 반복문 break
}
}
},
});
document.getElementById("btn").addEventListener("click",function(){
view.sourceCollection.splice(0,0,{isNewItem:true}); //추가된 행인지 확인할 키 추가
theGrid.collectionView.refresh(); // 삽입된 값 그리드에 반영
})css
.added-row{
background:red !important;
}
3. 특정 행 선택 후, 버튼 클릭시 배경색 설정 방법
=> 현재 선택한 행 정보를 가져올 수 있는 selectedRows를 이용하여 선택된 행 객체 접근 및 cssClass를 설정하여 구현할 수 있습니다.
js
document.getElementById("addRowColorBtn").addEventListener("click",function(){
theGrid.selectedRows[0].cssClass = "added-row"
})
css
.added-row{
background:red !important;
}
- cellEditEnded API 문서
- loadedRows API 문서
- selectedRows API 문서
관련 API 문서를 공유드리며 다른 궁금한 점이 생기면 문의주시기 바랍니다.
감사합니다.
메시어스 드림
작성일 2024-01-26 17:35 조회 60회
댓글 0건
1 답변
