Demo - Row Details

by Joel Parks

HTML

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

  <h1>
    Row Details</h1>
  <p>
    Sometimes rows are bound to data objects that contain
    more information than would fit easily on a regular grid.</p>
  <p>
    In these scenarios, you may want to use the
    <b>FlexGridDetailProvider</b> class that is included with
    the <b>wijmo.grid.detail</b> module.</p>
  <p>
    The <b>FlexGridDetailProvider</b> extends the <b>FlexGrid</b>
    by adding collapse/expand buttons to row headers, and a
    <b>createDetailCell</b> method you can use to provide 
    additional details about an item. The detail information
    is shown in a 'detail row' added to the grid when the 
    details are expanded, and removed when they are collapsed.</p>
    
  <h3>
    HTML in Row Details</h3>
  <p>
    This grid shows product categories on each row. Expanding
    the rows shows an HTML element with information about 
    the products in that category:</p>
  <div id="htmlDetail"></div>

  <h3>
    Grids in Row Details</h3>
  <p>
    You can add anything you want to the detail rows, 
    including other grids. This example shows the same
    categories, but the detail row uses another grid
    to show the products:</p>
  <div id="gridDetail"></div>
</div>

CSS

.wj-flexgrid {
  max-height: 350px; 
}
body {
  margin-bottom: 20pt;
}

JavaScript

onload = function () {

  // get OData categories and products
  var url = 'https://services.odata.org/Northwind/Northwind.svc';
  var categories = new wijmo.odata.ODataCollectionView(url, 'Categories', {
  	fields: ['CategoryID', 'CategoryName', 'Description']
  })
  var products = new wijmo.odata.ODataCollectionView(url, 'Products');

	// shared column definitions
	var categoryColumns = [
		{ binding: 'CategoryName', header: 'Category Name', width: '*' },
		{ binding: 'Description', header: 'Description', width: '2*' }
	];
  
  // get products for a given category
	function getProducts(categoryID) {
  	var arr = [];
  	products.items.forEach(function(product) {
    	if (product.CategoryID == categoryID) {
      	arr.push(product);
      }
    });
		return arr;
	}

	// grid with HTML detail
  var htmlDetail = new wijmo.grid.FlexGrid('#htmlDetail', {
  	autoGenerateColumns: false,
    columns: categoryColumns,
    itemsSource: categories,
    isReadOnly: true
  });
  
  // html detail provider
	var dpHtml = new wijmo.grid.detail.FlexGridDetailProvider(htmlDetail, {

		// use animation when showing details
    isAnimated: true,

    // create detail cells for a given row
    createDetailCell: function (row) {
    
    	// build detail content for the current category
    	var cat = row.dataItem;
      var prods = getProducts(cat.CategoryID);
      var html = 'ID: <b>' + cat.CategoryID + '</b><br/>';
      html += 'Name: <b>' + cat.CategoryName + '</b><br/>';
      html += 'Description: <b>' + cat.Description + '</b><br/>';
      html += 'Products: <b>' + prods.length + ' items</b><br/>';
      html += '<ol>';
			prods.forEach(function(product) {
      	html += '<li>' + product.ProductName + '</li>';
      });
			html += '</ol>';
      
      // create and return detail cell
    	var cell = document.createElement('div');
      cell.innerHTML = html;
      return cell;
		}
	});
  
	// grid with grid detail
  var gridDetail = new wijmo.grid.FlexGrid('#gridDetail', {
...