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

175,895

16,275

23,988

Susan Smith

Germany

98,789

22,194

28,741

Joan Jett

183,547

89,229

40,220

Don Davis

Japan

155,528

81,649

9,086

Paul Perkins

Sweden

169,725

80,521

39,832

Susan Smith

Norway

70,935

38,276

19,867

Joan Jett

Denmark

136,893

39,331

37,249

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