Under Review
Last Updated: 09 Feb 2022 13:45 by ADMIN
Aliaksandr
Created on: 04 Feb 2022 15:36
Type: Bug Report
0
KendoReact TreeList doesn't trigger changes in MobX-State-Tree model

Hello,

Our team is using MobX-State-Tree (MST) and KendoReact TreeList control with virtual scrolling enabled. According to documentation MST model stores data as an observable array (https://mobx-state-tree.js.org/API/#array and https://mobx.js.org/api.html#observablearray).

The MST model’s field ‘tree’ is not a regular array, but a LegacyObservableArray.

From UI standpoint: 

  • initially all tree nodes are collapsed

  • user clicks on i.e. 3rd tree node

  • selection is not displayed on any tree node (3rd node expected to be selected)

  • user expands 1st tree node - selection is set on the 3rd tree node

The following warning appears in the browser console. 

Warning: Failed prop type: Invalid prop `data` of type `object` supplied to `TreeList`, expected `array`.

    in TreeList (created by wrappedComponent)

    in wrappedComponent (created by wrappedComponent)

    in div (created by wrappedComponent)

    in div (created by wrappedComponent)

    in wrappedComponent

Model is defined as:

const TreeViewModel = types

    .model('TreeViewModel', {

        selectedItemUUID: types.maybe(types.string),

        tree: types.optional(types.array(TreeNodeModel), []),

        isLoaded: types.maybe(types.optional(types.boolean, false)),

        treeTypes: types.optional(types.array(TreeNodeTypeModel), []),

    })

    .views((self) => ({

        get treeCollection(): any {      

            return self.tree;

        },

    }))

Component is defined as:

        return (<>

            {!viewModel.isLoaded && loadingPanel}

            <div className='treeListContainer' ref={stageCanvasRef}>

                {treeListContainerHeight && <TreeList

                    style={{ maxHeight: `${treeListContainerHeight}px`, overflow: 'auto', }}

                    data={viewModel.treeCollection}

                    expandField={expandField}

                    subItemsField={subItemsField}

                    columns={columns}

                    selectedField={selectedField}

                    rowHeight={40}

                    scrollable="virtual"

                />}

            </div>

        </>);

The following workaround allows converting an observable array to a regular array.

    .views((self) => ({

        get treeCollection(): any {      

            return JSON.parse(JSON.stringify(self.tree));    // or self.tree.slice()

        },

    }))

This solution affects performance due to array copy. 

Besides this TreeList uses an array copy. User’s selection and expanding don’t trigger related changes in the initial observable array in the model.

Related event handlers (i.e. onSelectionChange, onExpandChange) should be extended to make appropriate changes in the MST model.

Can you please extend KendoReact controls to support observable arrays?

Is there a better solution?


3 comments
ADMIN
Filip
Posted on: 09 Feb 2022 13:45

Hi, Aliaksandr,

I opened the example and clicked on different nodes, but it seems that the component is working properly, the nodes expand, when I opened the console the mentioned warning did not appear. 

A possible solution would be to use MobX's toJS method specified in the docs, which recursively converts an observable object to a JavaScript object. It supports observable arrays, objects, Maps, and primitives.

I hope this helps.

Regards, FilipProgress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Aliaksandr
Posted on: 08 Feb 2022 13:56

Hello Filip, 

Please find stackblitz example below

https://stackblitz.com/edit/react-nzc6aj?file=app%2Fstore%2FTreeViewModel.ts

ADMIN
Filip
Posted on: 07 Feb 2022 13:42

Hello, Aliaksandr,

Thank you for reaching out to us. Can you please provide a working stackblitz example that reproduces this behavior so that we can inspect and assist further? Based on the received warning, one possible solution would be to check the type of data that is being passed to the Treelist, it should work if the data is an observable array.

Regards, FilipProgress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.