Data Binding

Data binding is the process of connecting the FlexGrid to a data source so you can use it to see and edit collection of items.

Unbound Grids

Although generally grids are used in bound mode, FlexGrid can also be used as an unbound control. You can add rows and columns to a grid and use the setCellData and getCellData methods to get or set the data in each cell:

col 0

col 1

col 2

This grid is unbound...

Auto-Generating Columns

To use FlexGrid in bound mode, set its itemsSource property to an array or CollectionView containing the data. The grid will automatically create columns for each property in the data items:

Country

Sales

Expenses

911.75

4,217.69

Germany

1,468.27

111.45

9,161.59

162.42

Japan

758.19

3,451.78

Italy

6,531.28

3,253.53

Greece

3,629.51

3,432.89

Defining Columns in Code

Automatically generating columns is convenient in some scenarios, but in most common cases it is required to explicitly tell the grid which columns to show and how to format them. You can do this by setting the autoGenerateColumns property to false and populating the grid's columns collection:

Country

Sales

Expenses

912

4,218

Germany

1,468

111

9,162

162

Japan

758

3,452

Italy

6,531

3,254

Greece

3,630

3,433

// This file locates: "Scripts/Lesson/C1FlexGrid/DataBinding.js".
c1.documentReady(function () {
    // the unbound grid with five rows and three columns
    var unboundGrid = wijmo.Control.getControl('#unboundGrid');
    for (var r = 0; r < 5; r++) {
        unboundGrid.rows.push(new wijmo.grid.Row());
    }
    for (var c = 0; c < 3; c++) {
        unboundGrid.columns.push(new wijmo.grid.Column({
            header: 'col ' + c
        }));
    }
    unboundGrid.setCellData(0, 0, 'This grid is unbound...');
 
    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    var data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            id: i,
            country: countries[i],
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
 
    // automatically generated columns
    var autoBoundGrid = wijmo.Control.getControl('#autoBoundGrid');
    autoBoundGrid.itemsSource = data;
 
    // explicit columns
    var boundGrid = wijmo.Control.getControl('#boundGrid');
    boundGrid.autoGenerateColumns = false;
    boundGrid.columns.push(new wijmo.grid.Column({ binding: 'country', header: 'Country', width: '2*' }));
    boundGrid.columns.push(new wijmo.grid.Column({ binding: 'sales', header: 'Sales', width: '*', format: 'n0' }));
    boundGrid.columns.push(new wijmo.grid.Column({ binding: 'expenses', header: 'Expenses', width: '*', format: 'n0' }));
    boundGrid.itemsSource = data;
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: DataBinding
        public ActionResult DataBinding()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1FlexGrid.DataBinding_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.DataBinding_Text1)
</p>
 
<h3>
    @Html.Raw(Resources.C1FlexGrid.DataBinding_Title1)
</h3>
<p>
    @Html.Raw(Resources.C1FlexGrid.DataBinding_Text2)
</p>
@Html.C1().FlexGrid().Id("unboundGrid")
 
<h3>
    @Html.Raw(Resources.C1FlexGrid.DataBinding_Title2)
</h3>
<p>
    @Html.Raw(Resources.C1FlexGrid.DataBinding_Text3)
</p>
@Html.C1().FlexGrid().Id("autoBoundGrid")
 
<h3>
    @Html.Raw(Resources.C1FlexGrid.DataBinding_Title3)
</h3>
<p>
    @Html.Raw(Resources.C1FlexGrid.DataBinding_Text4)
</p>
@Html.C1().FlexGrid().Id("boundGrid")