JavaScript Grid

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

by jenke

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="http://mockjs.com/dist/mock.js"></script>
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>

JavaScript

Mock.mock(/showPrimaryList.json/,{
    'rows|10': [{
        'id|+1': 1,
        'name':'@name()',
        'email':'@EMAIL'
    }],
    'total':function(){
    	var rows =  this.rows;
    	return rows.length;
    }
});

Mock.setup({
    timeout: 1000
});

Mock.mock(/showDetail.json/,{
    'details|3': [{
        'id|+1': 1,
        'code|1-100':100
    }]
});

var ajaxSource = {
	filter: function () {
 	 $("#jqxgrid").jqxGrid('updatebounddata', 'filter'); 
  },
	datatype: "json",
	type: 'GET',
	datafields: [
		{ name: "id", type: "int" },
		{ name: "name",type: "string" },
		{ name: "email", type: "string" }
	],
	id: 'id',
	url: "showPrimaryList.json",
	root: 'rows',
  async:true,
	beforeprocessing: function (data) {
    if ( data != null ) {
      $("#jqxgrid").totalrecords = data.total; 
    } 
  }
};  
  
var initrowdetails = function (index, parentElement, gridElement, datarecord) {
var grid = $($(parentElement).children()[0]);
var detailSource = {
    dataFields: [
      {name: 'id', type: 'number'},
      {name: 'code', type: 'string'}
    ],

    url: 'showDetail.json',
    root:'details',
    type: 'get',
    dataType: 'json',
    id: 'id'
  };
	var nestedGridAdapter = new $.jqx.dataAdapter(detailSource);
  if (grid != null) {
      grid.jqxGrid({
        source: nestedGridAdapter,
        theme: 'energyblue',
        width: '95%',
        height: 100,
        columns:[
					{ text: 'id', datafield: 'id'}, 
					{ text: 'code', datafield: 'code' },
        ]
      });
  }
  
}

var dataAdapter = new $.jqx.dataAdapter(ajaxSource);
$("#jqxgrid").jqxGrid({
	width:'100%',
	height: '90%',
	filterable: true,
	theme: 'energyblue',
	source: dataAdapter,
	pageable: true,
	pagesize: 10,
  pagermode: "default",
  virtualmode: true,
	rowdetails: true,
  initrowdetails: initrowdetails,
	rowdetailstemplate: {
		rowdetails: "<div id='grid' style='margin: 10px;'></div>",
    rowdetailsheight:150,
    rowdetailshidden: true
	},
  rendergridrows: function (obj) { return...