Html Grid

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

by Justin Peszleny

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>

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").jqxGrid({
                width: "100%",
                source: source,
                editable: true,
                selectionmode: 'singlerow',
                editmode: 'selectedrow',
    columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80, validation: function (cell, value) { if (!value) { return { result: false, message: cell.column + " not valid" }; } return true;}},
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80, validation: function (cell, value) { if (!value) { return { result: false, message: cell.column + " not valid" }; } return true;}},
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195, validation: function (cell, value) { if (!value) { return { result: false, message: cell.column + " not valid" }; } return true;}},
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, validation: function (cell, value) { if (!value) { return { result: false, message: cell.column + " not valid" }; } return true;}},
                  {
                      text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                  validation: function (cell, value) {
                          if (value == "")
                             return true;                  ...