-
Notifications
You must be signed in to change notification settings - Fork 380
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Not able to select/deselect checkbox in spfx-controls-react TreeView after assign the defaultSelectedKeys value #870
Comments
Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible. |
Hi @sumitdeyonline, I was unable to recreate this issue. |
Thank you, Joel for your response. Please find the package I have used in my project. I had the same issue with @pnp/spfx-controls-react 2.5 and 2.6 as well. Currently using the latest version(3.0.0). "dependencies": { |
@sumitdeyonline @joelfmrodrigues I have fixed this behavior in my PR that is currently open to be reviewed/merged => #864 Reason: when having selectChildrenIfParentSelected to true, it will always select the children on select, unselect, mount and update. You have a callback function on item select which, I assume, triggers a rerender of the parent and thus of the treeView control. As a result, the Treeview control will take your default keys and select their children again (even if you just clicked deselect). My fixes:
|
@YannickRe many thanks for the update, that's great! |
You are welcome! I chose the flagged enum for backwards compatibility, so you can still have to "all on" or "all off" functionality like you currently have. In my opinion, you should not do the child selection on update, and probably not on mount either but to not break anyone I chose the flagged enum direction. |
Please let me know when it would be released |
Like you, I hope soon. I have a project waiting for this 😃 |
The PR with the fix has been merged and is available in |
When it would be available for us to use. |
@sumitdeyonline - you can already test it using the v2 beta version |
Thank you @AJIXuMuK. @YannickRe , Still I am not able to select/deselect after setting the value of defaultSelectedKeys, here is my dependency on the package.json Here is the Treeview code snippet
I can't able to select/deselect any items in the tree view, there are following three items are selected in the Treeview though 658 |
The change is to not use |
Still, I am not able to select/deselect after setup the selectChildrenMode, here is the code snippet. Do I need to change anything else?
|
@sumitdeyonline Yes, your sp-dev-fx-controls-react/src/controls/treeView/TreeView.tsx Lines 219 to 230 in 4421879
It means that every time your component rerenders (because the parent component's state is updated), it will take the defaultSelectedKeys you passed in and select them again and none other. It essentially resets your selection, overrides the local state with the input. The naming of the parameter is misleading, it seems to signify that this is the selection only for the initial load but it will apply them on every rerender. Only a total refactor of the component can change this. To work around this, you'll need to capture the selected items in the parent and send them back to the TreeView component. In your case it'll mean this:
|
Thank you, @YannickRe, this solution works for me, however, my initial impression was defaultSelectedKeys would impact on the initial load only, after onwards it would not impact on TreeView render. You are right, the naming of the parameter misleading us. |
@sumitdeyonline No worries, I struggled with the same thing and had to look at the source code to figure it out too. It wasn't straightforward, but I'm glad it works for you now! |
Thank you, @YannickRe. Just for curiosity, there are any search functionality available in the TreeView, Our requirement is to search the node tree for a specific node, may be user enter some search criteria(Key only) in the text field, according to that node would be selected in Treeview |
That does not exist, but you can "easily" build in your own application. A text box where they enter the key, you add it to your |
Thank you, I have built the same functionality using the custom code, just checking anything available out of the box. |
@YannickRe , One more question, is it possible to expand/collapse TreeView according to the selected node programmatically without reloading the page, when we enter the node key in the textbox, we are updating this.state.selectedStoreKeys as defaultSelectedKeys . Now TreeView would expand/collapse and show whatever node is entered in the textbox without reloading the page. With reloading the page it is working as expected though. Thanks in advance. |
@sumitdeyonline - as a quick thing, instead of reloading the page, you can remove and add the {isLoading && <Spinner />}
{!isLoading && <TreeView ... />} |
I have tried the same, it is not updating the TreeView(Expand/Collapse) though, here is my implementation
searchfilterValueItem=(item:any)=>{
this.setState({loading: false}); } |
Thank you @AJIXuMuK, after move the this.setState({loading: false}); to inside the setTimeout function, it start working
|
One of our JSON datasets is returning data with the node Children: [(Uppercase C), currently TreeView interface is designed with children: [(Lowercase c). Can you please let me know how we would able to utilize the data with Uppercase C Children: [...].
|
You should implement a converter (either on back end or front end) to convert the initial data to the component's data structure |
Thank you, we would implement data conversion in the backend. |
@sumitdeyonline Closing this item as this should now be fixed as part of the last release. Please update to the latest release and open a new issue if you still experience problems. Many thanks for your contributions |
after adding treearr.push(tree); in Else part the child nodes are binding and Expand and collapse are not working Please suggest on this below is the code private async _getLinks() { if (v[“ParentId”] == null) { console.log(v); |
and the tree view control is as below public render(): React.ReactElement {
}
|
Not able to select/deselect the checkboxes in spfx-controls-react multi-select TreeView after assign the defaultSelectedKeys value, it selected the default selected keys(node) while loading the webpart though. After loading we are not able to select/deselect any checkboxes.
When I commented out the defaultSelectedKeys values, everything else is working perfectly.
The text was updated successfully, but these errors were encountered: