Visualizing data inside grid cells is a common need—for example, a grid showing sales report may need to display the monthly trend. FlexGrid makes such customisation very easy. You can insert a FlexChart inside a column's cell template and bind the FlexChart to model property. Here is such an example.

Let's walk through it.

Binding a Chart to the Model Property


Let's take the following Sales Class as model:



public class Sale
{
public int ID { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public string Country { get; set; }
public string Product { get; set; }
public string Color { get; set; }
public double Amount { get; set; }
public double Amount2 { get; set; }
public double Discount { get; set; }
public bool Active { get; set; }

public MonthData[] Trends { get; set; }
public int Rank { get; set; }

private static List<string> COUNTRIES = new List<string> { "US", "UK", "Canada", "Japan", "China", "France", "German", "Italy", "Korea", "Australia" };
private static List<string> PRODUCTS = new List<string> { "Widget", "Gadget", "Doohickey" };

/// <summary>
/// Get the data.
/// </summary>
/// <param name="total"></param>
/// <returns></returns>
public static IEnumerable<Sale> GetData(int total)
{
var colors = new[] { "Black", "White", "Red", "Green", "Blue" };
var rand = new Random(0);
var dt = DateTime.Now;
var list = Enumerable.Range(0, total).Select(i =>
{
var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)];
var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)];
var color = colors[rand.Next(0, colors.Length - 1)];
var startDate = new DateTime(dt.Year, i % 12 + 1, 25);
var endDate = new DateTime(dt.Year, i % 12 + 1, 25, i % 24, i % 60, i % 60);

return new Sale
{
ID = i + 1,
Start = startDate,
End = endDate,
Country = country,
Product = product,
Color = color,
Amount = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
Amount2 = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
Discount = Math.Round(rand.NextDouble() / 4, 2),
Active = (i % 4 == 0),
Trends = Enumerable.Range(0, 12).Select(x => new MonthData { Month = x + 1, Data = rand.Next(0, 100) }).ToArray(),
Rank = rand.Next(1, 6)
};
});
return list;
}

public static List<string> GetCountries()
{
var countries = new List<string>();
countries.AddRange(COUNTRIES);
return countries;
}

public static List<string> GetProducts()
{
List<string> products = new List<string>();
products.AddRange(PRODUCTS);
return products;
}
}

public class MonthData
{
public int Month { get; set; }
public double Data { get; set; }
}


The sales class has a "Trends" property, which has monthly sales trend.

Provide Data to Grid with the Controller Action


Now that we have Model, I would just list the Controller action which would provide data to grid:


public ActionResult CustomCells_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
{
return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(500)));
}


Configure FlexGrid to Display Data



Let's start configuring FlexGrid to display data. FlexGrid is initialized using the following tags:

Initialize the FlexGrid



<c1-flex-grid id="customCellFlexGrid" auto-generate-columns="false" is-read-only="true">
</c1-flex-grid>


The code above initializes FlexGrid in read-only mode. We're going to define the columns ourselves, so column autogeneration is set to false.

Define Columns



<c1-flex-grid id="customCellFlexGrid" auto-generate-columns="false" is-read-only="true">
<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 header="Trends">
</c1-flex-grid-column>
</c1-flex-grid>


Note that we're providing the respective bindings for each column except Trends. Trends column will include a cell template that embeds a FlexChart. This FlexChart would be bound to the Trends property in the model.

Apply Cell Template



<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 header="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>


The above code uses c1-flex-grid-cell-template tag to define the cell template. Take note that the FlexChart uses template-bindings tag to set ItemSource—in other words, the data source of the chart. The property Trends is an array of "MonthData" objects, which has two members, "Month" and "Data". The FlexChart series binds to "Data" member of the "MonthData" object to draw trends of sales for each month.

Lastly, we set the ItemSource of the FlexGrid itself using c1-item-source tag. This tag takes an action url to get data. Here's the complete code for FlexGrid.


<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 header="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 read-action-url="@Url.Action("CustomCells_Bind")"></c1-items-source>
</c1-flex-grid>


You can refer the TagHelper Explorer to view all available controls inside ComponentOne Studio ASP.NET MVC Edition. These samples also show the code. Click on the source tab to view code for TagHelpers.

TagHelpers are a work in progress. Currently we're working to support ASPNET5 Beta7, which is scheduled to be released at the end of August 2015. We'll release Beta7 supporting bits soon after it's officially released. This will support VS2015 RTM, so you'd be able to try out the TagHelpers post Beta7 release. We'll go live with MVC Edition TagHelpers when ASPNET5 goes live.

Stay tuned for more exciting stuff on TagHelpers. Please keep the feedback coming.