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 source = {
	localdata: [
		{ "id": 69, "name": "Loris Mahuna", "email": "[email protected]"},
		{ "id": 89, "name": "Lauryn Vanbeek", "email": "[email protected]"},
		{ "id": 67, "name": "Maricruz Vradenburg", "email": "[email protected]"},
		{ "id": 74, "name": "Cassey Baiza", "email": "[email protected]"},
		{ "id": 25, "name": "Saul Beshear", "email": "[email protected]"}
	],
	datatype: "array"
};
  
var initrowdetails = function (index, parentElement, gridElement, datarecord) {
	var details = $($(parentElement).children()[0]);
	details.html("Details: " + index);
}

var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
	width: 670,
	height: 250,
	filterable: true,
	showfilterrow: true,
	theme: 'energyblue',
	source: dataAdapter,
	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'}
	  ]
});