Wijmo FlexGrid

by betbest

HTML

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20202.724/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20202.724/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20202.724/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20202.724/controls/wijmo.input.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button type="button" id="editData">Edit</button>
<div id="grid1"></div>
<div id="grid2"></div>
<button type="button" id="saveData">Save</button>

JavaScript

//var fakeData = [{ "ImporteMinPedido" : 0, "ImporteMaxPedido":100,"CostoEntrega": 15, "Aplica" : false}];

var viewGrid1= new wijmo.collections.CollectionView([]);
viewGrid1.trackChanges = true;

var grid1 = new wijmo.grid.FlexGrid('#grid1', {
    autoSizeMode: 'Cells',
    selectionMode: 'ListBox',
    columns: [
      
        { binding: 'ImporteMinPedido', header: 'Imp. Min', isReadOnly: true, width: '*', align: "right" },
        { binding: 'ImporteMaxPedido', header: 'Imp. Max', isReadOnly: true, width: '*', align: "right" },
        { binding: 'CostoEntrega', header: 'Costo', isReadOnly: true, width: '*', align: "right" },
        {
            binding: 'Aplica', header: 'Aplicar', width: 80, align: "center", dataType: wijmo.DataType.Boolean
        }
    ],
    alternatingRowStep: 0,
    autoGenerateColumns: false,
    itemsSource: viewGrid1,

});

var grid2 = new wijmo.grid.FlexGrid('#grid2', {
    autoSizeMode: 'Cells',
    selectionMode: 'ListBox',
    columns: [
        {
            binding: 'ImporteMinPedido', header: 'Imp. Min', width: '*', align: "right",
            editor: new wijmo.input.InputNumber(document.createElement('div'), {
                format: 'n2',
                step: 1,
                min: 0,
                isRequired: false,
                value: null
            })
        },
        {
            binding: 'ImporteMaxPedido', header: 'Imp. Max', width: '*', align: "right",
            editor: new wijmo.input.InputNumber(document.createElement('div'), {
                format: 'n2',
                step: 1,
                min: 0,
                isRequired: false,
                value: null
            })
        },
        {
            binding: 'CostoEntrega', header: 'Costo', width: '*', align: "right",
            editor: new wijmo.input.InputNumber(document.createElement('div'), {
                format: 'n2',
                step: 1,
                min: 0,
                isRequired: false,
                value:...