Simple text editor in grid cell

AUTHOR : KAUSHAL VARSHNEY

by KAUSHAL VARSHNEY

HTML

<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<b>Click on a cell of Internal Comments to edit <br>
    <b>Grid 1:
        <div id="jqxgrid1Container" height='200px'>
<div id="jqxgrid"></div></div>
        <b>Grid 2:
<div id="jqxgrid2"></div>

JavaScript

var data = generatedata(10);
var source = {
    localdata: data,
    datafields: [{
        name: 'firstname',
        type: 'string'
    }, {
        name: 'lastname',
        type: 'string'
    }, {
        name: 'productname',
        type: 'string'
    }, {
        name: 'date',
        type: 'date'
    }, {
        name: 'quantity',
        type: 'number'
    }, {
        name: 'price',
        type: 'number'
    }],
    datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid,#jqxgrid2").jqxGrid({
    width: 400,
    height: 280,
    theme: 'energyblue',
    source: adapter,
    autoheight: true,
    autorowheight: true,
    editable: true,
    columns: [{
        text: 'Column1',
        datafield: 'firstname',
        columngroup: 'Name',
        width: 90
    }, {
        text: 'Column2',
        columngroup: 'Name',
        datafield: 'lastname',
        width: 120
    }, {
        text: 'Column3',
        datafield: 'productname',
        width: 170,
        editable: true
    }]
});