Skip to content

Commit

Permalink
Merge pull request #8 from tomaskikutis/master
Browse files Browse the repository at this point in the history
Partial solution to #7
  • Loading branch information
skratchdot committed Jul 3, 2015
2 parents 943b700 + a3d8eb5 commit 5363a19
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 0 deletions.
33 changes: 33 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,39 @@ var someReactComponent = React.createClass({
<link rel="stylesheet" href="bootstrap-multiselect.css" type="text/css" />
```

## Note on data synchronization

In case `this.state.myData` changes from outside of multiselect component, values and checkbox state will not update automatically. If you want to sync state, you have to call `.syncData()` on multiselect like in example below.

```javascript

var React = require('react');
var Multiselect = require('react-bootstrap-multiselect');

var someReactComponent = React.createClass({
getInitialState: function(){
var that = this;
$("element").on("event", function(){
$.get("new-data-from-url", function(newData){
that.setState(newData);

// to sync manually do
this.refs.myRef.syncData();
});
});

return {
myData : [{value:'One',selected:true},{value:'Two'}]
};
},
render: function () {
return (
<Multiselect onChange={this.handleChange} ref="myRef" data={this.state.myData} multiple />
);
}
});
```

## Documentation

For in depth documentation, see the original
Expand Down
13 changes: 13 additions & 0 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,19 @@ module.exports = React.createClass({
displayName: 'MultiSelect',
$multiselect: null,
options: getOptions(),
syncData: function(){

// this function is meant to be called from parent component
// in case selected values are changed outside of this component
// and need to be synced

// this function can not be called every time on this.render, because
// dropdown would close after selecting first item

if(this.$multiselect !== null){
this.$multiselect.multiselect('dataprovider', this.props.data || []);
}
},
setOptionsFromProps: function () {
var currentOptions = {}, needToInit = false, $this = this;
if ($this.$multiselect) {
Expand Down

0 comments on commit 5363a19

Please sign in to comment.