JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.lob.js"></script>
<link rel="stylesheet" href="http://cdn-na.infragistics.com/jquery/20131/latest/css/structure/infragistics.css">
<div id="grid1"></div>
<div id="dialog" style="display:none">
    <input id="dia_inputbox" type="text" />
</div>

JavaScript

$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/css/',
    theme: 'metro'
});

var updcolsettings = [{
    columnKey: "ProductID",
    editorOptions: {
        id: "ProductID",
        type: 4
    }
}, {
    columnKey: "Name",
    editorOptions: {
        id: "Name",
        type: 0
    }
}, {
    columnKey: "ProductNumber",
    editorOptions: {
        id: "ProductNumber",
        type: 4
    }
}];

$.ig.loader(function () {
    $("#grid1").igGrid({
        columns: [{
            headerText: "Product ID",
            key: "ProductID",
            dataType: "number"
        }, {
            headerText: "Product Name",
            key: "Name",
            dataType: "string"
        }, {
            headerText: "Product Number",
            key: "ProductNumber",
            dataType: "string"
        }],
        features: [{
            name: 'Updating',
            editMode: 'row',
            columnSettings: updcolsettings,
            editCellStarted: function (evt, ui) {
                $("#dialog").dialog();  
                $("#dia_inputbox").focus();
            }
        }],
        width: "100%",
        height: "200px"
    });
});