Posted 30 March 2023, 3:49 am EST
Hi there,
I am trying to create a flex grid in React with one of the columns as a drop-down using Datamap, which is currently working fine. However, I am trying to prevent already-added items from appearing on a new row, essentially preventing the addition of the same item multiple times to the grid.
I have attempted to use DatamapFilter to achieve this, but it is not working. Could you please help? Below is the code I am currently using.
const costItemsMap = new DataMap(costItems, 'costId', 'prompt');
<FlexGrid initialized={initializeGrid} headersVisibility={'Column'} headerHeight={50}
itemsSource={costGridData}
itemFormatter={itemFormatter}
>
<FlexGridColumn header="Item" binding="costId" name="costId" dataMap={costItemsMap} width="3*" align="left"
dataMapFilter={(item: any) => costGridData.some((a) => a.costId != item.costId)}
/>
<FlexGridColumn header="Cost" binding="price" name="price" width="*" align="right" />
<FlexGridColumn header="Net" binding="markupPrice" name="markupPrice" width="*" align="right" />
<FlexGridColumn header="M/U%" binding="markup" name="markup" width="*" align="center" />
<FlexGridColumn header=" " binding="option" name="option" width=".5*" align="center" isReadOnly={true}>
<FlexGridCellTemplate cellType="Cell" template={(context: any) => {
return !(context.item.isEditable) ? <div>
<span style={{ verticalAlign: "middle" }} onClick={(e) => deleteCostItem(context.item.costId)} className="material-symbols-outlined">delete</span>
</div>:""
}} />
</FlexGridColumn>
</FlexGrid>
