Two rows in 1 cell

by Alexey Sharifullin

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>

CSS

.table-row{
    display: table-row;
  }
.nested-cell {
  height: 32px !important;
  overflow:hidden;
  width: 100%;
  border-bottom: 1px solid;
  margin-right: 1px;
  margin-bottom: 1px;
  white-space: nowrap;
  font-weight: normal; 
  font-size: inherit;
  display: table-cell;
  vertical-align: middle;
}

JavaScript

var data = generatedata(500);
 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);
 var i=0;
 var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                    return '<div style="display: table;"> <div class="table-row"><div class="jqx-grid-cell-energyblue  nested-cell">' + value + " sakmlnk jhakjsh k</div></div>"+ '<div class="table-row"><div class="jqx-grid-cell-energyblue nested-cell">' + rowdata.lastname + "</div></div></div>";
                    
                
            };
 $("#jqxgrid").jqxGrid({
     width: 670, height: 300,
     editable: true,
     rowsheight: 64,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     altrows: true,
     selectionmode: 'singlecell',
     columngroups: 
                [
                  { text: 'First Name', align: 'left', name: 'FirstName' }
                ],
     columns: [{
         text: 'Second Name',
         datafield: 'firstname',
         width: 90,
         sortable: false,
         columngroup: 'FirstName',
         cellsrenderer: cellsrenderer,
         columntype: 'template',
         initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
					var inputField = editor.find('#test');
          var rowdata = $("#jqxgrid").jqxGrid('getrowdata', row);
         	inputField.val(rowdata.lastname);
				 	inputField.jqxInput('selectAll');
          var inputField2 = editor.find('#test2');
         	inputField2.val(cellvalue);
				 	inputField2.jqxInput('selectAll');
     		 },
     		...