非連結列

FlexGridコントロールでは、特定の列のみを連結することができます。グリッドでは連結列および非連結列の両方が含まれるように、コントロールがカスタマイズできます。連結列ではデータソースから取得されているデータが表示でき、非連結列ではカスタムデータが表示できます。このカスタマ化を実現するためには、itemFormatter関数を使用します。

以下の例では、データソースとの連結列のセル値を使用して、非連結列のセルに表示する値の計算方法を示します。以下のコード例では、itemFormatter関数を使用してFlexGrid のセルをカスタマイズするために、リッチなクライアント側アセンブリを使用します。　

次の図は、非連結列「対象値」を含む FlexGrid を示していますが、列値は「価格」列の値を100で割られて計算されています。

次のコード例は、FlexGrid コントロールに非連結列を追加して、計算された値を列のセルに割り当てる方法を示します。この例では、「クイックスタート」でアプリケーションに追加した Sale.cs モデルを使用します。

コードの場合

UnboundcolumnController.cs

C#	コードのコピー
public ActionResult Index() { return View(Sale.GetData(15)); } }

Unboundcolumn.cshtml

以下のように、MVCへの参照を追加します。

C#	コードのコピー
@using MVCFlexGrid_JP.Models @using C1.Web.Mvc.Grid @model IEnumerable<Sale>

非連結列のセルをカスタマイズするためにitemFormatter関数用のクライアントスクリプトを追加します。

JavaScript	コードのコピー
<script> function itemFormatter(panel, r, c, cell) { var flex = panel.grid; var col = panel.columns[c]; //計算された値を表示している列を非連結します。 if (col.name == "TargetValue") { var calculatedData = parseFloat(flex.getCellData(r, 3, false) / 100); flex.setCellData(r, col.index, calculatedData, true); } //計算した値を表示する非連結列 } </script>

JavaScript

コードのコピー

<script>
    function itemFormatter(panel, r, c, cell) {
        var flex = panel.grid;
        var col = panel.columns[c];
        //計算された値を表示している列を非連結します。
        if (col.name == "TargetValue") {
            var calculatedData = parseFloat(flex.getCellData(r, 3, false) / 100);
            flex.setCellData(r, col.index, calculatedData, true);
        } //計算した値を表示する非連結列
    }
</script>

次に、以下のコードを追加して FlexGrid コントロールを初期化します。

Razor	コードのコピー
@(Html.C1().FlexGrid<Sale>().Id("Sales") .AutoGenerateColumns(false) .Bind(Model) .AllowResizing(AllowResizing.None) .ItemFormatter("itemFormatter") .GroupBy("国名") .Columns(columns => { columns.Add(column => column.Binding("ID")); columns.Add(column => column.Binding("国名")); columns.Add(column => column.Binding("製品名")); columns.Add(column => column.Binding("金額").Format("c").Width("*").Align("center").Aggregate(Aggregate.Sum)); columns.Add(column => column.Header("対象値").Name("TargetValue")); }))

Razor

コードのコピー

@(Html.C1().FlexGrid<Sale>().Id("Sales")
.AutoGenerateColumns(false)
.Bind(Model)
.AllowResizing(AllowResizing.None)
.ItemFormatter("itemFormatter")
.GroupBy("国名")
.Columns(columns =>
    {
        columns.Add(column => column.Binding("ID"));
        columns.Add(column => column.Binding("国名"));
        columns.Add(column => column.Binding("製品名"));
        columns.Add(column => column.Binding("金額").Format("c").Width("*").Align("center").Aggregate(Aggregate.Sum));
        columns.Add(column => column.Header("対象値").Name("TargetValue"));
    }))