slickGrid is null?

[ryanhamilton]

slickGrid is null?

I'm using this package within react. I can construct and create the grid fine:

        sgb1.current = new Slicker.GridBundle(e1, columnDefinitions1, gridOptions1, dataset1);

Which makes it visible. I can even update the data using:

    const dv = sgb1.current.dataView;
      dv.beginUpdate();
      dv.setItems(props.srs.rsdata.tbl.data.map((e,i) => {e['id'] = n - i; return e}));

The part I am finding strange in comparison to your examples is that sgb1.current.slickGrid is undefined?
I'm attempting to later use sgb1.current.slickGrid to call sgb1.current.slickGrid.setColumns() but since it's undefined I can't.

Is slickGrid not initialised or is there an extra step to force it to happen?

Env:

    "@slickgrid-universal/common": "^1.3.0",
    "@slickgrid-universal/text-export": "^1.3.0",
    "@slickgrid-universal/vanilla-bundle": "^1.3.0",
    "react": "^18.1.0",
    "typescript": "^4.7.3",

[ghiscoding]

Hi, I'm afraid I can't help you much since I have never used React, however you can maybe take a look at another project started by other developers, take a look at Slickgrid-React

[ryanhamilton]

Thanks for the quick reply.

That doesn't look the most useful as I want to keep updating an existing grid, that component seems to only take the data as an argument. I am able to run your examples with predefined data and columns fine.

I actually think I can demonstrate the problem aside from react.
When I call setColumns() I get this error:

slick.grid.js:1858 
               Uncaught TypeError: Cannot read properties of null (reading 'hide')
    at setPaneVisibility (slick.grid.js:1858:1)
    at SlickGrid.setColumns (slick.grid.js:2968:1)
    at DGrid (BGrid.tsx:240:1)
    at renderWithHooks (react-dom.development.js:16186:1)
    at updateFunctionComponent (react-dom.development.js:20303:1)
    at beginWork (react-dom.development.js:22277:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4110:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4159:1)
    at invokeGuardedCallback (react-dom.development.js:4221:1)
    at beginWork$1 (react-dom.development.js:27188:1)

The general structure of my code is:

startup:             gridBundleRef.current = new Slicker.GridBundle(e1, [], options, []);
shutdown:        gridBundleRef.current?.dispose();

update:

if(columnsChanged) {  gridRef.current.setColumns(columns); }
   const dv = dataViewRef.current;
      dv.beginUpdate();
      dv.setItems(props.srs.rsdata.tbl.data.map((e,i) => {e['id'] = n - i; return e}));
      dv.endUpdate();
      dv.refresh();
      gridRef.current.invalidate();

I used this same pattern with slickgrid-es6 and it worked. I gave up on using that as it didn't support the plugins I wanted.

If you have any ideas or can suggest where to find examples of updating data/columns it would be greatly appreciated.
THanks,
Ryan

[ghiscoding]

The slickGrid object might not be available right away, you can use either onGridCreated or onSlickerGridCreated events to get it after it's created and available (see Events - Wiki. For adding/removing columns is shown in this Example 7

You seem to be mixing code from this project's vanilla grid bundle while also using SlickGrid/DataView directly, you will probably face a few issues by doing that. I'm saying this because I see you're using Slicker.GridBundle which is great but then you're using the SlickGrid and DataView directly and by doing so you're basically bypassing Slickgrid-Universal's code and you'll for sure encounter problems (out of sync issues and others). I would suggest to use only Slickgrid-Universal Grid Bundle and when that is the case then if you want to change the dataset after the fact then use it this way this.sgb.dataset = [...], the lib will update the DataView itself and will also sync every other pieces that might need to be sync (ie ColumnPicker, GridMenu, etc...)

[ryanhamilton]

Thanks, that is exactly the kind of advice I was hoping for. I will give it a try.

[ghiscoding]

@ryanhamilton I just released an official port for React, you can visit Slickgrid-React github page and also a Live Demo 🚀