Demo - MultiRow: dataIndex and recordIndex

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.multirow.min.js"></script>
<div class="container">

  <h1>
    MultiRow: dataIndex and recordIndex
  </h1>
  <p>
    The MultiRow uses an extended version of the <b>Row</b>
    class to store additional information with every row.
    The custom row object adds two properties:</p>
  <ul>
    <li>
      <b>dataIndex</b>: Gets the index of the row's data 
      item in the control's data source.</li>
    <li>
      <b>recordIndex</b>: Gets the index of the row within 
      the group or rows that represent a given data item.</li>
  </ul>
  <span><b>selectedRow.dataIndex</b>: <span id="dataIndex"></span></span><br>
  <span><b>selectedRow.recordIndex</b>: <span id="recordIndex"></span></span>
  <div id="theMultiRow">
  </div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
}
body: {
  margin-bottom: 26pt;
}

JavaScript

onload = function() {
	var mr = new wijmo.grid.multirow.MultiRow('#theMultiRow', {
  	selectionChanged: function (s, e) {
    	var row = s.selection.row > -1 ? s.rows[s.selection.row] : null;
      document.getElementById('dataIndex').innerHTML = row ? row.dataIndex : -1;
      document.getElementById('recordIndex').innerHTML = row ? row.recordIndex : -1;
		},
    layoutDefinition: [
    	{ cells: [
      	{ binding: 'id', header: 'ID' },
        { binding: 'country', header: 'Country' }
      ]},
      { colspan: 2, cells: [
      	{ binding: 'active', header: 'Active' },
        { binding: 'downloads', header: 'Downloads' },
        { binding: 'sales', header: 'Sales', format: 'c' },
        { binding: 'expenses', header: 'Expenses', format: 'c' }
      ]}
    ],
    itemsSource: getData(),
  });
  
  function getData() {
  	var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    		data = [];
		for (var i = 0; i < countries.length; i++) {
    	data.push({
      	id: i,
        country: countries[i % countries.length],
        active: i % 5 != 0,
        downloads: Math.round(Math.random() * 200000),
        sales: Math.random() * 100000,
        expenses: Math.random() * 50000
			});
		}
		return data;
	}
}