how add and remove values from grid to another grid

[sindhu465]

import React, {Component, PropTypes} from 'react'; import {Button, ButtonGroup} from 'react-bootstrap'; import update from 'react-addons-update'; import {VerticalLayout, HorizontalLayout,DataGrid,DynamicDataGrid,Icon,ResizableModal,AutoResizeComponent,DepartmentDropdown,FlexPanel,FixedPanel,DraggableCell} from 'ssc-cdt3'; import {connectCdtDataComponent} from 'ssc-cdt3';

const leftColConfig = [ { dataKey: 'CLIENT_NAME', label: 'Client Name', width: 200, dataType: 'string' } ];

const rightColConfig = [ { dataKey: 'CLIENT_NAME', label: 'Visible Columns', width: '*', dataType: 'string', sort: false, menu: false, cell: DraggableCell } ];

export default class ClientSelector extends Component {

static propTypes = { gridState: PropTypes.object.isRequired, onChange: PropTypes.func.isRequired,

};

constructor(props) { super(props); this.leftSelected = []; this.rightSelected = []; this.state = this.getState(); this.state = { showModal: false};

}

getState(props) { const {gridState} = this.props; // const {columns} = gridState; const locked = leftColConfig.filter(col => !col.hidden && !col.locked); const visible = leftColConfig.filter(col => !col.hidden && !col.locked); const hidden = leftColConfig.filter(col => col.hidden && !col.locked); return {visible, hidden, locked}; }

componentWillReceiveProps(props) { this.setState((this.getState(props)));

console.log(props+"clientselector props")

console.log(Object.keys(props))

}

moveRight = () => { let {visible, hidden} = this.state; hidden = hidden.filter(item => this.leftSelected.indexOf(item) === -1); visible = visible.concat(this.leftSelected); this.setState({hidden, visible}, this.getColumnsForGrid); }

moveLeft = () => { let {visible, hidden} = this.state; visible = visible.filter(item => this.rightSelected.indexOf(item) === -1); hidden = hidden.concat(this.rightSelected); this.setState({hidden, visible}, this.getColumnsForGrid); }

leftSelectionChange = (colArray) => { this.leftSelected = colArray; }

rightSelectionChange = (colArray) => { this.rightSelected = colArray; }

getColumnsForGrid = () => { //const {onChange} = this.props; let {visible, hidden} = this.state; const {locked} = this.state; const columns = hidden.map(x => {return {...x, hidden: true, index: -1};}).concat(locked).concat(visible.map((col, index) => { return {...col, hidden: false, index}; })); onChange=({...this.props, columns});

// remove selected flags
visible = visible.map(x => { return {...x, __state__: null}; });
hidden = hidden.map(x => { return {...x, __state__: null}; });
this.setState({visible, hidden});
this.rightSelected = [];
this.leftSelected = [];

}

open = () => { this.setState({ showModal: true }); }

  close = () => {
    this.setState({ showModal: false });
  }

  connectCallback = (actions) => {
        actions.loadList();
      }

render() { const {visible, hidden} = this.state;

return (

        <span>

          <Button  style={{display: 'inline-block', float: 'left', marginRight: 2}} title="Client Selection" onClick={this.open}> <Icon fa={['filter', 'lg']}/></Button>  
          <div>
          <ResizableModal
          show={this.state.showModal}
          onClose={this.close}  
          width={500}
          height={500}
          hasFooter={false}
          title='Select Clients'
          >
  <div style={{height: 400, width: '100%', padding: 20, position: 'relative'}}>
    <HorizontalLayout>
      <FlexPanel>

      <DynamicDataGrid
      keyFieldName="CLIENT_ID"
      columns={leftColConfig}
      componentId='clientSelect'
      dataIdf='25990703'
      gridConnectCallback={this.connectCallback}
      data={hidden}
      hasFooter={false}
      sort={[{sort: 'label', asc: true}]}
     // onRowDoubleClick={this.moveRight}
      onClickedChange={this.leftSelectionChange}
      noDataMessage={'No Active columns'}
      clearSelectionOnRefresh

      />
      </FlexPanel>
      <FixedPanel width={32} style={{paddingTop: 100}}>
        <ButtonGroup vertical>
          <Button onClick={this.moveRight}><Icon fa='caret-right' /></Button>
          <Button onClick={this.moveLeft}><Icon fa='caret-left' /></Button>
        </ButtonGroup>
      </FixedPanel>
      <FlexPanel>
        <DataGrid
          scale={1}
          keyFieldName='CLIENT_NAME'
          columns={rightColConfig}
          data={visible}
          hasFooter={false}
         // onRowDoubleClick={this.moveLeft}
          //onClickedChange={this.rightSelectionChange}
          noDataMessage={'No selected columns'}
          //onDragDrop={this.onDragDrop}
          clearSelectionOnRefresh
        />
      </FlexPanel>
    </HorizontalLayout>
    </div>
    </ResizableModal>
    </div>
  </span>
);

} }

[MetaFight]

You would really be helping yourself if you made it easier for people to read your code. Could you please add formatting?