Menuコントロールは、FlexGrid、ListBoxなどの他のMVCコントロールと一緒にコンテキストメニューとして使用できます。ユーザーがコントロール内で右クリックすると、ユーザーによって追加されたカスタムフィールドを含むコンテキストメニューとしてMenuが表示されます。さまざまな項目をMenuに追加することで、FlexGridのフィルタ処理、ソート、グループ化などの各種操作ができます。Menuコントロールと他のMVCコントロールとのシームレスな統合により、ユーザーは項目を追加し、コントロールのIDをMenuのOwnerプロパティに割り当てて、コントロールのコンテキストメニューをカスタマイズできます。
この例では、MenuはFlexGridコントロールのグループ化を有効にするコンテキストメニューとして使用されます。GroupBy: CountryとGroupBy: Productという2つのフィールドがMenuに追加されることで、FlexGridのデータがCountry列とProduct列でグループ化されます。ユーザーは、グリッド内で右クリックしてコンテキストメニューから項目を選択できます。
次の図は、Menuコントロールをコンテキストメニューとして追加した後のFlexGridを示しています。
次のコード例は、メニューコントロールをFlexGridでContext Menuとして使用する方法を示します。
コードの場合
ContextMenuController.cs
| Razor |
コードのコピー
|
|---|---|
public ActionResult Index()
{
return View(Sale.GetData(10));
}
}
|
|
ContextMenu.cshtml
| HTML |
コードのコピー
|
|---|---|
@using TagHelperExplorer.Models
@using C1.Web.Mvc.Grid
@{
List<string> group = new List<string> {
"国名","製品名"
};
}
@model IEnumerable<Sale>
<style>
.flexGrid {
margin: 10px;
padding: 20px;
color: white;
display: inline-block;
}
</style>
<script>
//CollectionViewを使用するグリッドのソート関数
function setGrouping(arg) {
var grid = wijmo.Control.getControl("#Sales");
var cv = grid.collectionView;
var gd = cv.groupDescriptions;
gd.push(new wijmo.collections.PropertyGroupDescription(arg));
}
</script>
<div >
<c1-flex-grid auto-generate-columns="false" id="Sales" height="450" width="700" allow-add-new="true"
selection-mode="SelectionMode.Cell" class="grid" >
</c1-flex-grid>
// FlexGridで列が表示されるように定義します
<c1-flex-grid-column binding="ID">
</c1-flex-grid-column>
<c1-flex-grid-column binding="開始日" format="MMM d yy">
</c1-flex-grid-column>
<c1-flex-grid-column binding="製品名">
</c1-flex-grid-column>
<c1-flex-grid-column binding="金額" format="c">
</c1-flex-grid-column>
<c1-flex-grid-column binding="割引" format="p0">
</c1-flex-grid-column>
<c1-flex-grid-column binding="アクティブ">
</c1-flex-grid-column>
</div>
//C1Menuコントロールを初期化します
<c1-menu header="グループで表示" execute-command="setGrouping" style="display: none" id="ctxMenu" owner="#Sales">
<c1-menu-item header="グループで表示: 国名" command-parameter="group[0]">
</c1-menu-item>
<c1-menu-item header="グループで表示: 製品名" command-parameter="group[1]">
</c1-menu-item>
</c1-menu>
|
|