Html Grid

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

by hugosolar

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>
Double-click on a cell to begin an edit operation
<div id="jqxgrid"></div>

JavaScript

var data_factura = [
        { id: null, codigo: null, producto: null, cantidad: null, unidad: null, precio: null, dcto: null,impto: null, exencion: null, total: null }
    ];
    var source = {
        localdata: data_factura,
        datatype: 'array',
        datafields: [
            { name: 'id', type: 'number' },
            { name: 'codigo', type: 'number' },
            { name: 'producto', type: 'string' },
            { name: 'cantidad', type: 'number' },
            { name: 'unidad', type: 'string' },
            { name: 'precio', type: 'number' },
            { name: 'dcto', type: 'number' },
            { name: 'impto', type: 'string' },
            { name: 'exencion', type: 'string' },
            { name: 'total', type: 'number' },
        ]
    };
    var dataAdapterFactura = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
    width: '100%',
				autoheight: false,
        autorowheight: false,
        source: dataAdapterFactura,
        editable: true,
        enablehover: false,
        theme: 'nubox datatable',
        selectionmode: 'none',
        editmode: 'programmatic',
        columns: [
            { 
                text: '', 
                datafield: 'id', 
                align: 'center', 
                cellsalign: 'center',
                width: '3%',
                editable: false,
                cellsrenderer: function(id){
                    return '<div class="jqx-grid-cell-middle-align cell-space-top"><button class="boton-cirrus azul tiny" data-id="'+id+'"><span class="nuboxFont nubox-borrar"></span></button></div>';
                } 
            },
            { 
                text: 'Código',
                datafield: 'codigo', 
                align: 'center', 
                cellsformat: 'd', 
                cellsalign: 'center',
                columntype: 'template',
                width: '10%',
                createeditor: function (row, cellvalue, editor, cellText, width, height) {
                   ...