How to Insert a Chart into a Grid Cell With TagHelpers and FlexGrid

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.

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 COUNTRIES = new List { "US", "UK", "Canada", "Japan", "China", "France", "German", "Italy", "Korea", "Australia" };  
        private static List PRODUCTS = new List { "Widget", "Gadget", "Doohickey" };  

        /// Get the data.  
        public static IEnumerable 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 GetCountries()  
            var countries = new List();  
            return countries;  

        public static List GetProducts()  
            List products = new List();  
            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 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

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

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

              class="grid" item-formatter="rankFormatter">   

                                       binding-x="Month" template-bindings="@(new {ItemsSource="Trends"})">   

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.

              class="grid" item-formatter="rankFormatter">  

                                       binding-x="Month" template-bindings="@(new {ItemsSource="Trends"})">  

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.


GrapeCity Developer Tools
comments powered by Disqus