作成日: 2018/11/27 最終更新日: 2018/11/27
文書種別
使用方法
詳細
標準のmouseoverイベントとmouseoutイベントを使用して下記のようなコードを実装することにより、FlexGridのヘッダにツールチップを表示できます。
こちらは、FlexGridのクライアント側のhitTestメソッドにてヘッダ位置を判別し、Wijmo.Tooltipクラスの機能を利用してツールチップを表示します。
◎サンプルコード(View)
こちらは、FlexGridのクライアント側のhitTestメソッドにてヘッダ位置を判別し、Wijmo.Tooltipクラスの機能を利用してツールチップを表示します。
◎サンプルコード(View)
<script>
onload = function () {
var grid = wijmo.Control.getControl("#grid");
var toolTip = new wijmo.Tooltip();
if (grid) {
grid.hostElement.addEventListener("mouseover", function (e) {
let ht = grid.hitTest(e),
rng = null;
if (!ht.range.equals(rng)) {
if (ht.cellType == wijmo.grid.CellType.ColumnHeader) {
rng = ht.range;
let data = grid.columnHeaders.getCellData(rng.row, rng.col, true),
tipContent = '<b>Column</b> : '+data,
cellElement = document.elementFromPoint(e.clientX, e.clientY),
cellBounds = wijmo.Rect.fromBoundingRect(cellElement.getBoundingClientRect());
toolTip.show(grid.hostElement, tipContent, cellBounds);
}
}
});
grid.hostElement.addEventListener("mouseout", function (e) {
})
}
}
</script>
@(Html.C1().FlexGrid()
.Id("grid")
・・・
)
onload = function () {
var grid = wijmo.Control.getControl("#grid");
var toolTip = new wijmo.Tooltip();
if (grid) {
grid.hostElement.addEventListener("mouseover", function (e) {
let ht = grid.hitTest(e),
rng = null;
if (!ht.range.equals(rng)) {
if (ht.cellType == wijmo.grid.CellType.ColumnHeader) {
rng = ht.range;
let data = grid.columnHeaders.getCellData(rng.row, rng.col, true),
tipContent = '<b>Column</b> : '+data,
cellElement = document.elementFromPoint(e.clientX, e.clientY),
cellBounds = wijmo.Rect.fromBoundingRect(cellElement.getBoundingClientRect());
toolTip.show(grid.hostElement, tipContent, cellBounds);
}
}
});
grid.hostElement.addEventListener("mouseout", function (e) {
})
}
}
</script>
@(Html.C1().FlexGrid()
.Id("grid")
・・・
)
旧文書番号
83421