Html Grid

Set the showeverpresentrow 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>

JavaScript

var data = [];
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: 500,
  theme: 'energyblue',
  showeverpresentrow: true,
  showstatusbar: true,
  statusbarheight: 25,
  showaggregates: true,
  source: adapter,
  ready: function() {
    var aggregatesRow = $('#statusrowjqxgrid');

    $("#jqxgrid").jqxTooltip({
      content: 'Quantity tooltip.',
      position: 'mouse',
      trigger: 'none'
    });

    $("#jqxgrid").on('mouseover', function(event) {
      if ($('#statusrowjqxgrid').children().eq(4)[0].contains(event.target)) {
        $("#jqxgrid").jqxTooltip('open', event.pageX, event.pageY);
      } else {
        $("#jqxgrid").jqxTooltip('close');
      }
    });
  },
  columns: [{
    text: 'First Name',
    datafield: 'firstname',
    width: 90
  }, {
    text: 'Last Name',
    datafield: 'lastname',
    width: 90
  }, {
    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',
    aggregates: ['sum']
  }, {
    text: 'Unit Price',
    datafield: 'price',
    cellsalign: 'right',
    cellsformat: 'c2'
  }]
});