Dismissible Grid - Dustin's version

gistfile1.js

define([
  'underscore.mixed', 'react', 'wingspan-forms'
], function (_, React, Forms) {
  'use strict';

  var SelectedRecipientsGrid = React.createClass({

    getDefaultProps: function () {
      return {
        dataSource: undefined, // the datasource as list of records
        value: undefined, // the ids (projection of the datasource)
        onChange: undefined,
        height: undefined
      };
    },

    render: function () {
      // the selection value/onChange semantics are handled above the grid
      return (
        Forms.KendoGrid({
          dataSource: this.props.dataSource,
          height: this.props.height,
          columns: [{ field: 'clientUserName' }, { field: '', width: 30, template: '<button class="buttonUnselect" id="#: clientUserId #"></button>' }]
        })
      );
    },

    componentDidMount: function () {
      var $el = $(this.getDOMNode());
      $el.on('click', '.buttonUnselect', this.onButtonClick);
    },

    componentWillUnmount: function () {
      var $el = $(this.getDOMNode());
      $el.off('click', '.buttonUnselect', this.onButtonClick);
    },

    onButtonClick: function (e) {
      var idToBeRemoved = e.target.getAttribute('id');
      var nextValue = _.difference(this.props.value, [idToBeRemoved]);
      this.props.onChange(nextValue);
    }
  });

  return SelectedRecipientsGrid;
});