DataMaps

In many situations, you may want columns to map values so that cells display a value that is different from what is actually stored in the grid.

For example, you may have a 'rating' column with values ranging from one to three, and you would like to display the strings 'Low', 'Medium', or 'High' instead.

Or maybe you have a 'customer' column that contains the customer ID, and you would like to display the customer name instead.

You could accomplish such tasks using the formatItem event, but FlexGrid provides a better alternative: DataMaps. If you set a column's dataMap property to an instance of a DataMap, the grid will use it to:

Look up display values for each data item, and
Provide a drop-down list with valid items when editing the cells.

For example, the grid below has a 'Customer' column with a DataMap that associates customer names and IDs. The data source contains customer IDs, but the grid shows their names instead, and provides a drop-down list for selecting the customer for each item.

The grid also assigns a dataMap to the 'Country' column. In this case, the map is just a string array with the country names. There is no real mapping, but you still get the drop-down list to pick from. Users will not be able to enter any countries that are not on the list.

Customer

Country

Downloads

Sales

Expenses

Paul Perkins

53,373

60,824

19,678

Susan Smith

Germany

112,770

25,531

30,286

Joan Jett

113,355

28,085

7,896

Don Davis

Japan

100,566

59,544

44,434

Paul Perkins

Sweden

110,286

48,788

15,370

Susan Smith

Norway

112,885

93,764

26,129

Joan Jett

Denmark

104,640

59,005

14,563

And here is another grid showing all the customers. If you edit their names, you will see the change in the top grid:

Name

Address

Paul Perkins

123 Main St

Susan Smith

456 Grand Ave

Joan Jett

789 Broad St

Don Davis

321 Shattuck Ave

// This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsDataMaps.js".
c1.documentReady(function () {
    // create some random data
    var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(',');
    var customers = [
      { id: 0, name: 'Paul Perkins', address: '123 Main St' },
      { id: 1, name: 'Susan Smith', address: '456 Grand Ave' },
      { id: 2, name: 'Joan Jett', address: '789 Broad St' },
      { id: 3, name: 'Don Davis', address: '321 Shattuck Ave' },
    ];
    var data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            id: i,
            country: countries[i],
            customer: customers[i % customers.length].id,
            active: i % 5 != 0,
            downloads: Math.round(Math.random() * 200000),
            sales: Math.random() * 100000,
            expenses: Math.random() * 50000
        });
    }
 
    // create customer data map
    var customerMap = new wijmo.grid.DataMap(customers, 'id', 'name');
 
    // show the data in a grid
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.itemsSource = data;
    theGrid.columns[0].dataMap = customerMap;
    theGrid.columns[1].dataMap = countries;
 
    // show customers as well
    var theGridCustomers = wijmo.Control.getControl('#theGridCustomers');
    theGridCustomers.itemsSource = customers;
    theGridCustomers.rowEditEnded.addHandler(function (s, e) {
        customerMap.collectionView.refresh(); // update customer names on the main grid
    });
});

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

<h1>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDataMaps_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDataMaps_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDataMaps_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDataMaps_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDataMaps_Text4)
</p>
<ul>
    <li>@Html.Raw(Resources.C1FlexGrid.ColumnsDataMaps_Text5)</li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsDataMaps_Text6)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDataMaps_Text7)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDataMaps_Text8)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .ShowAlternatingRows(false)
    .AutoGenerateColumns(false)
    .Columns(cs =>
    {
        cs.Add().Binding("customer").Header("Customer").Width("1.5*");
        cs.Add().Binding("country").Header("Country").Width("*");
        cs.Add().Binding("downloads").Header("Downloads").Width("*").Format("n0");
        cs.Add().Binding("sales").Header("Sales").Width("*").Format("n0");
        cs.Add().Binding("expenses").Header("Expenses").Width("*").Format("n0");
    })
)
 
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDataMaps_Text9)
</p>
@Html.C1().FlexGrid().Id("theGridCustomers")