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

157,243

91,950

31,786

Susan Smith

Germany

28,689

45,750

22,844

Joan Jett

50,557

51,381

44,240

Don Davis

Japan

192,512

47,425

14,375

Paul Perkins

Sweden

91,304

38,746

26,367

Susan Smith

Norway

19,591

4,807

32,182

Joan Jett

Denmark

101,162

30,131

3,132

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