Dynamic DataMaps (customize)

In some situations, you may want to change the data map used with a column depending on the value of another column. For example, you may want the drop-down in the 'City' column to show only cities in the country that is selected for the current row.

The grid below does this by customizing the DataMap used for the "cities" column. The code overrides the city map's getDisplayValues method to return only cities that belong to the current country:

Country

City

Downloads

Sales

Washington

12,802

3,921.05

Miami

566

6,306.75

Seattle

8,366

9,929.80

Germany

Bonn

1,307

3,757.19

Germany

Munich

12,268

4,999.17

Germany

Berlin

3,157

2,804.05

London

5,030

7,947.89

Oxford

5,250

1,065.00

Bath

12,402

7,962.17

Japan

Tokyo

3,170.96

// This file locates: "Scripts/Lesson/C1FlexGrid/DynamicDataMapsCustomize.js".
c1.documentReady(function () {
    // create data maps
    var countryMap = new wijmo.grid.DataMap(getCountries(), 'id', 'name');
    var cityMap = new wijmo.grid.DataMap(getCities(), 'id', 'name');
 
    // override cityMap's getDisplayValues method to get cities that
    // correspond to the current item
    cityMap.getDisplayValues = function (dataItem) {
        var arr = [],
            cities = getCities(),
            country = theGrid.collectionView.currentItem.country;
        for (var i = 0; i < cities.length; i++) {
            var city = cities[i];
            if (city.country == country) {
                arr.push(city.name);
            }
        }
        return arr;
    };
 
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.itemsSource = getData();
    theGrid.columns[0].dataMap = countryMap;
    theGrid.columns[1].dataMap = cityMap;
 
    // create some random data
    function getData() {
        var countries = getCountries(),
          cities = getCities(),
        data = [];
        for (var i = 0; i < cities.length; i++) {
            data.push({
                country: cities[i].country,
                city: cities[i].id,
                downloads: Math.round(Math.random() * 20000),
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000
            });
        }
        return data;
    }
    function getCountries() {
        return [
            { id: 0, name: 'US' },
            { id: 1, name: 'Germany' },
            { id: 2, name: 'UK' },
            { id: 3, name: 'Japan' },
            { id: 4, name: 'Italy' },
            { id: 5, name: 'Greece' }
        ];
    }
    function getCities() {
        return [
            { id: 0, country: 0, name: 'Washington' },
            { id: 1, country: 0, name: 'Miami' },
            { id: 2, country: 0, name: 'Seattle' },
            { id: 3, country: 1, name: 'Bonn' },
            { id: 4, country: 1, name: 'Munich' },
            { id: 5, country: 1, name: 'Berlin' },
            { id: 6, country: 2, name: 'London' },
            { id: 7, country: 2, name: 'Oxford' },
            { id: 8, country: 2, name: 'Bath' },
            { id: 9, country: 3, name: 'Tokyo' },
            { id: 10, country: 3, name: 'Sendai' },
            { id: 11, country: 3, name: 'Kobe' },
            { id: 12, country: 4, name: 'Rome' },
            { id: 13, country: 4, name: 'Florence' },
            { id: 14, country: 4, name: 'Milan' },
            { id: 15, country: 5, name: 'Athens' },
            { id: 16, country: 5, name: 'Santorini' },
            { id: 17, country: 5, name: 'Thebes' }
        ];
    }
});

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

<h1>
    @Html.Raw(Resources.C1FlexGrid.DynamicDataMapsCustomize_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.DynamicDataMapsCustomize_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.DynamicDataMapsCustomize_Text2)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("country").Header("Country");
        cs.Add().Binding("city").Header("City");
        cs.Add().Binding("downloads").Header("Downloads");
        cs.Add().Binding("sales").Header("Sales");
    })
)