Apex Code Development You need to sign in to do that
Don't have an account?
-_- How to implement select all/deselect all in LWC Lightning Tree Grid component - ran into bug with ontoggle firing the onrowselect event
I'm running into this issue (https://salesforce.stackexchange.com/questions/264977/lightningtreegrid-ontoggle-action-triggers-onrowselection) trying to build select all/deselect all for a hierarchy table built in lwc tree grid and am stuck on this bug firing the onselect when trying to deselect rows programmatically.
I have a 3 level hierarchical data table and when a user de-selects from the lowest level (L3) of any parent, when the parent is unselected the on-toggle fires, which for some reason fires the onrowselect event which is incorrect. Following my example, when the onrowselect fires it still hasn't processed my L1 de-select since it had unselected the L2 and L3 and toggled off the L2 and and so it re-adds the L2 and L3's including any other L2's and L3's that were under L1 but were not explicitly selected before.
how has anyone been able to use this component given this 'known' issue?
Link to Playground (https://developer.salesforce.com/docs/component-library/tools/playground/aM8ParSld/4/edit)
I have a 3 level hierarchical data table and when a user de-selects from the lowest level (L3) of any parent, when the parent is unselected the on-toggle fires, which for some reason fires the onrowselect event which is incorrect. Following my example, when the onrowselect fires it still hasn't processed my L1 de-select since it had unselected the L2 and L3 and toggled off the L2 and and so it re-adds the L2 and L3's including any other L2's and L3's that were under L1 but were not explicitly selected before.
how has anyone been able to use this component given this 'known' issue?
Link to Playground (https://developer.salesforce.com/docs/component-library/tools/playground/aM8ParSld/4/edit)
So as for now, this is not achievable using the LWC treegrid component.
All Answers
I found the documentation for the above component and I see that even in the documentation there is the same behaviour I think this is working as designed cause even in the official components documentation the behaviour is the same, but I am not sure if it is possible to prevent this behaviour,
I think the ideal explanation for this behaviour could be that in case if we are choosing all of the sub-components we can simply choose the parent in case if we want to choose a specific sub-component then you would be extending the dropdown.
I hope this helps and in case if this came in handy in addressing the issue can you please choose this as best answer so that the question is closed and it would in turn help in keeping our community clean, apart from this it would also help others in case if they have a similar issue in the future.
Regards,
Anutej
Thank you for your reply, I have gone through the documentation several times and I have never come accross this type of behaviour stated explicitely would you be able to point me to where exactly you saw this in the documentation, or copy/paste the specific paragraph if that's easier?
Also, I'm not sure I understand your proposed solution as when a user selects or unselects a Grandchild for a given Grandparent, the onrowselect will fire allowing you to take action and handle how you wish, in my case part of what I need to do is determine where in the hierarchy the user currently is and what other related rows also need to be selected or unselected.
Once this has been determined I have to update the selected and expanded @track values to indicate what needs to show as selected and unselected.
Now when the track variables are updated to reflect what I just passed to it, why should the ontoggle (which I did not explicitely fire, but indirectly fired on updating the expanded track value) re-fire the onrowselect? That does not seem like natural behaviour and how would I ever be able to implement standard select all/unselect functionality when this occurs?
It's possible I may be missing something here and am hoping to be enlightened but as of now, this is not adding up. Also it seems other's have also run into the same issue as linked in the stack exchange link in my original post shows.
Thanks again for responding, I look forward to your reply!
Additionally, I also found another thread [ https://success.salesforce.com/answers?id=9063A000000lY6gQAE ] where there is a similar problem. I tried searching if there are any other existing ideas but unfortunately, I couldn't find any such ideas if you can find one you can upvote it such that it may be addressed in the future or if there are none you can also create a new idea to which others can upvote.
So as for now, this is not achievable using the LWC treegrid component.
Modify the onrowselection event's handler to include event as a parameter, then read the value from event.detail.config.action, if you are collapsing/expanding a row it should be undefined, if you select a row its value should be "rowSelect" and if you are deselecting the row it should be "rowDeSelect".
* ROWS_ACTION.ROW_SELECT => event.detail.config.action = "rowSelect";
* ROWS_ACTION.ROW_DESELECT => event.detail.config.action = "rowDeSelect";
* ROWS_ACTION.SELECT_ALL_ROWS => event.detail.config.action = "rowSelectAllRows"
* ROWS_ACTION.DESELECT_ALL_ROWS => event.detail.config.action = "rowDeSelectAllRows"
In this way you can add logic inside the onrowselection method:
handlerowselection(event) { if(event.detail.config.action == "rowSelect" ) { // do something } else if ((event.detail.config.action == "rowSelect" ) { // do another thing } }Salesforce is yet to document this behaviour in Lightning-tree-grid documentation.