KB - Wijmo 5 - Move Checked Columns

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>
    FlexGrid
  </h1>
  <div>
    <p>
    Move rows with the "Active" column checked from the first FlexGrid to the second FlexGrid
    </p>
  <button class="btn btn-primary" onclick="moveActiveRows()">Move "Active" Rows</button><br><br>
  </div>

  <div id="firstGrid"></div>
  <h2>
  "Active"
  </h2>
  <div id="secondGrid"></div>

</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}

JavaScript

var firstView, secondView;
var firstData, secondData;
//var movedRows = [];


function moveActiveRows() {
  
  // check collectionView
  var itemsToMove = [];
  
  firstView.items.forEach(function (item) {
    if(item.active){
    	itemsToMove.push(item);
      console.log(item);
    }
  });
  
  itemsToMove.forEach(function(item) {
  	//secondView.items.push(item);
    secondData.push(item);
    console.log(item);
  });
  
  secondView.refresh();
  
}




onload = function() {

  var firstCountry = 'US,Canada,Mexico'.split(',');
  var secondCountry = 'UK,Germany,Spain'.split(',');
  firstData = [];
  secondData = [];
  for (i = 0; i < 3; i++) {
    firstData.push({
      id: i, country: firstCountry[i], active: true
    });
    secondData.push({
      id: i, country: secondCountry[i], active: false
    });
  }

  firstView = new wijmo.collections.CollectionView(firstData);
  secondView = new wijmo.collections.CollectionView(secondData);

  var firstGrid = new wijmo.grid.FlexGrid("#firstGrid", { 
    columns: [
      { binding: 'id', header: 'Country ID' },
      { binding: 'country', header: 'Country Name' },
      { binding: 'active', header: 'Active' },
    ],
    autoGenerateColumns: false,
    itemsSource: firstView,
  });
  var secondGrid = new wijmo.grid.FlexGrid("#secondGrid", { 
    columns: [
      { binding: 'id', header: 'Country ID' },
      { binding: 'country', header: 'Country Name' },
      { binding: 'active', header: 'Active' },
    ],
    autoGenerateColumns: false,
    itemsSource: secondView,
          });

}