Populate Data to an Unbound Grid, Part I: Use Server Side CollectionView Service

In this two-part blog series, we'll walk through populating data to an unbound FlexGrid. (FlexGrid supports both unbound and bound data.)

Download ComponentOne Studio

In this example, we have a server side Sales class as our model. We wish to populate data from three columns: Product, Country and Amount. Since the FlexGrid is unbound, the data has to be populated at the client-side, so the data needs to be available there.

There are two ways to accomplish this:

In this article we will consider the easier first option: use C1CollectionView Service.

Set up the Project to Use CollectionView Service

Let's start by setting up the project.

  1. In Visual Studio, create a new project using the "C1 ASP.NET MVC 5 Web Application" template.
  2. Enable client-side TypeScript IntelliSense through the project wizard. (Using TypeScript for writing client-side code is recommended, but not necessary.)

Add Model to Project

We'll use a Sales class that returns a list of sales objects. Add the following Sales class to the Model folder.


using System;  
using System.Collections.Generic;  
using System.Linq;  
namespace UnboundFlexGrid.Models  
{   
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; }  
  }  

  public class BasicSale  
  {  
    public int Sale { get; set; }  
    public DateTime Date { get; set; }  

    public BasicSale(int sale, DateTime date)  
    {  
      Sale = sale;  
      Date = date;  
    }  
    public static List<BasicSale> GetBasicSales()  
    {  
      List<BasicSale> list = new List<BasicSale>();  
      int[] sales = {  
      96, 19, 54, 83, 15, 56, 36, 4, 29, 93,  
      38, 71, 50, 77, 69, 13, 79, 57, 29, 62,  
      4, 27, 66, 96, 65, 12, 52, 3, 61, 48, 50,  
      70, 39, 33, 25, 49, 69, 46, 44, 40, 35,  
      72, 64, 10, 66, 63, 78, 19, 96, 26};  
      for (int i = 0; i < sales.Length; i++)  
      {  
        list.Add(new BasicSale(sales[i], new DateTime(2014, i / 31 + 1, i % 31 + 1)));  
      }  
      return list;  
    }  
  }  
}

Controller

Open the HomeController.CS and update the the Index action to return the Sales data.


 public class HomeController : Controller  
  {  
    public ActionResult Index()  
    {  
      return View(Sale.GetData(10));     
    }  
  }

View

  1. Open the Index.cshtml file under Views > Home folder.
  2. Delete all content
  3. Configure the CollectionViewService and FlexGrid by declaring out-of-box properties as below:

 @using UnboundFlexGrid.Models  
 <script src="~/Scripts/app.js"></script>  
 @model IEnumerable<Sale>  

 @(Html.C1().CollectionViewService().Id("cv").Bind(Model))  

 @* Loads from a List collection *@  
 <input type="button" onclick="populate()" value="CollectionView Load" />  

 @(Html.C1().FlexGrid().Id("fg").Height(400).AutoGenerateColumns(false).AllowAddNew(false)  
 .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)  
 .Columns( col => {  
 col.Add(cb => cb.Name("Product").Header("Product"));  
 col.Add(cb => cb.Name("Country").Header("Country"));  
 col.Add(cb => cb.Name("Amount").Header("Amount"));  

 }))

Populating FlexGrid with Data

Open the App.ts file added to the project by the C1 Project template wizard, and add the following script to populate data to FlexGrid.


  function populate() {  
  var fg = <wijmo.grid.FlexGrid>wijmo.Control.getControl("#fg"); //gets the FlexGrid reference  
  var cv = <wijmo.collections.CollectionView>c1.getService('cv'); //gets the collectionView service reference  
  var total = cv.items.length;  
  fg.rows.clear();  
  for (var i = 0; i <= total - 1; i++) {  
  var obj = [cv.items[i].Product, cv.items[i].Country, cv.items[i].Amount];  
  var row = new wijmo.grid.Row();  
  fg.rows.push(row);  
  for (var c = 0; c <= fg.columns.length - 1; c++) {  
  fg.setCellData(i, c, obj[c]);  
  }  
  }  
  }

Here are the steps in this script:

  1. Take a reference of the server-side CollectionView service. (Note that the CollectionView has our model data.)
  2. Get the client-side reference of FlexGrid.
  3. Loop through the number of items in the collection to ascertain the number of rows to be added to FlexGrid.
  4. Extract the values of required three columns in an array from the collectionView
  5. Use setCellData method of FlexGrid to add data to FlexGrid cell.
  6. Add a reference of above app.ts file to the _Layout.cshtml or Index.cshtml file.
  7. Run the application and click on "CollectionView Load" button to populate the FlexGrid.

That's how to populate unbound data to a FlexGrid using the server-side CollectionView service.

Next, we'll look at using AJAX.

MESCIUS inc.

comments powered by Disqus