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

22,816

39,145

35,487

Susan Smith

Germany

63,669

46,149

16,453

Joan Jett

104,116

48,601

22,528

Don Davis

Japan

51,493

99,456

604

Paul Perkins

Sweden

105,422

44,269

25,525

Susan Smith

Norway

140,143

99,621

41,806

Joan Jett

Denmark

189,884

33,198

27,592

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")