FlexGrid ImmutabilityProvider

FlexGrid ImmutabilityProvider

Posted by: tdnooij on 18 July 2024, 12:56 pm EST

• 

  tdnooij

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 18 July 2024, 12:56 pm EST - Updated 18 July 2024, 1:02 pm EST

  Hi I have problem with ImmutabilityProvider.
  
  First:
  
  example in the Demo doesnt work properly(see the image):
  
  It updates only first typed value. The rest of the flexgrid changes are not represented in the second grid.

  And now my implementation:
  
  Stack: I am using redux-toolkit
  
  my state is nested with multiple flexgrids, so
  
  my flexgrid itself looks like

  <div className="container-fluid">
          <wjcGrid.FlexGrid
            itemsSource={viewComponent?.table?.data?.dataSource}
            allowMerging="AllHeaders"
            headersVisibility={headersVisibility}
          >
            <ImmutabilityProvider itemsSource={viewComponent?.table?.data?.dataSource} dataChanged={onGridDataChanged}/>
            {viewComponent?.table?.data?.dataSource?.length > 0 &&
              Object.keys(viewComponent?.table?.data?.dataSource[0])
                .filter(key => key.startsWith('col_'))
                .map((col, index) => {
                  const colProps = columnsProps[index];
                  const dataType = colProps?.dataType;
                  return (
                    <wjcGrid.FlexGridColumn
                      key={index}
                      binding={`${col}.value`}
                      header={''}
                      allowMerging={true}
                      dataType={dataType}
                    />
                  );
                })}
          </wjcGrid.FlexGrid>
        </div>

  
  
  onGrid changed

   const onGridDataChanged = useEvent((s, e) => {
      switch (e.action) {
          case wjcGridImmutable.DataChangeAction.Change:{
              dispatch(editCell({ newItem: e.newItem || {}, oldItem: e.oldItem, row: e.itemIndex,  id: viewComponent.id }));
            break;
            }
          default:
              throw 'Unknown data action';
      }
  });
  

  my reducer:

  reducers: {
      editCell: (state, action: PayloadAction<{ newItem: {}; oldItem1: {}; row: number;  id: string }>) => {
        const { newItem, row, id} = action.payload;
    
        const viewComponent = state.viewComponents.find(vc => vc.id === id);
        if (viewComponent && isTableViewComponent(viewComponent)) {
          const items = viewComponent.table.data.dataSource;
          const index = row;
          const oldItem = items[index];
          
          const clonedItem = Object.freeze(copyObject({}, oldItem, newItem));
    
          const newDataSource = [
            ...items.slice(0, index),
            clonedItem,
            ...items.slice(index + 1),
          ];
    
          const updatedViewComponent = copyObject({}, viewComponent, {
            table: copyObject({}, viewComponent.table, {
              data: copyObject({}, viewComponent.table.data, {
                dataSource: newDataSource
              })
            })
          });
    
          return {
            ...state,
            viewComponents: state.viewComponents.map(vc => 
              vc.id=== id ? updatedViewComponent : vc
            )
          };
        }
    
        return state;
      },
    },

  The problem is that most of the time when I am returning new state (95% of the edits) I am getting error
  
  Uncaught Positive number expected. (see the second image)

  Not sure whats causing it.
  
  Greetings

  

  2539×1267 351 KB

  

  2539×1267 351 KB

  

  

  692×142 4.95 KB

  

  869×255 21.7 KB

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 22 July 2024, 5:35 am EST

  Hi,

  After observing the shared code snippets, it seems there is an implementation issue in the code you shared. The itemsSource should be assigned to the Immutabilityprovider component only and not to the flexgrid, which seems to be causing this issue. You can read more about it here https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid_Immutable.Immutabilityprovider.html#itemssource

  <wjcGrid.FlexGrid
          allowMerging="AllHeaders"
        >
         <ImmutabilityProvider itemsSource={viewComponent.table.data.dataSource} dataChanged={onGridDataChanged} />

  Regarding the Demo on the website, thank you for bringing our notice we have escalated the issue to the concerned team. To run the demo successfully, you should remove the useEvent hook that is attached to the handler for dataChanged event of ImmutabilityProvider.

  const onGridDataChanged = (s, e) => {
          switch (e.action) {
              case wjcGridImmutable.DataChangeAction.Add:
                  props.addItemAction(e.newItem);
                  break;
              case wjcGridImmutable.DataChangeAction.Remove:
                  props.removeItemAction(e.newItem, e.itemIndex);
                  break;
              case wjcGridImmutable.DataChangeAction.Change:
                  props.changeItemAction(e.newItem, e.itemIndex);
                  break;
              default:
                  throw 'Unknown data action';
          }
      };
  // rest of the code
  <ImmutabilityProvider itemsSource={props.items} dataChanged={onGridDataChanged}/>

  Please find attached an updated sample for the same.

  In case you need further assistance do reach out to us.

  Thanks and Regards

  Grid_Data-binding_ImmutableData_Redux_EditableReduxGrid_React.zip