Wijmo 5 - FlexGrid DataMaps

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20151.51/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.51/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.51/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.51/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.51/styles/wijmo.min.css">
<div ng-app="app" ng-controller="appCtrl">
    
<h3>FlexGrid DataMaps</h3>

<p>
    This sample shows how to use DataMaps to create columns that
    store item codes and display their names.</p>
<p>
    Notice how the grid uses the DataMaps to display, edit, and 
    sort the data.</p>
    
<wj-flex-grid items-source="data" key-action-tab="Cycle" allow-delete="true" allow-add-new="true">
    <wj-flex-grid-column header="Product" binding="product" data-map="productMap" width="*">
    </wj-flex-grid-column>
    <wj-flex-grid-column header="Customer" binding="customer" data-map="customerMap" width="*">
    </wj-flex-grid-column>
</wj-flex-grid>
<button ng-click="test()">Refresh</button>

JavaScript

'use strict';

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

    var products = [
        { id: 0, name: 'Widget' },
        { id: 1, name: 'Gadget' },
        { id: 2, name: 'Wahoo' }
    ];
    var customers = [
        { id: 0, name: 'Alex' },
        { id: 1, name: 'Neil' },
        { id: 2, name: 'Geddy' }
    ];
    $scope.productMap = new wijmo.grid.DataMap(products, 'id', 'name');
    $scope.customerMap = new wijmo.grid.DataMap(customers, 'id', 'name');    
    $scope.data = [
        { id: 0, product: 0, customer: 2 },
        { id: 1, product: 1, customer: 1 },
        { id: 2, product: 2, customer: 0 }
    ];

});