Wijmo

by betbest

HTML

<script src="https://cdn.grapecity.com/wijmo/5.20193.637/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20193.637/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20202.699/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20193.637/controls/wijmo.input.min.js"></script>

    <div class="container-fluid">
        <div id="theGrid"></div>
    </div>

JavaScript

var data =[
   {id:1, date:new Date(),amount:200,premium:"Yes",canEdit:true,isInteger: true},
   {id:2, date:new Date(),amount:100.5,premium:"Yes", canEdit:true,isInteger:false},
   ]
   
   var viewGrid = new wijmo.collections.CollectionView(data);
   // create a grid with custom editors
    new wijmo.grid.FlexGrid('#theGrid', {
        showMarquee: true,
        selectionMode: 'MultiRange',
        alternatingRowStep: 0,
        autoGenerateColumns: false,
        columns: [
            { header: 'ID', binding: 'id', width: 80, isReadOnly: true },
            {
                header: 'Date', binding: 'date', format: 'd',
                editor: new wijmo.input.InputDate(document.createElement('div'))
            },
           
            {
                header: 'Amount', binding: 'amount', format: 'n2',
                editor: new wijmo.input.InputNumber(document.createElement('div'), {
                    format: 'n2',
                    step: 10,
                    min: 0,
                    max: 10000
                })
            },
            {
                header: 'Premium', binding: 'premium', cssClass: 'switch'
            }
        ],
        
        loadedRows: (s, e) => {
        	// iterate over each row 
          // and set their isReadOnly property
          // according to the canEdit value
        	s.rows.forEach(r => r.isReadOnly = !r.dataItem.canEdit);
          //The line above is working well but it affect to the row, Now I need to change a column according the value isInteger.
        },
        itemsSource: viewGrid,
        formatItem: (s, e) => {
        	// check for amount column and data cells
          // and also check whether the cell is being edited
        	if(s.cells === e.panel && s.columns[e.col].binding === 'amount' && !s.editRange) {
          	var item = s.rows[e.row].dataItem;
            var format = item.isInteger ? 'n' : 'n2';
            // format the number
            var dataToDisplay =...