1. Home
  2. Forum
  3. React - EJ 2
  4. Re-render grid component

Re-render grid component

Hi, 

I'm currently using a grid component within a dashboard panel. My datasource for grid component takes data from an array, and when an item is selected from the grid, it'll be removed from the array. However, when the array got updated with this.setState({ arrList : newArrList }), the grid component still did not re-render with the updated array. I've attempted this.grid.refresh() too and the grid still did not re-render with the updated array. How do i re-render the Grid Component with the updated array



5 Replies
BS Balaji Sekar Syncfusion Team March 6, 2020 11:58 AM UTC

Hi Koh, 

Greetings from the Syncfusion support, 

We have validated your query with provided the information and we are unable to reproduced that problem in our end. In below code example, we have bound the array value in the Grid dataSource property which is React state property. Grid dataSource is refresh while change the external button click action. It is set the state property using setState method. Please refer the code example and sample for more information. 
[index.js] 
btnClick(args){     
    this.setState({ 
      localData: [{OrderID: 10248, CustomerID: "HANAR",Freight: 65.83,ShipCity: "Rio de Janeiro"}]       
      }) 
     
  } 
    render() { 
        return (<div className='control-pane'> 
                <div className='control-section'> 
                <button onClick={this.btnClick.bind(this)}>Refresh state</button> 
                    <GridComponent dataSource={this.state.localData} allowPaging={true} pageSettings={{ pageCount: 5 }}> 
                        <ColumnsDirective> 
                        .        .        .         . 
                        </ColumnsDirective> 
                        <Inject services={[Page]}/> 
                    </GridComponent> 
                </div> 
            </div>); 
    } 



Regards, 
Balaji Sekar. 


KC Koh Chee Kiong March 9, 2020 03:02 AM UTC

The grid component have no problem re-rendering by itself, but the problem only occurs when it is a content of a PanelDirective wrapped inside a DashboardLayoutComponent. Following is an example of the code.

btnClick(args){     
    this.setState({ 
      localData: [{OrderID: 10248, CustomerID: "HANAR",Freight: 65.83,ShipCity: "Rio de Janeiro"}]       
      }) 
     
  }

gridComponent() {
     return(
                <button onClick={this.btnClick.bind(this)}>Refresh state</button> 
                    <GridComponent dataSource={this.state.localData} allowPaging={true} pageSettings={{ pageCount: 5 }}> 
                        <ColumnsDirective> 
                        .        .        .         . 
                        </ColumnsDirective> 
                        <Inject services={[Page]}/> 
                    </GridComponent> 
                </div> 
            </div>
     )
}

render() { 
     return(
          <div className='control-pane'> 
              <div className='control-section'> 
                    <DashboardLayoutComponent dataSource={this.state}>
                         <PanelsDirective>
                              <PanelDirective content={this.gridComponent.bind(this)} />
                      .        .        .         . 
                         </PanelsDirective>
                    </DashboardLayoutComponent>
              </div> 
         </div>
     )
}

BS Balaji Sekar Syncfusion Team March 11, 2020 12:54 PM UTC

Hi Koh, 

We have checked your reported query. Currently, we have not provided support achieving state property accessing child component (Grid) from the Syncfusion DashboardLayout component. We have consider this as a feature from our end . It will be included in our any of our upcoming releases. Generally, we will plan the feature implementation based on feature rank, Wishlist plan and customer request count for some feature.  
  
Please track the below link for feature status.  
  
To resolve your issue, you can directly update the GridComponent datasource. Refer the below sample link.  


Please let us know, if you have any concerns.  

Regards,   
Balaji Sekar. 



KC Koh Chee Kiong March 16, 2020 06:01 AM UTC

Hi Balaji,

This works, thank you for your help!

BS Balaji Sekar Syncfusion Team March 16, 2020 09:48 AM UTC

Hi Koh, 
  
We glad that your issue has been fixed.  
  
Please get back to us if you require further other assistance from us. 
  
Regards, 
Balaji Sekar. 


Loader.
Up arrow icon