Dynamic DataMaps (switch)

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.

If your data maps contain only array strings, then it is not used as a real map. The cells actually contain the strings stored in the grid, and in this case it is safe to switch data maps before editing cells.

In the grid below, the data map used for selecting cities is a string array that is updated before editing the cells to include only cities that belong to the current country:

Country

City

Downloads

Sales

Washington

9,090

5,430.44

Germany

Bonn

6,789.77

London

10,571

1,744.33

Japan

Tokyo

5,780

9,607.87

Italy

Rome

12,161

8,980.07

Greece

Athens

2,787

1,246.82

// This file locates: "Scripts/Lesson/C1FlexGrid/DynamicDataMapsSwitch.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.itemsSource = getData();
    theGrid.columns[0].dataMap = getCountries();
    theGrid.columns[1].dataMap = getCities();
 
    // update cities data map depending on country
    theGrid.beginningEdit.addHandler(function (s, e) {
        var col = s.columns[e.col];
        if (col.binding == 'city') {
            switch (s.rows[e.row].dataItem.country) {
                case 'US':
                    col.dataMap = ['Washington', 'Miami', 'Seattle'];
                    break;
                case 'UK':
                    col.dataMap = ['London', 'Oxford', 'Bath'];
                    break;
                case 'Japan':
                    col.dataMap = ['Tokyio', 'Sendai', 'Kobe'];
                    break;
                case 'Greece':
                    col.dataMap = ['Athens', 'Santorini', 'Thebes'];
                    break;
                case 'Germany':
                    col.dataMap = ['Bonn', 'Munich', 'Kiel'];
                    break;
                case 'Italy':
                    col.dataMap = ['Rome', 'Florence', 'Milan'];
                    break;
                default:
                    col.dataMap = ['Unknown Country!'];
                    break;
            }
        }
    });
 
    // some random data
    function getCountries() {
        return 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    }
    function getCities() {
        return 'Washington,Bonn,London,Tokyo,Rome,Athens'.split(',');
    }
    function getData() {
        var countries = getCountries(),
          cities = getCities(),
          data = [];
        for (var i = 0; i < countries.length; i++) {
            data.push({
                country: countries[i],
                city: cities[i],
                downloads: Math.round(Math.random() * 20000),
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000
            });
        }
        return data;
    }
});

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

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.DynamicDataMapsSwitch_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.DynamicDataMapsSwitch_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.DynamicDataMapsSwitch_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.DynamicDataMapsSwitch_Text3)
</p>
@(Html.C1().FlexGrid().Id("theGrid")
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row)
    .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");
    })
)