ナレッジベース

[FlexGrid for ASP.NET MVC] Input 型／ComboBox型／FlexChart型の列を表示する方法

作成日: 2016/07/08 最終更新日: 2016/07/08

文書種別

使用方法

詳細

列のCellTemplateプロパティを定義してテンプレートを指定することにより、セルを各コントロール型で表示できます。
指定するテンプレートのIDには、編集可能なInput 型やComboBox型の場合はEditTemplateId、FlexChart型の場合はTemplateIdを使用します。

◎サンプルコード（View）

<script id="edtAmount" type="text/template">
　　@(Html.C1().InputNumber()
　　　　.Id("incomeEditor")
　　　　.Step(10)
　　　　.Min(100)
　　　　.Max(10000)
　　　　.TemplateBind("Value", "Income")
　　　　.ToTemplate()
　　)
</script>

<script id="edtCountry" type="text/template">
　　@(Html.C1().ComboBox()
　　　　.Id("countryEditor")
　　　　.IsEditable(true)
　　　　.Height(30)
　　　　.Bind(countries)
　　　　.TemplateBind("Text", "Country")
　　　　.ToTemplate()
　　)
</script>

　　@(Html.C1().FlexGrid()
　　　　.Id("flexGrid")
　　　　.AutoGenerateColumns(false)
　　　　.AllowSorting(true)
　　　　.IsReadOnly(false)
　　　　.Height(400)　　　　　　　　
　　　　.Bind(ib => ib.DisableServerRead(true).Bind(Url.Action("IndexBind")).BatchEdit(Url.Action("GridBatchEdit")))
　　　　.CssClass("grid")
　　　　.SelectionMode(SelectionMode.Row)
　　　　.Columns(columns => 　　　　{
　　　　　　columns.Add(column => column.Binding("CustomerID").IsReadOnly(true));
　　　　　　columns.Add(column => column.Binding("CompanyName"));
　　　　　　columns.Add(column => column.Binding("ContactName"));
　　　　　　columns.Add(column => column.Binding("Country").Width("150").CellTemplate(ctb => ctb.EditTemplateId("edtCountry")));
　　　　　　columns.Add(column => column.Binding("Income").Width("150").CellTemplate(ctb => ctb.EditTemplateId("edtAmount")));
　　　　})
　　　　.AllowDelete(true)
　　)

FlexChart型の列を表示する方法は、下記のオンラインデモでご紹介しております。

FlexGrid - カスタムセル

旧文書番号

81731