SfHeatMap Header column width adjustment, alignment, click event

[Nicola Dellea]

Hi,

I am using your SfHeatMap control.

 I have a problem with column width of first column.

The data are loaded on demand. Based on user actions, in one case first column is maximum 20 characters long, while in another can be as much as 200 characters long. The problem is that when user goes from "long description" to short description the width of first column does not adapt.

How can I force update width of the first column?

How can I force text align first column to left, last to right, all between to center?

I need to start one type of an action on MouseDoubleClick on a cell, different on MouseDoubleClick on a "resource, first column", and ignore click on header or scrollbar. For the moment I use very crude way to get the data of a cell and then if, else to the the correct action:

var cellRowVal = (string)((Syncfusion.UI.Xaml.HeatMap.CellInfo)((Syncfusion.UI.Xaml.HeatMap.SfHeatMap)sender).SelectedHeatMapCell?.DataContext)?.RowHeader?.Value;

            var cellColVal = (string)((Syncfusion.UI.Xaml.HeatMap.CellInfo)((Syncfusion.UI.Xaml.HeatMap.SfHeatMap)sender).SelectedHeatMapCell?.DataContext)?.ColumnHeader?.Value;

Is there a simpler way to do this?

How can I manage to "show tooltip" on simple click or mouse over a cell?

Thank you for your help.

Nicola

[Arun Kumar Sivakumar]

Hi Nicola, 

We are working on your requirements. We will update you with more details on or before April 8, 2024.

Regards,

Arun Kumar S

[Arun Kumar Sivakumar]

Hi Nicola,

Please find the response for your queries in the below table.

Query	Response
The data are loaded on demand. Based on user actions, in one case first column is maximum 20 characters long, while in another can be as much as 200 characters long. The problem is that when user goes from "long description" to short description the width of first column does not adapt. How can I force update width of the first column?	In our SfHeatmap control, the first column's width will update based on the maximum width of the row header. We are unable to update the width of the first column alone based on its text length. Currently, we are validating if there are any possibilities to achieve your requirements. We will update you with more details on or before April 10, 2024
How can I force text align first column to left, last to right, all between to center?	In our SfHeatmap control, We aren't able to set alignment for each cell. But we can set the common alignment for all cells. We have provided the code snippet for how to set the alignment for ColumnHeader, RowHeader, and HeatMapCell.   <Style TargetType="syncfusion:RowHeader"> <Setter Property="HorizontalContentAlignment"  Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Bottom"/> </Style>   <Style TargetType="syncfusion:ColumnHeader"> <Setter Property="HorizontalContentAlignment"  Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Bottom"/> </Style>     <Style TargetType="syncfusion:HeatMapCell"> <Setter Property="HorizontalContentAlignment"  Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Bottom"/>   </Style>
I need to start one type of an action on MouseDoubleClick on a cell, different on MouseDoubleClick on a "resource, first column", and ignore click on header or scrollbar. For the moment I use very crude way to get the data of a cell and then if, else to the the correct action: var cellRowVal = (string)((Syncfusion.UI.Xaml.HeatMap.CellInfo)((Syncfusion.UI.Xaml.HeatMap.SfHeatMap)sender).SelectedHeatMapCell?.DataContext)?.RowHeader?.Value;             var cellColVal = (string)((Syncfusion.UI.Xaml.HeatMap.CellInfo)((Syncfusion.UI.Xaml.HeatMap.SfHeatMap)sender).SelectedHeatMapCell?.DataContext)?.ColumnHeader?.Value; Is there a simpler way to do this?	There is no simpler way to get the data of the cell.
How can I manage to "show tooltip" on simple click or mouse over a cell?	You can manage the tooltip by writing the style for the heatmap cell. We have provided the code snippet for your reference.   <ToolTip x:Key="celltip"   Content="{Binding}" Opacity=".9" FontSize="10"  Background="White" Foreground="#4f4f4f">      <ToolTip.ContentTemplate>          <DataTemplate>              <StackPanel HorizontalAlignment="Right"  VerticalAlignment="Center">                                  <StackPanel Orientation="Horizontal"  >                                            <TextBlock Text="{Binding RowHeader.Value}"></TextBlock>                  </StackPanel>                  <StackPanel Orientation="Horizontal" >                      <TextBlock  Text="{Binding ColumnHeader.Value}"  ></TextBlock>                      <TextBlock  Text=" : " ></TextBlock>                      <TextBlock  Text="{Binding Value}" ></TextBlock>                  </StackPanel>              </StackPanel>          </DataTemplate>      </ToolTip.ContentTemplate>  </ToolTip>    <Style TargetType="syncfusion:HeatMapCell">      <Setter Property="MinWidth" Value="60"/>      <Setter Property="MinHeight" Value="25"/>      <Setter Property="ToolTip" Value="{StaticResource celltip}"/>  </Style>

Regards,

Arun Kumar S

[Nicola Dellea]

Hi  Arun Kumar,

ToolTip for a cell: I have changed mapping from TableMapping to a CellMapping, So I can map specific field to the ToolTip and show data relative to a cell. Therefor this problem we can consider as solved.

Content alignment: We can consider this as well as solved.

Width of the first column: This problem limits the usability quite a lot. See the image attached. I would like to avoid having multiple heatmap components in a window and managing the visibility based on a maximum length of the text.

Thank you for your help.

Kind regards,

Nicola

[Arun Kumar Sivakumar]

Hi Nicola,

Please find the response to your queries in the below table.

Query	Response
ToolTip for a cell: I have changed mapping from TableMapping to a CellMapping, So I can map specific field to the ToolTip and show data relative to a cell. Therefor this problem we can consider as solved. Content alignment: We can consider this as well as solved.	Thanks for your confirmation.
Width of the first column: This problem limits the usability quite a lot. See the image attached. I would like to avoid having multiple heatmap components in a window and managing the visibility based on a maximum length of the text.	From our analysis, we assume that you have multiple heatmaps and switch between them dynamically. However, when switching, the length of the first column does not adjust to fit the content if the current heatmap column content has fewer characters than the previous heatmap.   We are currently validating if there are any possibilities to meet your requirements. We will provide you with more details on or before April 15, 2024. We appreciate your patience until then.   If there has been any misunderstanding regarding your issue, please inform us and share additional details that might help us provide the proper solution.

Regards,

Arun Kumar S

[Nicola Dellea]

Hi  Arun Kumar,

In my Window I have just 1 heatmap at the moment. When updating the data I have a problem with the width of the first column. 

Possible solutions:

1. Forcing "update" width of the first column. Means having just 1 heatmap. (for this to work I need your instruction how to force update visuals)
2. I can implement multiple heatmaps (one for short description, one for medium and one for a long) in a Window. Based on  description length bind data to the correct heatmap. But that seems like poor solution for this problem.
   

Thank you for your help.

Kind regards,

Nicola

[Karkuvel Rajan Shanmugavel]

Hi Nicola,

Requirement: Need to update the first column width automatically

Currently, we are working on finding is there any possibilities to achieve your requirement. As per our previous update, we will update you with more details on April 15, 2024.

Regards,

Karkuvel Rajan S

[Arun Kumar Sivakumar]

Hi Nicola,

Reported issue: In a Heatmap control, the First column width is not updated automatically based on the cell content width

We have confirmed that the reported issue is a bug from our end. We have logged a bug report for the reported issue. We will fix this issue and include the fix in our upcoming Weekly NuGet release which will be planned on May 7, 2024. For more details about the bug please follow the below feedback link.

Feedback link: Update the first column width automatically based on the cell content in WPF | Feedback Portal (syncfusion.com)

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Arun Kumar S

[Arun Kumar Sivakumar]

Hi Nicola,

Reported issue: In a Heatmap control, the First column width is not updated automatically based on the cell content width

Sorry for the delay in providing the solution for your reported issue. Due to our SP release for Volume 1 this week, we do not have a weekly NuGet release. We will provide you with the fix in our upcoming weekly NuGet on May 14, 2024.

Regards,

Arun Kumar S

[Arun Kumar Sivakumar]

Hi Nicola,

Reported issue: In a Heatmap control, the First column width is not updated automatically based on the cell content width

We are glad to announce that our Weekly NuGet v25.2.4 is rolled out and is available for download under the following link. We have fixed the reported issue and included the fix in it.

NuGet Version: 25.2.4

NuGet link: NuGet Gallery | Syncfusion.SfDiagram.WPF 25.2.4

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Arun Kumar S