FlexGrid and DetailView

The simplest way to deal with hierarchical data is the master-detail model. Use a control to select the main item and one or more additional controls to show the main item's details.

In this example, The FlexGrid is used as the master control. Select an item on the grid and see the details in the controls below:

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  var products = 'Phones,Cars,Stereos,Watches,Computers'.split(',');
  var data = [];
  for (var i = 0; i < 50; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      product: products[i % products.length],
      date: wijmo.DateTime.addDays(new Date(), i),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000,
    });
  }

  // using a grid as the master
  var theGridMaster = new wijmo.grid.FlexGrid('#theGridMaster', {
    itemsSource: data,
    selectionMode: 'Row',
    isReadOnly: true,
    selectionChanged: function(s, e) {
      updateDetailControls();
    }
  });

  // update detail controls when selection changes
  function updateDetailControls() {
    var item = theGridMaster.collectionView.currentItem;
    var bndCtls = document.querySelectorAll('.bnd-ctl');
    for (var i = 0; i < bndCtls.length; i++) {
      var host = bndCtls[i];
      var prop = host.id.substr(3).toLowerCase();
      var ctl = wijmo.Control.getControl(host);
      if (wijmo.isString(item[prop])) {
        ctl.text = item[prop];
      } else {
        ctl.value = item[prop];
      }
    }
  }

  // set a property on the current item
  function setProperty(prop, val) {
    var v = theGridMaster.collectionView;
    v.editItem(v.currentItem);
    v.currentItem[prop] = val;
    v.commitEdit();
  }

  // define detail controls
  var theCountry = new wijmo.input.ComboBox('#theCountry', {
    itemsSource: countries,
    textChanged: function(s, e) {
      setProperty('country', s.text);
    }
  });
  var theProduct = new wijmo.input.ComboBox('#theProduct', {
    itemsSource: products,
    textChanged: function(s, e) {
      setProperty('product', s.text);
    }
  });
  var theDate = new wijmo.input.InputDate('#theDate', {
    valueChanged: function(s, e) {
      setProperty('date', s.value);
    }
  });
  var theSales = new wijmo.input.InputNumber('#theSales', {
    format: 'n2',
    step: 10,
    valueChanged: function(s, e) {
      setProperty('sales', s.value);
    }
  });
  var theExpenses = new wijmo.input.InputNumber('#theExpenses', {
    format: 'n2',
    step: 10,
    valueChanged: function(s, e) {
      setProperty('expenses', s.value);
    }
  });