Dynamic rich cell editor, per row, version 0.13.34 - possible?

[dmuldoon]

Hi,

Can I render unique editor instances, e.g., a <select> element on a per row basis?

ID Name Select
0 Foo Apple|Orange|Grape
1 Bar Car|Truck|Motorcycle
... ... ....

The contents of the select list "Select" vary per row - is this possible?

I tried using the rowRenderer property but this required me to mutate props (and I didn't get it working completely). I also tried setting editor to a function hoping that it might get called when the row went into edit mode. Also, no luck.

Any advice?

Version: 0.13.34

[dmuldoon]

Update - here is a code snippet that seems to work but I'm concerned about mutating props...this feels dirty:

        var issueTypes1 = ["Bug", "Improvement", "Epic", "Story"];
        var issueTypes2 = ["AAA", "BBB", "CCC", "DDD"];
        var DropDownEditor = ReactDataGrid.Editors.DropDownEditor;
        var IssueTypesEditor1 = <DropDownEditor options={issueTypes1}/>;
        var IssueTypesEditor2 = <DropDownEditor options={issueTypes2}/>;

        //here we are just changing the style
        //but we could replace this with anything we liked, cards, images, etc
        //usually though it will just be a matter of wrapping a div, and then calling back through to the grid
        if (this.props.idx === 0) {
          this.props.columns[2].editor = IssueTypesEditor1;
        } else if (this.props.idx === 1) {
          this.props.columns[2].editor = IssueTypesEditor2;
        }

        return (<ReactDataGrid.Row ref="row" {...this.props} />);

[jpdriver]

hey @dmuldoon -- so as you've probably figured this isn't completely possible right now because the options and editor type live at column level. however that said, we do have the concept of rowMetaData..

off the top of my head with a small bit of work it should be possible to specify an editor type in your column definition, but then make EditorContainer pick up row-specific options when it does createEditor() (see https://github.com/adazzle/react-data-grid/blob/master/src/addons/editors/EditorContainer.js#L51)

we actually even already get the rowMetaData there, so maybe it's just a question of having options in your editorProps..

try that, and let us know how you get on 😄

[dmuldoon]

This is what I came up with...it "works" -

/* @flow */
const React = require("react"),
  ReactDataGrid = require("react-data-grid/addons");

const RowRenderer = React.createClass({
  propTypes: {
    columns: React.PropTypes.array.isRequired,
    row: React.PropTypes.object.isRequired
  },

  setScrollLeft: function (scrollBy:number) {
    this.refs.row.setScrollLeft(scrollBy);
  },

  render: function ():React.Element {
    const {row, columns} = this.props;

    if (row.controlled && columns.length > 2) {
      var DropDownEditor = ReactDataGrid.Editors.DropDownEditor;
      columns[2].editor = <DropDownEditor options={row.codeListItems}/>;
    } else {
      columns[2].editor = null;
    }

    return (<ReactDataGrid.Row key={row.id} ref="row" {...this.props} />);
  }
});

module.exports = RowRenderer;

[dmuldoon]

Also - ReactDataGrid.Editors.DropDownEditor does not seem to support key/value in the version cited above. Is this fixed in a later release?

[bakesteve]

we'll fix for this, to make life easier, by adding the ability for editor to be a func, not just a ReactComponent so you can do something like:

getCustomColumn => (args) {
if(args.rowData.someProp === 'foo') { return dropDown; }
return null; //default to a simpleTextEditor, or return your 'normal' editor here
}

will update here once that is done

[dmuldoon]

That would be nice... 👍

[jpdriver]

@dmuldoon key / values for DropDownEditor is waiting to be merged in here #137

[dmuldoon]

Thank you @jpdriver

[txm]

Thanks for this - it's working well 👍