# Custom Cell Template

## Content



FlexGrid has an [itemFormatter](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.FlexGridBase-1.ItemFormatter.html) property that gives you complete control over the contents of the cells. MVC Edition provides [CellTemplate](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.CellTemplate.html) to let users customize the cell content in FlexGrid control. To define a cell template for a column, add the HTML to display in each cell to the column definition.

The following image shows how the FlexGrid appears on setting **FlexChart** as a cell template to represent Trends, and **Stars** as another template for representing Rank. The example uses Sale.cs model added in the [QuickStart](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/FlexGrid/FlexGridQuickStart) section.

![](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/flexgridqs.png)

The following code examples demonstrate how to set the custom cell templates in a column of the FlexGrid:

**CustomCellsController.cs**

```csharp
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="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" template="<span class=${item.Amount > 1000 ? 'bg-info' : 'bg-danger'}>${text}</span>">
</c1-flex-grid-column>
    <c1-flex-grid-column binding="Trends">
        <c1-flex-grid-cell-template>
            <c1-flex-chart width="100px" height="20px" style="padding:0px"
                           binding-x="Month" template-bindings="@(new {ItemsSource="Trends"})">
                <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>
```