# Custom Cell Template

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



FlexGrid has an [itemFormatter](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.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/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.CellTemplate.html) to let you customize the cell content in FlexGrid control. It also lets you display custom content in the column cells using [Template](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.ColumnBase.Template.html) property.

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. It also showcases the use of template for cells in a column where the cells are colored based on their values. The example uses Sale.cs model added in the [QuickStart](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart) section.

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgridqs.png)

The following code examples demonstrate how to set the custom cell templates in a column of the FlexGrid and set different colors in FlexGrid cloumn cells based on their values.

#### In Code

**CustomCellsController.cs**

```csharp
public ActionResult CustomCells()
{
    return View(Sales.GetData(15));
}
```

**CustomCells.cshtml**

```razor
@using MVCFlexGrid.Models
@model IEnumerable<Sale>
<script id="template1" type="text/html">
    @(Html.C1().FlexChart()
        .Width(100).Height(20).CssStyle("padding", "0")
        .TemplateBind("ItemsSource", "Trends")
        .BindingX("Month")
        .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 === "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>
@(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("Country"));
        columns.Add(column => column.Binding("Product"));
        columns.Add(column => column.Binding("Amount").Template("<span class=${item.Amount > 1000 ? 'bg-info' : 'bg-danger'}>${text}</span>"));
        columns.Add(column => column.Header("Trends").CellTemplate(b => b.Template("template1")));
        columns.Add(column => column.Binding("Rank"));
    })
    .ItemFormatter("rankFormatter")
)
```

## See Also

[Quick Start](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart)

**Reference**

[FlexGridBase\<T> Class](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.html)