Wijmo 5 - ComboBox binding

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.90/controls/wijmo.input.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20152.90/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div style='padding:50px'>
  <div class='combo-container'>
  <div id="combo">   
  </div>
  <input type='button' value='update' onclick='addLayout()' />
  </div>
  
   <div id="theGrid"></div>
</div>

CSS

.combo-container{
  padding-bottom:20px;
}

JavaScript

var layouts = [
        { name: 'Country first col', layout: '{"columns":[{"header":"Country","binding":"country","dataType":1},{"header":"Sales","binding":"sales","dataType":2},{"header":"Expenses","binding":"expenses","dataType":2},{"header":"Downloads","binding":"downloads","dataType":2,"format":"n0"}]}' },
        
        { name: 'Sales first col',layout: '{"columns":[{"header":"Sales","binding":"sales","dataType":2},{"header":"Country","binding":"country","dataType":1},{"header":"Expenses","binding":"expenses","dataType":2},{"header":"Downloads","binding":"downloads","dataType":2,"format":"n0"}]}' }
        ],
        cmb, grid;
 
  addLayout = function() {
  console.log("add layout",cmb.selectedValue,cmb.selectedItem)
  if(cmb.selectedValue==null){
  	layouts.push({
    	name:cmb.text,
      layout:grid.columnLayout
    })
  }else{
  	var index = layouts.findIndex(l=>l.name = cmb.selectedValue);
  	layouts[index].layout = grid.columnLayout;
  }
	
 };
 
 onload=function(){
   var isChanged,_txt;
    cmb= new wijmo.input.ComboBox("#combo",{
    	itemsSource:layouts,
      selectedValuePath:'name',
      displayMemberPath:'name',
      isEditable:true,
      
      gotFocus:function(s,e){
      	_txt=s.text;
      },
      lostFocus:function(s,e){
        if(s.selectedItem){
        	grid.columnLayout = s.selectedItem.layout;
        }
        
      }
    });
    
   // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            country: countries[i],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }

    // create CollectionView on the data (so grid and chart stay in sync)
    var view = new wijmo.collections.CollectionView(data);

    // initialize the grid
    grid = new wijmo.grid.FlexGrid('#theGrid', {
       ...