Deep Binding

Each grid column has a binding property that determines which property of the data item should be displayed in the cell. In most of the cases, this property is a regular identifier such as 'name' or 'value'.

But the grid also supports 'deep-binding', where the binding string contains a binding path composed of identifiers separated by periods. The syntax is similar to what you would use in regular JavaScript expressions.

For example, if the data objects in the itemsSource array have a 'customer' property that contains a reference to a 'Customer' object, you could use a 'customer.name' binding to show the customer's name on the grid:

Country

First

Last

Downloads (k)

Paul

Smith

169

Germany

Susan

Johnson

112

Joan

Roberts

Japan

Don

Davis

Sweden

Paul

Smith

Norway

Susan

Johnson

176

Denmark

Joan

Roberts

Deep binding can be very useful in a number of scenarios, but you have to be aware of how binding works. In this example, editing the customer's first or last name will affect all rows that are bound to the same customer.

Also, unlike regular bindings, deep bindings are not 'un-doable' by default. To enable undo for deep bindings, you should use the grid's rowEditStarted event to record the original deep-bound values, and the rowEditEnding event to restore those values if the edits are being canceled.

Enable deep binding undos

// This file locates: "Scripts/Lesson/C1FlexGrid/DeepBinding.js".
c1.documentReady(function () {
    // create some random data
    var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(',');
    var customers = [
      { id: 0, first: 'Paul', last: 'Smith' },
      { id: 1, first: 'Susan', last: 'Johnson' },
      { id: 2, first: 'Joan', last: 'Roberts' },
      { id: 3, first: 'Don', last: 'Davis' }
    ];
    var data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            id: i,
            country: countries[i],
            customer: customers[i % customers.length],
            active: i % 5 != 0,
            downloads: Math.round(Math.random() * 200000),
            sales: Math.random() * 100000,
            expenses: Math.random() * 50000
        });
    }
 
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.initialize({
        autoGenerateColumns: false,
        columns: [
            { binding: 'country', header: 'Country', width: '*' },
          { binding: 'customer.first', header: 'First', width: '*' },
          { binding: 'customer.last', header: 'Last', width: '*' },
          { binding: 'downloads', header: 'Downloads (k)', format: 'n0,' }, // thousands
        ],
        itemsSource: data,
    });
 
    // save deep bound values when editing starts
    var itemData = {};
    theGrid.rowEditStarted.addHandler(function (s, e) {
        var item = s.collectionView.currentEditItem;
        itemData = {};
        s.columns.forEach(function (col) {
            if (col.binding.indexOf('.') > -1) {
                var binding = new wijmo.Binding(col.binding);
                itemData[col.binding] = binding.getValue(item);
            }
        })
    });
 
    // restore deep bound values when edits are canceled
    theGrid.rowEditEnding.addHandler(function (s, e) {
        if (e.cancel && document.getElementById('enableDeepUndo').checked) {
            var item = s.collectionView.currentEditItem;
            // var item = s.rows[e.row].dataItem; // same thing
            for (var k in itemData) {
                var binding = new wijmo.Binding(k);
                binding.setValue(item, itemData[k]);
            }
        }
        itemData = {};
    });
});

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

<h1>
    @Html.Raw(Resources.C1FlexGrid.DeepBinding_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.DeepBinding_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.DeepBinding_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.DeepBinding_Text3)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .ShowAlternatingRows(false)
)
 
<p>
    @Html.Raw(Resources.C1FlexGrid.DeepBinding_Text4)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.DeepBinding_Text5)
</p>
<p>
    <label>
        <input id="enableDeepUndo" type="checkbox" checked="checked">
        @Html.Raw(Resources.C1FlexGrid.DeepBinding_Text6)
    </label>
</p>