JSFiddle - React, Tailwind, and code Playground

by georgianastasov

HTML

<link rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/themes/infragistics/infragistics.theme.css">
<link rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/structure/infragistics.css">
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.dv.js"></script>
<table id="grid"></table>

JavaScript

var testData = [
    { "ID": 1, "Name": "Name 1", "Available": false, "Quantity": 10, "ExpireDate": new Date() },
    { "ID": 2, "Name": "Name 2", "Available": true, "Quantity": 10, "ExpireDate": new Date() },
    { "ID": 3, "Name": "Name 3", "Available": false, "Quantity": 10, "ExpireDate": new Date() },
    { "ID": 4, "Name": "Name 4", "Available": false, "Quantity": 10, "ExpireDate": new Date() },
    { "ID": 5, "Name": "Name 5", "Available": true, "Quantity": 10, "ExpireDate": new Date() },
    { "ID": 6, "Name": "Name 6", "Available": false, "Quantity": 10, "ExpireDate": new Date() }
];

$(document).ready(function() {
    $("#grid").igGrid({
        height: "100%",
        dataSource: testData,
        renderCheckboxes: true,
        columns: [
            { headerText: "ID", key: "ID", dataType: "number", width: "50px" },
            { headerText: "Name", key: "Name", dataType: "string", width: "125px" },
            { headerText: "Available", key: "Available", dataType: "bool", width: "75px" },
            { headerText: "Quantity", key: "Quantity", dataType: "number", width: "50px" },
            { headerText: "Expire Date", key: "ExpireDate", dataType: "date", width: "150px" }
        ],
        autoGenerateColumns: false,
        primaryKey: "ID",
        features: [
            {
                name: "Updating",
                enableAddRow: true,
                editMode: "row",
                enableDeleteRow: true,
                rowAdding: function(evt, ui){
                    var ds = ui.owner.grid.dataSource;
                    var pk = ui.owner.grid.options.primaryKey;

                    ds.insertRow(ui.values[pk], ui.values, 2, true);
                    ui.owner.grid.dataBind();

                    return false;
                }
            }
        ]
    });
});