Disable multiselect for HeatMap

Question

Dear Syncfusion support team,we have noticed that you can perform multiselect on the heatmap control by holding the ctrl key. Is it possible to disable the multiselect functionality? We need selection, but only one cell should be allowed at one point in time.Thanks for your help!Cheers,Christoph

Indumathi Ravi · Answer

Hi Christoph,Thank you for contacting Syncfusion support.Currently, we do not support selecting a single cell in the
HeatMap control. We are currently analyzing the feasibility for restricting the
multiple selection in the HeatMap control. We will update you with further
details on September 19, 2022.Regards,Indumathi R.

Tom Denecke · Answer

Hi Indumathi,we have also tried to locate an event for manually implementing this functionality. Sadly, the "cellSelected" event does not allow us to manipulate the selection, that will be applied. We have an array of the selected items, which we reduced to only the last element. Sadly, this does not work.We also thought about cancelling the event, taking just the last element, and then setting the single selection manually. However, there is no (public) api available for setting the selection (not even for getting, for that matter). Clearly, this must have been an oversight.We also tried calling clearSelection in the cellClick event. However, the cellClick event is raised after cellSelected, so we ended up with no selections anywhere.We have now resorted to disabling the built-in selection mechanism and changing the opacity of all cards manually using the cellClick event via the fill color, because otherwise it interferes with the hover mechanism. It works, but it feels like a lot of effort for a simple functionality.Do you have any other ideas?Thanks for your help.Cheers,Christoph

Indumathi Ravi · Answer

Hi Christoph,Using the workaround, we can disable multiple cell selection
while holding down the Ctrl key in the HeatMap control via the "cellSelected"
event. The selected cell can be kept when the browser resizes by using the
HeatMap control's "resized" event. Please see the code snippet
below.Code Snippet:

let heatmap: HeatMap = new HeatMap({
    cellSelected:
  function (args) {
     
  cellSelectedData = args.data;
     
  args.data = args.data.slice(0, 0);
     
  args.heatmap.multiCellCollection = args.heatmap.multiCellCollection.slice(
       
  0,
       
  0
     
  );
    },
    resized:
  function (args) {
     
  args.heatmap.multiCellCollection = cellSelectedData;
   
  },
  });
  heatmap.appendTo('#container');

We have
created the sample to demonstrate the same and it can
be found from the below link.https://stackblitz.com/edit/dkzysl-fjfn63?file=index.tsPlease let us
know if the above sample meets your requirement and let us
know if you need any further assistance.Regards,Indumathi R.

Tom Denecke · Answer

Hi Indumathi!thanks for the workaround. It would suit our need. However, the main "dragging to select multiple items" functionality still works, so it is only a partial workaround.Cheers,Christoph

Indumathi Ravi · Answer

Hi Christoph,We tried, but we didn't have a convincing solution (for all scenarios) based on your requirement - "To disable multiple cells selected on dragging in the HeatMap control". As a result, we plan to consider this an improvement, and it will be included in our 2022 Volume 4 release. Please see the feedback link below to keep track of the reported improvements.https://www.syncfusion.com/feedback/37937/Regards,Indumathi R.

Tom Denecke · Answer

Hi Indumathi,thanks for your efforts. We look forward to the new functionality!I also submitted a bug ticket approximately 2 weeks ago and have not any feedback on it so far. Maybe you can also have a look at it, since it is related: https://www.syncfusion.com/feedback/37760/removing-selection-from-heatmap-does-not-remove-shading Cheers,Christoph

Indumathi Ravi · Answer

Hi Christoph,Thank you for the update. Please find the details for your
queries in the below table.

Queries

Details

thanks for your efforts. We look forward to the new functionality!

Thanks. We'll let you
  know once the package is published.

I also submitted a bug ticket approximately 2 weeks ago and have not
  any feedback on it so far. Maybe you can also have a look at it, since it is
  related: https://www.syncfusion.com/feedback/37760/removing-selection-from-heatmap-does-not-remove-shading

We can use the "cellSelected"
  event in the HeatMap control to achieve the scenario of de-selecting all
  cells and returning them to their original state. We can get the selected
  cells that are collected in the "multiCellCollection" argument of
  the "cellSelected" event, and the selected cell counts as empty
  when none are selected, and then call the "clearSelection" method
  to restore all the cells to their original state. Please see the sample code
  below.
   
  Code Snippet:

let heatmap: HeatMap = new
    HeatMap({
    cellSelected: function (args) {
        if
    (args.heatmap.multiCellCollection.length == 0) {
         
    args.heatmap.clearSelection();
        }
      },
    });
    heatmap.appendTo('#container');

We have
  created the sample to demonstrate the same and it
  can be found from the below link.
  https://stackblitz.com/edit/dkzysl-rxau3t
   
  Please let us know
  if the above sample meets your requirement.

Please let us
know if you need any further assistance.Regards,Indumathi R.

Indumathi Ravi · Answer

Hi Christoph,We have implemented the feature ”Disable the multiple
cell selection on dragging in the HeatMap control” and the implementation
is included in our Essential Studio 2022 Volume 4 release v20.4.0.38 which is
rolled out and is available for download under the following link.https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-downloadMeanwhile, you can achieve the scenario by setting the “enableMultiSelect”
property as “false” in the HeatMap component. Please find the code
snippet for the same below,Code Snippet:

let heatmap: HeatMap = new HeatMap({
    //..
    //..
    allowSelection: true,
    enableMultiSelect:
  false
  });
  heatmap.appendTo('#container');

You can find the sample and video from the below link.Sample: https://stackblitz.com/edit/dkzysl-mg8fgz?file=index.tsVideo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/heatmap1064342376We 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.