FlexGrid - CellFactory

by andrea pirola

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>
<div class="container">

  <h1>
    FlexGrid - Cell Factory
  </h1>
  <div>
    
  </div>

  <div id="grid">
  </div>

</div>

CSS

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

JavaScript

onload = function() {

  var data = [];
  data.push({
    cellsData: {
      targetValue: {
        background: "red",
        dataType: "number"
      }
    },

    label: "qty",
    targetValue: 10000,
    totalValue: 1111111,
    actions: null
  });
  data.push({
    cellsData: {
      targetValue: {
        background: "yellow",
        dataType: "string"
      }
    },
    label: "plant",
    targetValue: "NONE",
    totalValue: "NONE",
    actions: null
  });
  data.push({
    label: "code",
    targetValue: "RM00001",
    totalValue: "RM00001",
    actions: null
  });

  var view = new wijmo.collections.CollectionView(data);

  // customize properties
  var grid = new wijmo.grid.FlexGrid('#grid', {
    itemsSource: view,
    showAlternatingRows: false,
    allowSorting: false,
    columns: [{
        name: "label",
        binding: 'label',
        header: 'Target name',
        width: 100,
        isReadOnly: false
      },
      {
        name: "targetValue",
        binding: 'targetValue',
        header: 'Target value',
        dataType: "Object",
        width: 100
      },
      {
        name: "totalValue",
        binding: 'totalValue',
        header: 'Total value',
        width: 100,
        dataType: "Object",
        isReadOnly: false
      },
      {
        name: "actions",
        binding: 'actions',
        header: 'Actions',
        width: 100
      }
    ],
    cellEditEnded: function(s, e) {

    }
  });
  
  grid.cellFactory = new CustomCellFactory();
  //grid.cellFactory = new wjcGrid.CellFactory();
  
  grid.itemFormatter = null;



}

var wjcCore = wijmo;
var wjcGrid = wijmo.grid;
var wjcSelf = CustomCellFactory;
window['CustomCellFactory'] = wjcSelf;

var CustomCellFactory = /** @class */ (function (_super) {
    __extends(CustomCellFactory, _super);
    function CustomCellFactory() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    /**
     * Creates or updates a cell in the grid.
     *
     *...