Skip to content

Conversation

@dpnolte
Copy link

@dpnolte dpnolte commented Feb 13, 2018

Hi,

Thanks for the great library. I needed to have support for editing with drop down, which I have implemented as per this pull request. This implementation allows any custom component to be embedded as editor.

How it works:

  • import or create own custom editor. I've added dropdown editor to the package. TextEditor and DropDownEditor can be imported like: import cellEditFactory, { DropDownEditor } from 'react-bootstrap-table2-editor';
  • define column like this:
    const columns = [{ dataField: 'name', text: 'Product Name', editor: (<DropDownEditor dropDownKey="productName" items={ ['A', 'B', 'C'] } />) }];
  • enable cell editing as you normally would: <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEditFactory({ mode: 'click', afterSaveCell: (oldValue, newValue, row, column) => { console.log(\Value changed from '${oldValue}' to '${newValue}'`); }
    }) }
    />`

Main Changes:

  • Added an EditorWrapper. This wrapper clones the editor element and adds properties. The purpose of this wrapper is to standardize the way how the editing cell can access the value from the editor component. That is, it adds the updateValue callback as property to the editor component. The editor component needs to call this callback to update the value.
  • Added DropDownEditor. This is a component very similar to TextEditor, except it uses a dropdown to select values from a list.
  • Modified EditingCell to use EditorWrapper instead of directly using TextEditor. It also passes on the editor property to the wrapper. By default the TextEditor is used.

I've also added a Storyboard example to illustrate usage (see last item under cell edit).

Note: open item is where have events like onblur, onkeydown handled. I've left it as it is currently implemented (Editing Cell has handleBlur, handleKeyDown defined). However, it might be better to have the editor component handle the events. As these events differ among HTML elements (e.g., select has no onblur event). My proposal would be to manage events at the editor component level and have a callback in EditingCell for managing value changes.

@AllenFang
Copy link
Member

@dpnolte thanks your contribution, it's amazing PR to have a start for customization on cell edit, i'll have a look on it and give feedback to you in this couple day. thank you again :)

@jehartzog
Copy link
Contributor

@AllenFang I see the functionality from this PR was already added. Perhaps it's okay to close down this PR?

@dpnolte
Copy link
Author

dpnolte commented Nov 30, 2018

I've closed it, thx

@dpnolte dpnolte closed this Nov 30, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants