Html Grid

Set the editable property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="jqxgrid"></div>
<br>
<div id="log"></div>

JavaScript

var data = generatedata(500);
var source = {
    localdata: data,
    datafields: [{
        name: 'firstname',
        type: 'string'
    }, {
        name: 'lastname',
        type: 'string'
    }, {
        name: 'available',
        type: 'bool'
    }, {
        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").jqxGrid({
    width: 500,
    theme: 'energyblue',
    editable: false,
    source: adapter,
    selectionmode: 'multiplecellsextended',
    sortable: true,
    enablebrowserselection: true,
    editmode: 'dblclick',
    columns: [{
        text: 'First Name',
        datafield: 'firstname',
        width: 90
    }, {
        text: 'Last Name',
        datafield: 'lastname',
        width: 90
    }, {
        text: 'Available',
        datafield: 'available',
        width: 40,
        columntype: 'checkbox',
    }, {
        text: 'Product',
        datafield: 'productname',
        width: 170
    }, {
        text: 'Order Date',
        datafield: 'date',
        width: 160,
        cellsformat: 'dd-MMMM-yyyy'
    }, {
        text: 'Quantity',
        datafield: 'quantity',
        width: 80,
        cellsalign: 'right'
    }, {
        text: 'Unit Price',
        datafield: 'price',
        cellsalign: 'right',
        cellsformat: 'c2'
    }]
});

$("#jqxgrid").bind('cellselect', function (event) {
    var cells = $('#jqxgrid').jqxGrid('getselectedcells');
    var info = '';
    if (cells.length > 0) {
        info += '<span>Selection: </span><br/><ul>';
    	for	(var item in cells) {
            var rowindex = cells[item].rowindex;
            var datafield = cells[item].datafield;
            var value = $("#jqxgrid").jqxGrid('getcellvalue', rowindex, datafield);
            info += '<li>' + 'row:...