How will i reset the cellMeta of one table into another table?

Tags: #<Tag:0x00007efc6d8b03b0>
#1

import React, { Component } from ‘react’;
import MuiThemeProvider from ‘material-ui/styles/MuiThemeProvider’;
import ReactDOM from ‘react-dom’;
import { HotTable } from ‘@handsontable/react’;
import Handsontable from ‘handsontable’;
import Styles from ‘./style.scss’;

class NewEventList extends Component {

constructor(props) {
    super(props);
    this.state = {
        cellMeta:[],
        data:[],
        hotSett: {
            disableVisualSelection: true,
            colHeaders: true,
            autoRowSize: true,
            manualColumnResize: true,
            contextMenu: {
                items: {
                    row_above: {
                        name: 'Insert row above this one (custom name)'
                    },
                    row_below: {},
                    separator: Handsontable.plugins.ContextMenu.SEPARATOR,
                    clear_AddText: {
                        name: 'Add text',
                        callback: function(key, options) {
                            let cellprop = {}
                            cellprop.readOnly = false
                            this.updateSettings(cellprop);
                            this.render();
                        }
                    },
                    clear_Image: {
                        name: 'Add Image',
                        callback: this.handleImage
                    },
                    clear_AddButton: {
                        name: 'Add Button',
                        callback: this.handleButton
                    },
                    clear_custom: {
                        name: 'Clear all cells (custom)',
                        callback: function() {
                            this.clear();
                        }
                    }
                }
            }
        },
        hotSett1: {
            readOnly:true,
            disableVisualSelection: true,
            colHeaders: true,
            autoRowSize: true,
            manualColumnResize: true,
            columns:[ {
                renderer: function(instance, td, row, col, prop, value, cellProperties) {
                    const escaped = Handsontable.helper.stringify(value);
                    let img = null;
           
                    let meta = instance.getCellMeta(row, col);
                    if (meta){
                        console.log("META",meta);
                        return meta.td

                    }

                    if (cellProperties && cellProperties.myType === 'button'){
                        let button = null;
                        button = document.createElement('button');
                        button.value = value 
                        td.appendChild(button);
                            return td;
                    }
                    if (escaped.indexOf('http') === 0) {
                      img = document.createElement('IMG');
                      img.src = value;
      
                      Handsontable.dom.addEvent(img, 'mousedown', function(event) {
                        event.preventDefault();
                      });
      
                      Handsontable.dom.empty(td);
                      td.appendChild(img);
                    }
                    else {
                      Handsontable.renderers.TextRenderer.apply(this, arguments);
                    }
      
                    return td;
                  }

            },
                {
                  renderer: function(instance, td, row, col, prop, value, cellProperties) {
                    const escaped = Handsontable.helper.stringify(value);
                    let img = null;
                    
                    let meta = instance.getCellMeta(row, col);
                    if (meta){
                        console.log("META",meta);
                    }

                    if (cellProperties && cellProperties.myType === 'button'){
                        let button = null;
                        button = document.createElement('button');
                        button.value = value 
                        td.appendChild(button);
                            return td;
                    }


                    if (escaped.indexOf('http') === 0) {
                      img = document.createElement('IMG');
                      img.src = value;
      
                      Handsontable.dom.addEvent(img, 'mousedown', function(event) {
                        event.preventDefault();
                      });
      
                      Handsontable.dom.empty(td);
                      td.appendChild(img);
                    }
                    else {
                      Handsontable.renderers.TextRenderer.apply(this, arguments);
                    }
      
                    return td;
                  }
                },{
                    renderer: function(instance, td, row, col, prop, value, cellProperties) {
                        const escaped = Handsontable.helper.stringify(value);
                        let img = null;
                        let meta = instance.getCellMeta(row, col);
                        if (meta){
                            console.log("META",meta);
                        }
                        if (cellProperties && cellProperties.myType === 'button'){
                            console.log("cellProperties**TABLE3",cellProperties)
                            let button = null;
                            button = document.createElement('button');
                            button.value = value 
                            td.appendChild(button);
                                return td;
                        }

                                                    if (escaped.indexOf('http') === 0) {
                          img = document.createElement('IMG');
                          img.src = value;
          
                          Handsontable.dom.addEvent(img, 'mousedown', function(event) {
                            event.preventDefault();
                          });
          
                          Handsontable.dom.empty(td);
                          td.appendChild(img);
                        }
                        else {
                          Handsontable.renderers.TextRenderer.apply(this, arguments);
                        }
          
                        return td;
                      }

                }]
        }
    };
    this.hotTableComponent = React.createRef();
    this.hotTableComponent1 = React.createRef();

}

componentDidMount = props => {
};

componentWillReceiveProps = nextProps => {
};

//HOT HOOKS
afterChange = (changes, source) => {
    const params = {};
    params.readOnly = true;
    this.hotTableComponent.current.hotInstance.updateSettings(params);
};

afterUpdateSettings = newSettings => {
};

afterSetCellMeta = (row,col,key,value) => {
    console.log('HOOK***afterSetCellMeta', row,col,key,value);
    // this.hotTableComponent1.current.hotInstance.render()
}

//CUSTOM RENDERERS
handleImage = (key, options) => {
    const newThis = { ...this };

    const props = {};
    props.readOnly = true;
    newThis.hotTableComponent.current.hotInstance.updateSettings(props);
    newThis.hotTableComponent.current.hotInstance.setCellMeta(
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[0],
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[1],
        'renderer',
        this.myImage
    );
    newThis.hotTableComponent.current.hotInstance.setCellMeta(
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[0],
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[1],
        'myCustomStyles',
        { myType:"image",fontsize: '12px', left: '200px', top: '100px' }
    );

    newThis.hotTableComponent.current.hotInstance.setDataAtCell(
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[0],
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[1],
        'http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL50_.jpg'
    )

    //URL
    newThis.hotTableComponent.current.hotInstance.readOnly = true;
    newThis.hotTableComponent.current.hotInstance.render();
};

handleButton = (key, options) => {
    const newThis = { ...this };

    const props = {};
    props.readOnly = true;

    newThis.hotTableComponent.current.hotInstance.updateSettings(props);

    newThis.hotTableComponent.current.hotInstance.setCellMeta(
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[0],
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[1],
        'renderer',
        this.mybutton
    );
    
    newThis.hotTableComponent.current.hotInstance.setCellMeta(
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[0],
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[1],
        'myCustomStyles',
        { myType:"button",fontsize: '12px', left: '200px', top: '100px' }
    );

    newThis.hotTableComponent.current.hotInstance.setCellMeta(
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[0],
        newThis.hotTableComponent.current.hotInstance.getSelectedLast()[1],
        'type',
        {'type':"button"}
    )

    //URL
    newThis.hotTableComponent.current.hotInstance.readOnly = true;
    newThis.hotTableComponent.current.hotInstance.render();
};

mybutton(instance, td, row, col, prop, value, cellProperties) {
    td.style.verticalAlign = 'middle';
    td.style.textAlign = 'center';
    td.innerHTML = `<button class="btn btn-warning" style="background:red;width:100%; height:90%;" onclick="myFunction(${row}, ${col}, 'onclick')">${value ||
        'Button'}</button>`;
}

myImage(instance, td, row, col, prop, value, cellProperties) {
    td.style.verticalAlign = 'middle';
    td.style.textAlign = 'center';
    td.innerHTML = `<img class="btn btn-warning" src = ${'http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL50_.jpg'} style="background:yellow;width:100%; height:90%;" onclick="myFunction(${row}, ${col}, 'onclick')"/>`;
    
}

// BUTTON ACTIONS
swapHotData() {
    const prams = {};
    prams.data = [[2, 3, 4], [2, 3, 4]];
    prams.readOnly = true;
    prams.renderer = 'text';
    this.hotTableComponent.current.hotInstance.updateSettings(prams);
    this.hotTableComponent.current.hotInstance.addHook('afterChange', this.afterChange);
    this.hotTableComponent.current.hotInstance.addHook('afterUpdateSettings', this.afterUpdateSettings);
    this.hotTableComponent1.current.hotInstance.addHook('afterSetCellMeta', this.afterSetCellMeta);

    
}

getHotData() {
    let data = this.hotTableComponent.current.hotInstance.getData()
    let cellMeta = this.hotTableComponent.current.hotInstance.getCellsMeta()
    cellMeta.forEach((element ) => {
        this.hotTableComponent1.current.hotInstance.setCellMeta(element.row, element.col, 'myCustomStyles',element)
      });
      this.hotTableComponent1.current.hotInstance.loadData(data)
    this.setState({data:data,cellMeta:cellMeta})
}

render() {
    return (
        <div>
            <HotTable ref={this.hotTableComponent} settings={this.state.hotSett} />
            <br/>
            <button onClick={this.swapHotData.bind(this)}>Set DETAILS</button>
            <br/>
            <button onClick={this.getHotData.bind(this)}>GET DETAILS</button>
            <br/>
            <text>{this.state.data}</text>
           <HotTable ref={this.hotTableComponent1} settings={this.state.hotSett1} />

        </div>
    );
}

}
export default NewEventList;

#2

STEP 1 I have initialsed the data in swapHotData in ref table hotTableComponent
STEP 2 I tried to set some changes in table 1 using context menu in hotSett which is in . state
STEP 3 I added some elements in TD tag using renderer of my own
STEP 4 I tried to takeout the arrray of data and cell meta on getHotData button action

PROBLEM : There is something wrong as i am n ot able to set cellMeta of first table into secobd table

#3

Hey @agrim.anand

to be honest I do not understand what is happening in this example. Please share the code in a form that can be debuggable (.zip/ StackBlitz) and tell me what actions should I take to replicate the issue.

#4