Demo - Row Collections

by Troy Taylor

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.chart.min.js"></script>
<div class="container">

  <h1>
    Row Collections</h1>
  <p>
    The FlexGrid control has three sets of rows:</p>
  <ul>
    <li>
      <b>Header Rows</b>
      This collection contains the top set of rows;
      it is used by the <b>topLeftCells</b> and
      <b>columnHeaders</b> panels.
      By default, this collection contains one row.</li>
    <li>
      <b>Scrollable Rows</b>
      This collection contains the main set of rows;
      it is used by the <b>cells</b> and <b>rowHeaders</b>
      panels. 
      By default, this collection contains no rows.
      It is populated when you set the grid's
      <b>itemsSource</b> property.</li>
    <li>
      <b>Footer Rows</b>
      This collection contains the bottom set of rows;
      it is used by the <b>bottomLeftCells</b> 
      and <b>columnFooters</b> panels.
      By default, this collection is empty.</li>
  </ul>

  <p>
    The three row collections are <b>RowCollection</b>
    objects, which extend regular arrays. 
    You may add or remove rows by adding or removing <b>Row</b>
    objects from these arrays. 
    In most cases, however, you won't add or remove scrollable
    rows, since the grid does that automatically when you set
    the <b>itemsSource</b> property.</p>

  <p>
    In this example, the grid below has an extra fixed row and 
    automatically-generated scrollable rows. It also has adds 
    additonal 'empty' rows, which are manually added to the FlexGrid's
    RowCollection:</p>    
  <div...

CSS

.wj-flexgrid {
  height: 300px; 
  margin:10px 0;
}

JavaScript

onload = function () {

  // generate some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      country: countries[i],
      downloads: Math.round(Math.random() * 20000),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }

	// grid with extra fixed row and a footer row
  var theGrid = new wijmo.grid.FlexGrid('#theGrid');
  theGrid.columnHeaders.rows.push(new wijmo.grid.Row()); // add a header row
  theGrid.columnFooters.rows.push(new wijmo.grid.Row()); // add a footer row
  theGrid.bottomLeftCells.setCellData(0, 0, 'x'); // show some data on the first cell
	theGrid.itemsSource = data; // bind the grid
  
  /* add additional rows */
  theGrid.rows.push(new wijmo.grid.Row());
  theGrid.rows.push(new wijmo.grid.Row());
  
  console.log(theGrid.collectionView.items);
  
}