CODEWITHSUNDEEP
javascriptreactjsreact-data-grid
Vano
Vano

Reputation: 1538

add custom prop to Component instance(not via parent) - react-data-grid

Just to provide broader context - My eventual goal is to enhance editable Cell with "synced" icon if synced with back-end.

I went on trying to add custom prop to a specific editable Cell, to indicate syncedWithBackEnd = true/false, then have custom Formatter to conditionally add style (if sync with DB prop is true).

The issue is,
I'm failing to deliver this custom prop to the Cell instance

Tried so far:

  1. Provide callback to Formatter and call it from outside. Didn't find way to call the function on Formatter instance(attached to specific cell)

  2. Set the prop as part of handleRowUpdated logic. Setting the custom prop but it's not reaching the Cell:

    var rows = this.getRows(); ... // e.updated.customProp = "whatever" ---> fails to reach Cell Object.assign(rows[e.rowIdx], e.updated); this.setState({rows: rows});

Any ideas on how to achieve this?
Or maybe there is some obvious way to reach the eventual goal that I've completely missed (must mention I'm new to React and pretty new to js in general).

Upvotes: 4

Views: 832

Answers (1)

user2052618
user2052618

Reputation: 616

when the actual sync happens (prior to wanting to update your custom cell) i assume it is done with a callback? if so, then your callback that did the remote ajax call to update the value could then update the this.state.rows.customProp (this.state.rows.whatever.customProp) and once the state has changed and assuming your getRows() is getting from this.state.rows then it will all automatically happen. worse case you may have to add a call to this.forceupdate() after you change the state value. this is based on something i have that sounds similar and works...

//column data inside constructor (could be a const outside component as well)
this.columnData = [
{
  key: whatever,
  name: whatever,
  ...
  formatter: (props)=>(<div className={props.dependentValues.isSynced? "green-bg" : "")} onClick={(evt)=>this.clickedToggleButton} >{props.value}</div>),
  getRowMetaData: (data)=>(data),
},
...

}
]

this is a callback function in my data-grid wrapper component...

   //when a span
    clickedToggleButton(evt, props){
      //do remote ajax call we have an ajax wrapper util we created so pseudo code...
      MyUtil.call(url, params, callback: (response)=>{
         if(this.response.success){
           let rows = this.state.rows;
           let isFound = false;
           for(let obj of rows){
             if(obj.id==props.changedId){
               obj.isSynced = true;
               isFound = true;
               break;
             }
           }
           //not sure if this is needed or not...
           if(isFound){ this.forceUpdate(); }
         }
       } 
    }

not sure if this helps but may get your started

Upvotes: 1

Related Questions