gridifier with React

[niteeshravi]

Hi, Can anyone help us with an example of gridifier with Reactjs. I am trying understand the best way to integrate gridifier with Reactjs for best performance.

Thanks in advance.

[nix23]

Hi. I have added React+Bootstrap sample with basic demo in /tutorials/Samples/02_ReactGrid folder. Actually it is quite simple:

// 0. Set initial state in your root component for active sort/filter/etc...
getInitialState: function() {
    return {
        selectedSort: 'sortName',
        selectedFilter: 'filterName'
    };
}

// 1. Mount grid in your root component 'componentDidMount' lifecycle function:
componentDidMount: function() {
    this._grid = new Gridifier(ReactDOM.findDOMNode(this.refs.grid), {
        // ... Grid settings
    });
}

// 2. Don't forget to unmount Gridifier in 'componentWillUnmount' callback:
componentWillUnmount: function() {
   this._grid.destroy();
}

// 3. Connect new items to Gridifier in your root component callback which is triggered from your 
// child grid item components or Flux store:
onNewItemMount: function() {
    this._grid.appendNew(); // This will connect all new(not connected) items to Gridifier
}

// 4. On your child component sort/filter change update state in root component(or get from store)
// and apply new sort/filter/etc... in setState callback.
onSortChange: function(newVal) {
    var me = this;
    this.setState({selectedSort: val}, function() {
        me._grid.sort(val).resort();
    });
}

You can check full working example in project tutorials/Samples folder. Because Gridifier performs all operations through it's own internal synced queues you shouldn't worry about questions like 'What will happen if: 1) React will get and mount 4 items from api; 2) then user will select new sort/filter; 3) while new sorting/filter is applied React mounts 4 new items received from api; 4) or all those operations are executed while user is dragging some items inside grid;' All this stuff should work correctly and fast by default.

Hope this helps.

[niteeshravi]

I am actually looking for a demo of a tile layout( in gridifier terms, i need a dragifier based grid) with Reactjs. We need a responsive,gapless,bootstrap based tile layout using gridifier(dragifier) in ReactJs.

Can you help us on this.

[nix23]

To enable dragifier you can:

// 1. Pass 'dragifier: true' setting in settings object
componentDidMount: function() {
    this._grid = new Gridifier(ReactDOM.findDOMNode(this.refs.grid), {
         // ..Other settings
         dragifier: true
    });
 }

// 2. Enable dragifier after grid was created:
this._grid.dragifierOn();