Error unchecking TreeView node, when another is already checked

Posted by: dharric on 6 September 2018, 11:30 am EST

    • Post Options:
    • Link

    Posted 6 September 2018, 11:30 am EST - Updated 3 October 2022, 8:22 pm EST

    I have a TreeView which generally works well However when I have one node already selected and then try and select another node I get the exception shown in the screenshot. The exception refers to function checkedItemsChanged. However the issue may also be related to function itemChecked, which is unchecking already checked nodes when a new one is checked (I got this function off of your forums from a wijmo moderator https://www.grapecity.com/en/forums/wijmo/how-to-select-only-one-gro)

    I am running wijmo 5.20182.500 and have the code shown below using a TreeView. Also I am running React version 16.4.2.

    checkedItemsChanged = (s, e) => {
            const self = this;
            const currentItem = this.reportsTreeView.selectedItem;
    
            if (currentItem.report) {
                if (currentItem.report === 'MarketingMaterials') {
                    const selectedReport = "MarketingMaterial";
                    self.setState({ selectedReport });
                } else if (currentItem.report === 'DataPak') {
                    const selectedReport = "DataPak";
                    self.setState({ selectedReport });
                }
            }
        }
    
        itemChecked = (s, e) => {
            s.deferUpdate(() => {
                let clickedParentNode = e.node;
                let parentLevels = [];
                while (clickedParentNode.parentNode) {
                    parentLevels.push(clickedParentNode.parentNode);
                    clickedParentNode = clickedParentNode.parentNode;
                }
                if (!parentLevels.length) {
                    parentLevels.push(e.node);
                }
                parentLevels.forEach(levelNode => {
                    let parentNode;
                    if (levelNode.parentNode) {
                        parentNode = levelNode.parentNode;
                    }
                    if (!parentNode) {
                        parentNode = s;
                    }
                    parentNode.nodes.forEach(cur => {
                        if (cur.element != levelNode.element) {
                            cur.setChecked(false);
                        }
                    });
                });
            });
        }
    
    <TreeView
                                    initialized={this.reportsTreeViewInitialized}
                                    itemsSource={this.reportsTreeViewItems}
                                    displayMemberPath={'header'}
                                    childItemsPath={'items'}
                                    showCheckboxes={Boolean(true)}
                                    formatItem={this.formatItem}
                                    checkedItemsChanged={this.checkedItemsChanged}
                                    isCheckedChanged={this.itemChecked}
                                />
    
    

  • Posted 6 September 2018, 11:34 am EST

    The error appears to be happening in React, but I believe the real error is happening in wijmo and it is being swallowed and then propagating to React. Please look at this link from Abramov of the React team, https://github.com/facebook/react/issues/6895#issuecomment-281405036

  • Posted 7 September 2018, 7:30 am EST

    Hi,

    We are unable to replicate the issue at our end. We created a sample with the code snippet provided and everything seems to be working fine.

    Please have a look at the sample we tried and let us know if we are missing something to replicate the issue, you may also send a small sample of your own replicating the issue:-

    https://stackblitz.com/edit/react-hkxjbe?file=index.js

    ~Sharad

  • Posted 11 September 2018, 9:50 am EST

    How can I run wijmo in debug mode

  • Posted 11 September 2018, 12:25 pm EST

    I’ve resolved the issue. I think this issue arises due to wijmo creating dom elements outside of the react system. As you know react uses state and jsx to create dom elements, but wijmo although it lives inside of react is not a true react component.

    Basically the core issue was that I have multiple Combobox controls on the screen and some of them will get removed depending on if else logic. Since react was not creating these controls sometimes when one was being removed it was confusing the react render engine (as they are all Comboboxes). Anyway I resolved it by wrapping each element in a div and giving each div a unique key.

  • Posted 12 September 2018, 8:42 am EST

    Hi,

    We are glad to hear that you were able to resolve the issue and thanks for informing us.

    However, we would like to investigate the issue further. Would it be possible for you to send a small sample replicating the issue so that we may investigate the root cause of the issue and fix it at our end? That would be very helpful for other customers.

    Thanks

    Sharad

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels