JSGrid Dependent Columns

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="jsGrid"></div>

CSS

html,
body {
    height: 100%;    
}

JavaScript

var data = [
    { cost: "100" },
    { cost: "200" },
    { cost: "300" }
];

$("#jsGrid").jsGrid({
    height: "90%",
    width: "100%",
    
    controller: {

        loadData: function() {
            return data;
        }
        
    },
    
    inserting: true,
    editing: true,
    autoload: true,
    
    fields: [{ 
        name: "cost",
        type: "text",
        align: "right" 
    }, { 
        name: "cost",
        editing: false,
        inserting: false,
        itemTemplate: function(cost, color) {
            return (cost * 1.1).toFixed(2);
        }
    }, { 
        type: "control", 
        editButton: false 
    }]
});