Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
How do you wire up the IgrComboBoxColumn data for true/false?
posted

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.

IgrComboBoxColumn

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!

Parents Reply Children
No Data