React gridComponent dont refresh when using ColumnDirective template property.

[felipe]

After I manually fetch the data from the server, I construct the array for populate de gridComponent. Without using a ColumnDirective template property, the grid refresh every time I change the data (for example, I have a button for change the range of the data - using useState(), another example is when I manually change the data in the server). Until here, no problem. But when I implement a column with a template, refreshing stop working. I need to unmount and then mount the component to see the changes.

Without template

<GridComponent

dataSource={gridData}

height="100%"

width="100%"

ref={grid => gridInstance.current = grid}

toolbar={toolbarOptions}

allowExcelExport={true}

allowPdfExport={true}

allowResizing={true}

allowReordering={true}

toolbarClick={toolbarClick}

cellSelecting={selectHandler}

selectionSettings={selectionSettings}

gridLines='Vertical'

>

<ColumnsDirective>

<ColumnDirective field="paciente" headerText="Paciente" width="200" textAlign="Left" />

<ColumnDirective field="pacienteEmail" headerText="Email" width="250" textAlign="Left" />

<ColumnDirective field="status" headerText="Status" width="250" textAlign="Left" />

</ColumnsDirective>

<Inject services={[Toolbar, ExcelExport, PdfExport, Resize, Reorder]}/>

</GridComponent>

Using Template

const statusTemplate = (props) => {

return (

<StatusContainer status={props.status}>

<span>{props.status}</span>

</StatusContainer>

)}

return (

<GridComponent

dataSource={gridData}

height="100%"

width="100%"

ref={grid => gridInstance.current = grid}

toolbar={toolbarOptions}

allowExcelExport={true}

allowPdfExport={true}

allowResizing={true}

allowReordering={true}

toolbarClick={toolbarClick}

cellSelecting={selectHandler}

selectionSettings={selectionSettings}

gridLines='Vertical'

>

<ColumnsDirective>

<ColumnDirective field="paciente" headerText="Paciente" width="200" textAlign="Left" />

<ColumnDirective field="pacienteEmail" headerText="Email" width="250" textAlign="Left" />

<ColumnDirective field="status" headerText="Status" template={statusTemplate}/>

</ColumnsDirective>

<Inject services={[Toolbar, ExcelExport, PdfExport, Resize, Reorder]}/>

</GridComponent>

)

[Joseph Christ Nithin Issack]

Hi Felipe,

  Greetings from Syncfusion support.

  Based on the provided information we suspect you are trying to change the datasource of the grid using a state property. When we rendered the React component inside the grid component can be refreshed only by using the instance of the Grid by calling the method `grid.refresh`. Otherwise, the React component(using state property) of the grid won’t be refreshed, hence it will not be able to identify the updated state variables. Hence, we suggested you to use the typescript way to define the columns using the `grid.columns` property instead of using the `ColumnDerivative` tag .

Please get back to us for further details.

Regards,

Joseph I.