One of the added benefits of Wijmo 5’s FlexGrid control is data Mapping. This is a necessity when we are displaying data from our database but might want to change the actual value being displayed to the customer without messing with the underlying data structure. Data maps provide the grid with automatic look up capabilities. For example, you may want to display a customer name instead of his/her ID, or a color name instead of its RGB value. Let’s go ahead and create a FlexGrid and bind it to a simple data source. In our Markup: We need to define the scripts and controllers:
// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);
app.controller('appCtrl', function ($scope) {
var data = [];
});
We are now looking at the skeleton of Wijmo FlexGrid. Now we need to add our model and bind the FlexFrid’s itemsource to something and define its columns. Since we are demonstrating Data Mapping, we will need to create two arrays. The first one is what we will actually bind the FlexGrid Data Source to and the second one will provide the lookup ability or the data binding method for the data source. In this example, we will bind our FlexGrid to the value coming from our database, which is a list of State Codes (PA, NY, NJ) as well as populations of each state. In our grid however, we want to be able to display the state names, as our viewer’s may not understand or know all of the state codes. We want to accomplish this without manipulating our database data. So let's go ahead and create our array, I will call it dbData.
var dbData = [{
code: 'PA',
pop: 652
}, {
code: 'NY',
pop: 609
}, {
code: 'NJ',
pop: 3884
}];
Once we have created the data source for our FlexGrid let's go ahead and add that data to our collection view in the markup and then bind our collection view to our grid in the markup In Script:
// expose data as a CollectionView to get events
$scope.data = new wijmo.collections.CollectionView(dbData);
In Markup add the following attributes: We will work under the assumption that our DB is only storing and only knows two digit codes. But as we will see, it doesn’t really matter what the DB is storing, as long as we know what each code refers to. So now let's go ahead and create our data mapping table
// create some random data
var state = [{
name: 'Pennsylvania',
code: 'PA'
}, {
name: 'New York',
code: 'NY'
}, {
name: 'NJ',
code: 'New Jersey'
}];
Now that we have our secondary array, we can go ahead and create a datamapping
$scope.stateMap = new wijmo.grid.DataMap(state, "code", "name");
And finally, we can adjust our markup to reflect the following
MESCIUS inc.