Data Mapping Provides Auto Lookup Capabilities for FlexGrid

Data Mapping provides auto lookup capabilities in FlexGrid. For example, you may want to display a customer name instead of his ID, or a color name instead of its RGB value. It’s useful when you have an ID or index field that is unreadable or not user-friendly. You can use data mapping with a readonly column or one that can be edited. FlexGrid handles the mapping for you so the user can select a value from a user-friendly list while the underlying value or key is updated. Data mapping is a common grid feature also referred to as lookup. Data mapping is configured through the column’s DataMap property. The GridDataMap (FlexDataMap in iOS) class has three key properties or constructor parameters. They have slightly different names on each platform.

1. ItemsSource/array – a collection that contains the items to map.
2. SelectedValuePath/keyPath (string) – the name of the property that contains the keys (data values).
3. DisplayMemberPath/displayPath (string) – the name of the property to use as the visual representation of the items.

If you’ve ever bound a ComboBox control in .NET then you’re familiar with the value vs display member. Value is the underlying key like ID or Index. Display is what the user should read it as. The code below initializes a data map and then assigns it to the grid’s ‘CountryId’ column so that the grid displays country names rather than the raw IDs. Xamarin.Forms – C#

grid.Columns["CountryId"].DataMap = new GridDataMap() { ItemsSource = countries,  
 DisplayMemberPath = "Country", SelectedValuePath = "ID" };  

Android - Java

GridColumn countryColumn = new GridColumn(grid, "Country", "countryId");  
countryColumn.setDataMap(new GridDataMap(Customer.getCounties(), "countryId", "countryName"));  
countryColumn.setShowDropDown(true);  
grid.getColumns().add(countryColumn);  

Xamarin.Android - C#

GridColumn countryColumn = new GridColumn(grid, "Country", "CountryID");  
countryColumn.DataMap = new GridDataMap(countries, "ID", "Name");  
countryColumn.ShowDropDown = true;  
grid.Columns.Add(countryColumn);  

iOS - Objective-C

FlexColumn *c3 = [[FlexColumn alloc] init];  
c3.binding = @"countryID";  
c3.header = @"Country";  
c3.dataMap = [[FlexDataMap alloc] initWithArray:countryArray selectedValuePath:@"countryID" displayMemberPath:@"name"];  

iOS - Swift

let c3: FlexColumn = FlexColumn()  
c3.binding = "countryID"  
c3.header = "Country"  
c3.dataMap = FlexDataMap(array: countryArray, selectedValuePath: "countryID", displayMemberPath: "name")  

Xamarin.iOS - C#

Column c3 = grid.Columns.GetItem<Column>(3);  
c3.Binding = "countryID";  
c3.Header = "Country";  
c3.DataMap = new FlexDataMap (countryArray, (NSString)"ID", (NSString)"Name");  

Some useful notes and tips:

• Set the column's Header property to change what is displayed in the column header.
• If no key in the data map is found for a particular cell, it will display empty. You can provide an empty placeholder to display by adding a key value for -1. This only works if your key is a number.
• When data mapping is configured for a column a Picker is displayed when the user edits the cell on iOS or Xamarin.Forms. A spinner is displayed in Android and Xamarin.Android.
• In Xamarin.Forms you can populate the data map with any IEnumerable collection.
• In iOS you can populate the data map with either an NSMutableArray or a XuniCollectionView.
• In Android you can populate the data map with a List.
• If you use a KeyValuePair collection as the data map source, make sure to set the DisplayMemberPath to “Value” and the SelectedValuePath to “Key.”

• In Xamarin.iOS don't forget the Export attribute on your NSObject properties. See below.

  
  // Xamarin.iOS class declaration  
  public class Country : NSObject  
  {  
  [Export (“ID”)]  
  public int ID { get; set; }  
  [Export(“Name”)]  
  public string Name { get; set; }  
  }  
  
  

You can find a full code example of data mapping in the Column Definitions sample found within FlexGrid101. Browse the samples on GitHub.