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>

CSS

body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

JavaScript

Mock.mock(/showPrimaryList.json/,{
    'rows|15': [{
        '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: '100%',
	filterable: true,
	theme: 'energyblue',
	source: dataAdapter,
	pageable: true,
	pagesize: 15,
  pagesizeoptions:(function(){
    var arr = new Array();
    var size = 20;
    while (size < 10000) {
      if (size < 50) {
        size = size + 5;
      } else if (size < 100) {
        size = size + 10;
      } else if (size < 1000) {
        size = size + 100;
      } else...