GridComponent's ColumnDirective is not changed by State.
<div className="data-log-chart-grid">
<GridComponent
ref={ref}
allowPaging={true}
allowSorting={true}
allowMultiSorting={true}
allowReordering={true}
dataSource={dataLogGridSrc}
sortSettings={sortSettings}
height="194"
allowExcelExport={true}>
<ColumnsDirective>
<ColumnDirective key={'DateTime'} field={'DateTime'} headerText={'DateTime'} textAlign={'center'} width="180" />
{dlItemMs.map((o) => (
<ColumnDirective key={o.ITEM_ID} field={`item-${o.ITEM_ID}`} headerText={o.ITEM_NM} textAlign={'center'} type="number" format="N3" width="180" />
))}
ColumnsDirective>
<Inject services={[Sort, Page, ExcelExport]} />
GridComponent>
div>
Component is as above, and the part that does not work as intended is ColumnDirective.
I updated dataLogGridSrc and dlItemMs and expected the Grid to change accordingly, but the data was not displayed.
In the above case, the column header was changed from Steam PT-11 to Vacuum PT-12, but the Grid was not changed. (The chart has been changed.)
Is there a solution to this? Thank you.
Syncfusion Grid version is "@syncfusion/ej2-react-grids": "^19.2.46",
SIGN IN To post a reply.
6 Replies
(ref.current.columnModel || []).forEach((col, idx) => {
if (idx === 0) return;
try {
const dlItemMsLength = dlItemMs.length;
if (idx - 1 > dlItemMsLength - 1) {
console.error('Grid index out of range compare to DataLog Item Master List!');
return;
}
const itemMsPair = dlItemMs[idx - 1];
const fieldNm = `item-${itemMsPair.ITEM_ID}`;
col.field = fieldNm;
col.foreignKeyField = fieldNm;
col.headerText = itemMsPair.ITEM_NM;
} catch (error) {
fetcher.simpleAlert('There was an error drawing Grid!');
console.error(error);
}
});
I found a temporary solution. ColumnDirective's prop found in the React developer tool was not reflected in GridComponent's column model. Therefore, I matched the values directly on the code first. After that, the refresh method was called to solve the problem.
SIGN IN To post a reply.
