Hello all! I have been trying to set up a combobox with a set of true, false values. I get an error upon clicking on the IgrComboBoxColumn cell that crashes the whole app.
index.js:1 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null.
Here is my code:
import { useAppDispatch, useAppSelector } from '../../hooks'; import { selectSelectedModel, updateItemAsync } from '../model/modelSlice'; import { EditModeType, IgrDataGrid, IgrGridCellValueChangingEventArgs, IgrGridDataCommittedEventArgs, IgrGridRowEditEndedEventArgs, IgrComboBoxColumn, IgrTextColumn, } from 'igniteui-react-grids'; import { selectSelectedParentId } from '../parent/parentSlice'; interface Props { dataSource: any[]; } export function DataGrid(props: Props) { const {dataSource} = props; const dispatch = useAppDispatch(); // Shortcut custom hook const selectedItem = useAppSelector(selectSelectedModel); const selectedParentId = useAppSelector(selectSelectedParentId); const booleanOptions = [{ value: 'true' }, { value: 'false' }]; const onCellValueChanging = ( grid: IgrDataGrid, e: IgrGridCellValueChangingEventArgs ) => { // TODO Remove this test code console.log('ELITEST onCellValueChanging', { grid, e }); //^ TODO Remove this test code if (e.newValue === '') { grid.setEditError(e.editID, 'Error, cell is empty'); } else { grid.acceptEdit(e.editID); } }; const onDataCommitting = ( grid: IgrDataGrid, e: IgrGridDataCommittedEventArgs ) => { // TODO Remove this test code console.log('ELITEST Data Committing', { grid, e }); //^ TODO Remove this test code const newItemAttributes = grid.props.dataSource; const newParentItem = { ...selectedItem, attributes: [...newItemAttributes], }; // Dispatch save event here dispatch( updateItemAsync({ parentId: selectedParentId, model: newParentItem as ParentItem }) ) }; const onRowEditEnded = (_: IgrDataGrid, e: IgrGridRowEditEndedEventArgs) => { dataSource.push(e.item); }; return ( <IgrDataGrid autoGenerateColumns='false' cellValueChanging={onCellValueChanging} dataCommitted={onDataCommitting} dataSource={dataSource} editMode={EditModeType.CellBatch} editOnKeyPress='true' isColumnOptionsEnabled='true' rowEditEnded={onRowEditEnded} > <IgrTextColumn field='attributeId' isHidden='true' /> <IgrTextColumn field='name' headerText='Name' /> <IgrTextColumn field='dimension' headerText='Dimension' /> <IgrTextColumn field='productLine' headerText='Product Line' /> <IgrComboBoxColumn dataSource={booleanOptions} field='isReadOnly' headerText='Read Only?' /> <IgrTextColumn field='sortOrder' headerText='Sort Order' /> <IgrTextColumn field='cellAddress' headerText='Cell Address' /> <IgrTextColumn field='toolTip' headerText='Tooltip' /> </IgrDataGrid> ); }
Is there something wrong with the shape of my datasource? Any help is appreciated!
Hello Eli,
Thank you for contacting Infragistics. If your underlying CombBoxField type is a Boolean, remove the quotes from "true" and "false".
Thank you! I have modified that data source and am still getting the same error. Any other ideas?