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

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

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

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

コードの場合

UnboundcolumnController.cs

    public ActionResult Index()
    {
        return View(Sale.GetData(15));
    }
}

Unboundcolumn.cshtml

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

@using <ApplicationName>.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>

@using MVCFlexGrid_JP.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>

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

<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 コントロールを初期化します。

<h2>売り上げのレポート</h2>
<c1-flex-grid id="Sales" auto-generate-columns="false" allow-resizing="@AllowResizing.None" item-formatter="itemFormatter"
group-by="国名">
    <c1-flex-grid-column binding="ID" width="*" />
    <c1-flex-grid-column binding="国名" width="2*" />
    <c1-flex-grid-column binding="製品名" width="2*" />
    <c1-flex-grid-column binding="価格" width="*" format="c" align="center" aggregate="@Aggregate.Sum" />
    <c1-flex-grid-column header="対象値" name="TargetValue" width="2*" />
    <c1-items-source source-collection="Model" />
</c1-flex-grid>