Make the cell blink
Hello,
I using the SfHeatMap at my project and I want to do two things:
- I want to make a group of cells blink so how can I implement this with animation?
- When a cell is selected all the other cells color is faded. How can I disable this?
Thanks in advance.
Hi Amanda,
Greetings from Syncfusion support.
Query 1 : Animation support for group cells
Currently, we don’t have direct support to blink the group of cells in the Blazor HeatMap component. Since Blazor doesn't support animation from the server-side. To animate ("blink") specific elements in Blazor, the elements can be accessed from JavaScript (JS Interop) and animated using the EJ2 animate library. We will try to check the feasibility of achieving this requirement using JS interop. Please confirm whether this way suits you or not. Based on your confirmation, we will proceed further on this requirement.
Query 2 : Highlight selected cell and fade remaining cells
The cellClicked event is triggered when you click the cell in the HeatMap component. By calling the JS Interop method in this function, you can customize the cell based on the requirements. In this sample, we customize the color fading when the cell is clicked.
Refer the below code snippet.
|
[index.razor] <HeatMapEvents CellClicked="cellClicked"></HeatMapEvents>
public async Task cellClicked(CellClickEventArgs args) { await JsRuntime.InvokeAsync<Object>("JSMethod", args.X, args.Y); }
[_Host.cshtml] <script> function JSMethod(xValue, yValue) { var element = document.getElementsByTagName("rect"); for (var i = 0; i < element.length; i++) { if (element[i].getAttribute("x") == xValue && element[i].getAttribute("y") == yValue) { element[i].setAttribute("opacity","0.2"); } } } </script> |
Check the attached sample and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
Attachment: HeatMap_6f8b58ca.zip
Hello again,
For the second question that I asked I used your response but it does not seem to work correctly. In fact when I click the cell the first time all the other cells are faded and I have to click one more time and then the other cells will return to their previous style.
I also checked the project that you posted and when I comment out the Javascript line where you set the opacity to 0.2 the Heatmap works correctly again.
Is there anything else that you didn't mention?
<script>
function JSMethod(xValue, yValue) {
var element = document.getElementsByTagName("rect");
for (var i = 0; i < element.length; i++) {
if (element[i].getAttribute("x") == xValue && element[i].getAttribute("y") == yValue) {
//element[i].setAttribute("opacity","0.2");
}
}
}
</script>
Hi Amanda,
While you hover over the HeatMap cells, they will get faded compared to the other cells. This is the default behavior of the HeatMap component. Initially, we tried to fade all the cell colors on initial rendering and tried to highlight the selected cell color as requested. But we won’t be able to adjust the opacity of that particular cell. So we try to achieve the selected cell fading in a cellClicked event similar to the default behavior of the HeatMap component. If the provided suggestions are not suitable, kindly revert to us with more details.
Regards,
Leo Lavanya Dhanaraj
Hello and thanks for your reply,
What I am trying to do is that I want to disable the fading of the other cells as I am saying at my first post.
The reply that you suggested does the opposite of what I am trying to do
So how can I achieve this?
Thanks in advance!
Hi Amanda,
We have validated your reported query in the Blazor HeatMap component. The cellClicked event will be triggered when you click the cell in the HeatMap component. By calling the JS Interop method in this function, you can customize the cell based on the requirements. In this sample, we have reduced the opacity of all the cells to highlight the clicked cell.
Check the below code snippet.
|
[index.razor] <HeatMapEvents CellClicked="cellClicked"></HeatMapEvents>
public async Task cellClicked(CellClickEventArgs args) { await JsRuntime.InvokeAsync<Object>("JSMethod", args.X, args.Y); }
[_Host.cshtml] <script> function JSMethod(xValue, yValue) { var element = document.getElementsByTagName("rect"); for (var i = 0; i < element.length; i++) { if (element[i].getAttribute("x") == xValue && element[i].getAttribute("y") == yValue) { element[i].setAttribute("opacity", "1"); } else { element[i].setAttribute("opacity", "0.2"); } } } </script> |
Check the attached sample and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
Hello,
Thanks for you reply but I tried to set the opacity for every cell at 1 but it doesn't work at the first click.
Only if I click again it disables the fading. Below is the script that I am using.
<script>
function JSMethod(xValue, yValue) {
var element = document.getElementsByTagName("rect");
for (var i = 0; i < element.length; i++) {
if (element[i].getAttribute("x") == xValue && element[i].getAttribute("y") == yValue) {
element[i].setAttribute("opacity", "1");
}
else {
element[i].setAttribute("opacity", "1");
}
}
}
</script>
Any advice on why is this happening and how can I solve it?
Thanks in advance!
Hi Amanda,
In shared code snippet, both 'if' and 'else' condition has the same opacity value as '1'. By default, the HeatMap cells have a opacity value of 1. If you want to highlight the clicked cell and the other cells needs to faded, reduce the opacity in 'else' loop. We suggested to use the cell fading technique when you click any cells as we said in the previous response.
Could you please share more details with your Blazor component page if we misunderstood your query?
Regards,
Leo Lavanya Dhanaraj
