Microsoft Fabric Community Conference 2025, March 31 - April 2, Las Vegas, Nevada. Use code FABINSIDER for a $400 discount.
Register nowGet inspired! Check out the entries from the Power BI DataViz World Championships preliminary rounds and give kudos to your favorites. View the vizzies.
Im developing a Power BI Custom Visual using React + TypeScript + MUI DataGrid. The visual correctly applies filtering when selecting a slice in a Pie Chart. However, when I click on a cell in the DataGrid after filtering, Power BI triggers update() and resets the selection, forcing all rows to regenerate.
Can someone point me in the right direction in order to solve this issue?
Solved! Go to Solution.
Hi @chcacco
The issue occurs because Power BI's update() method triggers a full refresh of the custom visual whenever an interaction happens, such as clicking on a cell in the MUI DataGrid. This causes the selection state to reset, leading to all rows regenerating instead of preserving the previous selection. To resolve this, you need to maintain state persistence within React, ensuring that selected rows remain unchanged even when Power BI updates the visual. One way to do this is by using React state hooks (useState) or refs (useRef) to store the selected row IDs before the update occurs. Additionally, using suppressAnimations: true in Power BI's visual API can prevent unnecessary UI resets. Another key approach is to restore the selection state inside update() by reapplying previously stored selections after the visual updates. Furthermore, optimizing the filtering logic ensures that only affected rows change rather than reloading all rows. If needed, integrating Power BI's selectionManager can provide better control over interactions and prevent unwanted state loss when clicking on DataGrid elements.
Hi @chcacco
The issue occurs because Power BI's update() method triggers a full refresh of the custom visual whenever an interaction happens, such as clicking on a cell in the MUI DataGrid. This causes the selection state to reset, leading to all rows regenerating instead of preserving the previous selection. To resolve this, you need to maintain state persistence within React, ensuring that selected rows remain unchanged even when Power BI updates the visual. One way to do this is by using React state hooks (useState) or refs (useRef) to store the selected row IDs before the update occurs. Additionally, using suppressAnimations: true in Power BI's visual API can prevent unnecessary UI resets. Another key approach is to restore the selection state inside update() by reapplying previously stored selections after the visual updates. Furthermore, optimizing the filtering logic ensures that only affected rows change rather than reloading all rows. If needed, integrating Power BI's selectionManager can provide better control over interactions and prevent unwanted state loss when clicking on DataGrid elements.
Hi @chcacco ,
If you want to custom visual save states, you might consider checking out the following links:
Solved: Re: Power BI Custom Visual state persistence - Microsoft Fabric Community
PowerBI Desktop Custom Visual - Storage Problem - Stack Overflow
Trick to persist properties of Power BI visuals af... - Microsoft Fabric Community
Make sure you are using the latest version of the software. Sometimes updates contain fixes for such issues.
Best Regards,
Liu Yang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code FABINSIDER for a $400 discount!
Check out the February 2025 Power BI update to learn about new features.