Wijmo 5 - FlexGrid DataMaps

by Javier Gutierrez

HTML

<script src="http://cdn.wijmo.com/5.20173.409/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20173.409/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.20173.409/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.51/styles/wijmo.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
    
<h3>FlexGrid</h3>


    

    <div >
         <ul class="nav nav-tabs">
            <li class="active" ><a data-target="#one" data-toggle="tab">ONE</a></li>
            <li><a data-target="#two" ng-click="initTwo()" data-toggle="tab">TWO</a></li>
            <li><a data-target="#three" ng-click="initThree()"data-toggle="tab">three</a></li>      
         </ul>
    </div>
    <div id="tabContainer" class="tab-content">
           <div class="tab-pane active in " id="one">                         
                                    
           </div>

           <div class="tab-pane  " id="two">                         
               <div id="flexOne" ></div>                       
           </div>

           <div class="tab-pane fade " id="three">                         
               <div id="flexTwo" ></div>                      
           </div>
    </div>
    
  
    
 </div>

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.flexOne = new wijmo.grid.FlexGrid('#flexOne')  
  
   $scope.initTwo = function () {           
           $scope.flexOne.initialize({
               autoGenerateColumns: false,
               itemsSource: customers,              
               allowSorting: false,
               allowDragging: 0,
               allowDelete: true,
               allowAddNew:true,
               columns: [
                   { binding: 'id', header: 'id' },
                   { binding: 'name', header: 'name' },
                 
               ]


           });
           $scope.flexOne.collectionView.trackChanges = true;
           $scope.flexOne.invalidate();       
       
   }
     $scope.flexTwo = new wijmo.grid.FlexGrid('#flexTwo')  
  
   $scope.initThree = function () {           
           $scope.flexTwo.initialize({
               autoGenerateColumns: false,
               itemsSource: products,              
               allowSorting: false,
               allowDragging: 0,
               allowDelete: true,
               allowAddNew:true,
               columns: [
                   { binding: 'id', header: 'id' },
                   { binding: 'name', header: 'name' },
                 
               ]


           });
           $scope.flexTwo.collectionView.trackChanges = true;
           $scope.flexTwo.invalidate();       
       
   }
    
    

});