作成日: 2019/08/07 最終更新日: 2019/08/07
文書種別
使用方法
詳細
セルの背景色などのスタイルを変更するには、ItemFormatterプロパティでイベントを実装してスタイル設定を行います。
また、OnClientCellEditEndingプロパティとOnClientCellEditEndedプロパティで実装したそれぞれのイベントを使用して該当セルの値を比較し、値が異なる場合にそのセル情報を配列などに格納することで、編集済みのセル情報の取得が可能です。
更にItemFormatterの処理において、その配列の値を元に該当セルのスタイルを設定することで、編集済みのセルのスタイルが変更できます。
◎サンプルコード(View)
また、OnClientCellEditEndingプロパティとOnClientCellEditEndedプロパティで実装したそれぞれのイベントを使用して該当セルの値を比較し、値が異なる場合にそのセル情報を配列などに格納することで、編集済みのセル情報の取得が可能です。
更にItemFormatterの処理において、その配列の値を元に該当セルのスタイルを設定することで、編集済みのセルのスタイルが変更できます。
◎サンプルコード(View)
<script>
var editData;
var cellRanges = [];
function itemFormatter(panel, r, c, cell) {
if (panel.cellType == wijmo.grid.CellType.Cell) {
cell.style.backgroundColor = '';
cell.style.color = '';
for (i = 0; i < cellRanges.length; i++) {
if (cellRanges[i].contains(r, c)) {
cell.style.backgroundColor = 'blue';
cell.style.color = 'white';
}
}
}
}
function cellEditEnding (s, e) {
editData = s.getCellData(e.row, e.col);
}
function cellEditEnded (s, e) {
if (editData != s.getCellData(e.row, e.col)) {
cellRanges.push(new wijmo.grid.CellRange(e.row, e.col));
}
}
</script>
@(Html.C1().FlexGrid()
・・・
.ItemFormatter("itemFormatter")
.OnClientCellEditEnding("cellEditEnding")
.OnClientCellEditEnded("cellEditEnded")
)
var editData;
var cellRanges = [];
function itemFormatter(panel, r, c, cell) {
if (panel.cellType == wijmo.grid.CellType.Cell) {
cell.style.backgroundColor = '';
cell.style.color = '';
for (i = 0; i < cellRanges.length; i++) {
if (cellRanges[i].contains(r, c)) {
cell.style.backgroundColor = 'blue';
cell.style.color = 'white';
}
}
}
}
function cellEditEnding (s, e) {
editData = s.getCellData(e.row, e.col);
}
function cellEditEnded (s, e) {
if (editData != s.getCellData(e.row, e.col)) {
cellRanges.push(new wijmo.grid.CellRange(e.row, e.col));
}
}
</script>
@(Html.C1().FlexGrid()
・・・
.ItemFormatter("itemFormatter")
.OnClientCellEditEnding("cellEditEnding")
.OnClientCellEditEnded("cellEditEnded")
)
関連情報
旧文書番号
84359