カスタムセルテンプレート

FlexGrid には、セルのコンテンツを完全に制御できる itemFormatter プロパティがあります。AngularJS ディレクティブは、インラインセルテンプレートをサポートします。これにより、プレーン HTML を使用してセルの外観を定義できます。列にセルテンプレートを定義するには、各セルに表示する HTML を列定義に追加します。

次の図は、トレンドを表すためのセルテンプレートとして FlexChart を設定し、ランクを表すためのテンプレートとして Stars を設定した FlexGrid を示しています。この例では、「クイックスタート」セクションで追加した Sale.cs モデルを使用します。

次のコード例は、FlexGrid の列の1つにカスタムセルテンプレートを設定する方法を示します。

コードの場合

CustomCellTemplateController.cs

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

CustomCellTemplate.cshtml

Razor	コードのコピー
@using MVCFlexGrid_JP.Models @model IEnumerable<Sale> <script id="template1" type="text/html"> @(Html.C1().FlexChart() .Width(100).Height(20).CssStyle("padding", "0") .TemplateBind("ItemsSource", "傾向") .BindingX("月") .Series(s => s.Add().Binding("Data")) .AxisX(C1.Web.Mvc.Chart.Position.None) .AxisY(C1.Web.Mvc.Chart.Position.None) .ToTemplate() ) </script> <style> .star-highlighted { color: orange; } .star-dimmed { color: lightgray; } </style> <script type="text/javascript"> function rankFormatter(panel, r, c, cell) { if (panel.columns[c].binding === "ランク") { cell.style.textAlign = ""; if (panel.cellType === wijmo.grid.CellType.Cell) { cell.innerHTML = buildRank(panel.getCellData(r, c)); } } } function buildRank(rank) { var markup = "", j, starType; for (j = 0; j < 5; j++) { starType = j < rank ? "star star-highlighted" : "star star-dimmed"; markup += "<span class='" + starType + "'>\u2605</span>"; } return markup; } </script> @(Html.C1().FlexGrid<Sale>() .AutoGenerateColumns(false) .IsReadOnly(true) .Bind(Model) .CssClass("grid") .Columns(columns => { columns.Add(column => column.Binding("ID")); columns.Add(column => column.Binding("国名")); columns.Add(column => column.Binding("製品名")); columns.Add(column => column.Header("傾向").CellTemplate(b => b.Template("template1"))); columns.Add(column => column.Binding("ランク")); }) .ItemFormatter("rankFormatter") )

Razor

コードのコピー

@using MVCFlexGrid_JP.Models
@model IEnumerable<Sale>

<script id="template1" type="text/html">
    @(Html.C1().FlexChart()
        .Width(100).Height(20).CssStyle("padding", "0")
        .TemplateBind("ItemsSource", "傾向")
        .BindingX("月")
        .Series(s => s.Add().Binding("Data"))
        .AxisX(C1.Web.Mvc.Chart.Position.None)
        .AxisY(C1.Web.Mvc.Chart.Position.None)
        .ToTemplate()
    )
</script>

<style>
    .star-highlighted {
        color: orange;
    }

    .star-dimmed {
        color: lightgray;
    }
</style>

<script type="text/javascript">
    function rankFormatter(panel, r, c, cell) {
        if (panel.columns[c].binding === "ランク") {
            cell.style.textAlign = "";
            if (panel.cellType === wijmo.grid.CellType.Cell) {
                cell.innerHTML = buildRank(panel.getCellData(r, c));
            }
        }
    }

    function buildRank(rank) {
        var markup = "", j, starType;
        for (j = 0; j < 5; j++) {
            starType = j < rank ? "star star-highlighted" : "star star-dimmed";
            markup += "<span class='" + starType + "'>\u2605</span>";
        }
        return markup;
    }
</script>

@(Html.C1().FlexGrid<Sale>()
    .AutoGenerateColumns(false)
    .IsReadOnly(true)
    .Bind(Model)
    .CssClass("grid")
    .Columns(columns =>
    {
        columns.Add(column => column.Binding("ID"));
        columns.Add(column => column.Binding("国名"));
        columns.Add(column => column.Binding("製品名"));
        columns.Add(column => column.Header("傾向").CellTemplate(b => b.Template("template1")));
        columns.Add(column => column.Binding("ランク"));
    })
    .ItemFormatter("rankFormatter")
)