作成日: 2019/10/21 最終更新日: 2019/10/21
文書種別
使用方法
詳細
非表示のMenuコントロールを使用し、スクリプトでFlexGridにcontextmenuイベントを実装してMenuコントロールのshowメソッドを実行することにより、コンテキストメニューの表示が可能です。
下記の例では「Add」「Delete」というコンテキストメニューを表示し、グリッドの行追加と行削除を実現しています。
◎サンプルコード(View)
下記の例では「Add」「Delete」というコンテキストメニューを表示し、グリッドの行追加と行削除を実現しています。
◎サンプルコード(View)
<script>
var grid, menu,ht;
c1.documentReady(function () {
grid = wijmo.Control.getControl("#grid");
console.log(grid)
menu = wijmo.Control.getControl("#ctxMenu");
grid.hostElement.addEventListener("contextmenu", function (e) {
ht = grid.hitTest(e);
if (ht.panel.cellType == 1) {
e.preventDefault();
menu.show(e);
}
}, true)
})
function itemClicked(s, e) {
switch (s.text) {
case 'Add':
grid.rows.splice(ht.row+1, 0, new wijmo.grid.Row());
break;
case 'Delete':
grid.rows.splice(ht.row,1);
break;
default:
return;
}
}
</script>
@(Html.C1().FlexGrid()
.Id("grid")
・・・
)
@(Html.C1().Menu().Id("ctxMenu")
.CssStyle("display", "none")
.MenuItems(items => items
.Add(item => item.Header("Add"))
.Add(item => item.Header("Delete"))
)
.OnClientItemClicked("itemClicked")
)
var grid, menu,ht;
c1.documentReady(function () {
grid = wijmo.Control.getControl("#grid");
console.log(grid)
menu = wijmo.Control.getControl("#ctxMenu");
grid.hostElement.addEventListener("contextmenu", function (e) {
ht = grid.hitTest(e);
if (ht.panel.cellType == 1) {
e.preventDefault();
menu.show(e);
}
}, true)
})
function itemClicked(s, e) {
switch (s.text) {
case 'Add':
grid.rows.splice(ht.row+1, 0, new wijmo.grid.Row());
break;
case 'Delete':
grid.rows.splice(ht.row,1);
break;
default:
return;
}
}
</script>
@(Html.C1().FlexGrid()
.Id("grid")
・・・
)
@(Html.C1().Menu().Id("ctxMenu")
.CssStyle("display", "none")
.MenuItems(items => items
.Add(item => item.Header("Add"))
.Add(item => item.Header("Delete"))
)
.OnClientItemClicked("itemClicked")
)
旧文書番号
84574