SlickgridReact customDataView is not assigned to this.dataView during initialization

[aasimkhan30]

Describe the bug

When SlickgridReact is initialized with a customDataView prop, the component passes that custom DataView to new SlickGrid(...), but it does not assign it to the component's internal this.dataView.

In frameworks/slickgrid-react/src/components/slickgrid-react.tsx, this.dataView is only assigned inside:

if (!this.props.customDataView) {
  this.dataView = new SlickDataView(...)
}

but later in the same initialization() method, the code still uses this.dataView:

if (typeof (this.dataView as SlickDataView).setGrid === 'function') {
  this.dataView.setGrid(this.grid);
}
this.sharedService.dataView = this.dataView;
this.bindDifferentHooks(this.grid, this._options, this.dataView);

This means this.dataView can be undefined when customDataView is supplied, causing initialization to fail or leaving sharedService.dataView / instances.dataView unset.

Reproduction

Use SlickgridReact with a supplied customDataView:

<SlickgridReact
  gridId="grid1"
  columns={columns}
  dataset={[]}
  options={gridOptions}
  customDataView={customDataView}
/>

During initialization(), customDataView is passed to new SlickGrid(...), but this.dataView is never assigned because the assignment only happens in the if (!this.props.customDataView) branch.

Current source reference:

• frameworks/slickgrid-react/src/components/slickgrid-react.tsx
• initialization()
• customDataView branch around lines 484-529 in commit ba7a129f1

Which Framework are you using?

React

Expected behavior

When customDataView is provided, SlickgridReact should use it consistently as the internal DataView reference, e.g. assign:

this.dataView = this.props.customDataView;

before creating the SlickGrid or before any internal this.dataView access.

Actual behavior

customDataView is passed to new SlickGrid(...), but this.dataView remains unset because the internal assignment only happens in the non-custom DataView branch.

Suggested fix

Assign the custom DataView to the internal field when provided:

if (this.props.customDataView) {
  this.dataView = this.props.customDataView;
} else {
  const dataviewInlineFilters = (this._options.dataView && this._options.dataView.inlineFilters) || false;
  let dataViewOptions: Partial<DataViewOption> = { ...this._options.dataView, inlineFilters: dataviewInlineFilters };
  ...
  this.dataView = new SlickDataView<TData>(dataViewOptions as Partial<DataViewOption>, this._eventPubSubService);
  this._eventPubSubService.publish('onDataviewCreated', this.dataView);
}

This keeps later internal references (setGrid, sharedService.dataView, bindDifferentHooks, SlickgridReactInstance.dataView) consistent for both internal and custom DataView cases.

Environment Info

| Executable          | Version |
| ------------------- | ------- |
| Framework used      | React / Slickgrid-React |
| Slickgrid-Universal | master, commit ba7a129f1 |
| TypeScript          | N/A |
| Browser(s)          | N/A |
| System OS           | N/A |

Validations

• Follow our Code of Conduct
• Read the Wikis.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal source-level reproduction of the bug.

[ghiscoding]

@aasimkhan30 so I wonder what's the reason that you're using a Custom DataView and not the built-in SlickDataView in that main MSSQL grid? I pretty much built my entire project and wrappers around the SlickDataView and yes I can make the change you proposed above but I wonder if you're not going to find other issues in the future because I don't have any tests around Custom DataView

if I create a new Slickgrid-React example, then how do you initialize the custom dataset? is it via the dataset prop or do you load it later via dataView.setData() or something similar? Creating a new example would help in at least testing it with Cypress E2E tests for minimal testing setup

[ghiscoding]

@aasimkhan30 so I'm trying to make the change as you mentioned but I got a lot of typing errors because the CustomDataView interface that I added is pretty basic and is missing a lot of the functions from the SlickDataView

export interface CustomDataView<T = any> {
  getItem: (index: number) => T;
  getItemMetadata(row: number, cell?: boolean | number): ItemMetadata | null;
  getLength: () => number;
}

so I wonder, which functions do you have? I could modify the interface and add all functions to the CustomDataView, but is it really what you have though? Because I have a bunch of issues in Slickgrid-React but also elsewhere like the assignment to the SharedService DataView. I guess I could cast it as any but if you're missing a few of these functions, then it might give you problem further down the line.

So what would be your suggestions?

[aasimkhan30]

@ghiscoding , Our custom DataView is a virtual/windowed DataView.

At a high level, it does two things:

1. For normal scrolling, it lazy-loads rows around the current viewport. It keeps a small moving set of windows/pages before/within/after the visible range and repositions those as the user scrolls. It evicts the pages that are outside.
2. For sort/filter, our controller first checks an in-memory threshold, currently defaulting to 5,000 rows. If the grid data is within that threshold, we fetch all rows, apply the transformation, and then serve those transformed rows through the DataView. If it exceeds the threshold, we reject the sort/filter operations

For the types, maybe the CustomDataview can be something like this.

export interface CustomDataView<T = any> {
  getItem(index: number): T;
  getItemMetadata(row: number, cell?: boolean | number): ItemMetadata | null;
  getLength(): number;

  getItemCount?: () => number;
  getFilteredItemCount?: () => number;
  getItems?: () => T[];

  setGrid?: (grid: SlickGrid) => void;
  refresh?: (...args: any[]) => void;
  destroy?: () => void;
  dispose?: () => void;

  onRowCountChanged?: SlickEvent;
  onRowsChanged?: SlickEvent;
  onSelectedRowIdsChanged?: SlickEvent;
  onSetItemsCalled?: SlickEvent;
}

We also have some app-specific methods like getRangeAsync, getLoadedRange, setLength, and setRows, but I would not expect Slickgrid-Universal to depend on those.