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

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

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

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

コードの場合

CustomCellsController.cs

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

CustomCells.cshtml

HTML	コードのコピー
@using TagFlexGrid.Models @using C1.Web.Mvc.Grid @using C1.Web.Mvc.Fluent @model IEnumerable<Sale> <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 === "Rank") { 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> <c1-flex-grid id="customCellFlexGrid" auto-generate-columns="false" is-read-only="true" class="grid" item-formatter="rankFormatter"> <c1-flex-grid-column binding="ID"></c1-flex-grid-column> <c1-flex-grid-column binding="国名"></c1-flex-grid-column> <c1-flex-grid-column binding="製品名"></c1-flex-grid-column> <c1-flex-grid-column binding="金額" template="<span class=${item.Amount > 1000 ? 'bg-info' : 'bg-danger'}>${text}</span>"> </c1-flex-grid-column> <c1-flex-grid-column binding="傾向"> <c1-flex-grid-cell-template> <c1-flex-chart width="100px" height="20px" style="padding:0px" binding-x="Month" template-bindings="@(new{ItemsSource="傾向"})"> <c1-flex-chart-axis c1-property="AxisX" position="@C1.Web.Mvc.Chart.Position.None"></c1-flex-chart-axis> <c1-flex-chart-axis c1-property="AxisY" position="@C1.Web.Mvc.Chart.Position.None"></c1-flex-chart-axis> <c1-flex-chart-series binding="Data"></c1-flex-chart-series> </c1-flex-chart> </c1-flex-grid-cell-template> </c1-flex-grid-column> <c1-flex-grid-column binding="Rank"></c1-flex-grid-column> <c1-items-source source-collection="@Model"></c1-items-source> </c1-flex-grid>

HTML

コードのコピー

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

<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 === "Rank") {
            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>
<c1-flex-grid id="customCellFlexGrid" auto-generate-columns="false" is-read-only="true"
class="grid" item-formatter="rankFormatter">
    <c1-flex-grid-column binding="ID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="国名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="製品名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="金額" template="<span class=${item.Amount > 1000 ? 'bg-info' : 'bg-danger'}>${text}</span>">
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="傾向">
        <c1-flex-grid-cell-template>
            <c1-flex-chart width="100px" height="20px" style="padding:0px"
binding-x="Month" template-bindings="@(new{ItemsSource="傾向"})">
                <c1-flex-chart-axis c1-property="AxisX" position="@C1.Web.Mvc.Chart.Position.None"></c1-flex-chart-axis>
                <c1-flex-chart-axis c1-property="AxisY" position="@C1.Web.Mvc.Chart.Position.None"></c1-flex-chart-axis>
                <c1-flex-chart-series binding="Data"></c1-flex-chart-series>
            </c1-flex-chart>
        </c1-flex-grid-cell-template>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="Rank"></c1-flex-grid-column>
    <c1-items-source source-collection="@Model"></c1-items-source>
</c1-flex-grid>