Kendo Grid Picker using native Kendo selection state

gistfile1.js

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

  var PatientPicker = React.createClass({
    displayName: 'PatientPicker',

    getDefaultProps: function () {
      return {
        dataSource: undefined,
        value: undefined, // selected ids
        onChange: undefined
      };
    },

    render: function () {
      return Forms.KendoGrid({
        selectable: 'multiple',
        scrollable: true,
        dataSource: this.props.dataSource,
        columns: [{ field: 'clientUserName' }],
        //rowTemplate: '<tr data-uid="#: uid #" role="row"><td role="gridcell">#: label #</td></tr>',
        // //rowTemplate: '<tr id="#: id #"><span>#: label #</span></tr>',
        change: this.onKendoChange
      });
    },



    componentDidMount: function () {
      this.syncSelectionWithKendo();
    },

    componentWillUnmount: function () {},

    componentDidUpdate: function () {
      this.syncSelectionWithKendo();
    },

    syncSelectionWithKendo: function () {
      var kendoWidget = $(this.getDOMNode()).data('kendoGrid');

      // Figure out which records are in the grid dom right now
      // We can select all the TRs since the grid rowTemplate is guaranteed to use tr/td
      var trs = $(kendoWidget.element).find('.k-grid-content tr');

      _.each(trs, function (tr) {
        var dataItem = kendoWidget.dataItem(tr);
        $(tr).toggleClass('k-state-selected', _.contains(this.props.value, dataItem['clientUserId']));
      }.bind(this));
    },

    onKendoChange: function () {
      var kendoWidget = $(this.getDOMNode()).data('kendoGrid');
      var selectedDomRows = kendoWidget.select();
      var nextSelection = _.map(selectedDomRows, function (tr) {
        return kendoWidget.dataItem(tr).toJSON()['clientUserId'];
      });

      // TODO: un-select it now, wait for next reconciliaton to allow selection

      this.props.onChange(nextSelection);
    }
  });



  return PatientPicker;
});