JavaScript Grid

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

by Zsolt Pieczarka

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">
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>

JavaScript

var ajaxSource = {
	datatype: "json",
	type: 'POST',
	datafields: [
		{ name: "id", type: "int" },
		{ name: "name", type: "string" },
		{ name: "email", type: "string" }
	],
	id: 'id',
	url: "https://cordova.nanosoft.hu/json.php",
	root: 'Rows',
	cache: false,
	beforeprocessing: function (data) { if ( data != null ) { $("#jqxgrid").totalrecords = data.TotalRows; } },
	sort: function () { $("#jqxgrid").jqxGrid('updatebounddata', 'sort'); },
	filter: function () { $("#jqxgrid").jqxGrid('updatebounddata', 'filter'); },
};  
  
var initrowdetails = function (index, parentElement, gridElement, datarecord) {
	var details = $($(parentElement).children()[0]);
	details.html("Details: " + index);
}

var dataAdapter = new $.jqx.dataAdapter(ajaxSource);
$("#jqxgrid").jqxGrid({
	width: 670,
	height: 250,
	filterable: true,
	showfilterrow: true,
	theme: 'energyblue',
	source: dataAdapter,
	virtualmode: true,
	rendergridrows: function (obj) { return obj.data; },
	pageable: true,
	pagesize: 5,
	rowdetails: true,
	rowdetailstemplate: {
		rowdetails: "<div style='margin: 10px;'>Row Details</div>",
		rowdetailsheight: 50
	},
	initrowdetails: initrowdetails,
	columns: [
		{ text: 'uid', datafield: 'id'}, 
		{ text: 'Name', datafield: 'name' },
		{ text: 'E-mail', datafield: 'email'}
	  ]
});