Clicking on the Workspace does not clear selection

Question

Hi,When i click on the workspace (empty space) the selected items are not getting deselected.RegardsManuel

Gowtham Gunashekar · Answer

Hi Manuel, 
 
We suspect that you might click on the non-diagram area after you selected a node in diagram, that why the node did not deselect. To unselect the node please click on the diagram area  
 
  
If we misunderstood your requirement, please share us more details like sample demo or video demonstration of how did you deselect the node. This will be helpful for us to serve you better. 
 
 
 
Regards, 
Gowtham G

Manuel · Answer

Thanks for your help, i think this is a bug when i enable the DiagramTools.ZoomPan.It works when i remove it. Could you please fix this?

Aravind Ravi · Answer

Hi Manuel,   
   
Diagram tool “ZoomPan” allows you to pan the diagram. If you want to perform any interaction for nodes or connectors in diagram, then set diagram tools as “Default”. By default, if you set diagram tools as “ZoomPan” then you will not be able to perform any interaction in diagram.  
Please refer to below UG documentation link for more information about diagram tools.  
  
UG Link: https://ej2.syncfusion.com/blazor/documentation/diagram/tools/#tool-selection   
    
Regards,   
Aravind Ravi

Manuel · Answer

Well, i used the ZoomPan to disable the multi selection tool,is there any better solution for it?

Aravind Ravi · Answer

Hi Manuel,

To disable multi-selection in diagram set diagram tools as “SingleSelect”. Single select tool allows you to select individual nodes or connectors. Please find below code snippet for how to set diagram tools as “SingleSelect”.

</EjsDiagram>

If you want to perform both pan and basic interaction for node/connectors in diagram means then set diagram tools as “SingleSelect | ZoomPan”. When you enable both the SingleSelect and ZoomPan tools, you can perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram.

</EjsDiagram>

@functions

{

public DiagramTools tool = DiagramTools.SingleSelect | DiagramTools.ZoomPan;

}

Regards,

Aravind Ravi

Manuel · Answer

Thank you, i'm still using the ZoomPan and the SingleSelect Option.

To fix my issue i'm also using the Clicked Event now.

public async Task OnClick(IBlazorClickEventArgs args)

{

if (args?.ActualObject?.Diagram == null) return;

await this.Diagram.ClearSelection();

}

Aravind Ravi · Answer

Hi Manuel,   
 
By using the “click” event we can deselect the selected node in the diagram. If we click on the diagram click event gets fired. In that event, we can check if the diagram has selected items or not. If it has selected items means then we can clear the selection in the diagram. 
 




public async Task OnClicked(IBlazorClickEventArgs args) 
    { 
        if (args.Element.Diagram != null && args.Element.Diagram.SelectedItems.Nodes != null) 
        { 
            await diagram.ClearSelection(); 
        } 
    } 
 
   
Regards,   
Aravind Ravi

Manuel · Answer

Thanks for the advice.

Aravind Ravi · Answer

Hi Manuel,    
Most welcome. Please let us know if you need any other assistance 
    
Regards,    
Aravind Ravi

Scott Peal · Answer

Hi Manuel,

By using the “click” event we can deselect the selected node in the diagram. If we click on the diagram click event gets fired. In that event, we can check if the diagram has selected items or not. If it has selected items means then we can clear the selection in the diagram.

public async Task OnClicked(IBlazorClickEventArgs args)

    {

        if (args.Element.Diagram != null && args.Element.Diagram.SelectedItems.Nodes != null)

        {

            await diagram.ClearSelection();

        }

    }



Regards,

Aravind Ravi

Note the syntax of the above has changed. It would be helpful to add this to the documentation and demos. ..Thanks

</SfDiagram>

public void OnClick(MouseEventArgs args)

{

if (Diagram.SelectedItems.Nodes.Count > 0)

{

// A node was clicked

}

if (Diagram.SelectedItems.Connectors.Count > 0)

{

// A node was clicked

}

Aravind Ravi · Answer

Hi Scott, 
   
We have documentation for the native events but does not have for the Events. We have already logged a documentation improvement task to add event documentation for Diagram components. We will let you know once the documentation gets published in live. 
   
Regards   
Aravind Ravi

Aravind Ravi · Answer

Hi Scott, 
 
We have documentation for the native events but does not have for the Events. We have already logged a documentation improvement task to add event documentation for Diagram components. We will include the documentation on or before the 2020 Volume 3 2020 SP1 release. We will let you know once the documentation gets published in live.   
 
Regards 
Aravind Ravi

Aravind Ravi · Answer

Hi Scott,  
  
Sorry for the inconvenience caused. We are unable to publish the publish the documentation in this release. We will include the documentation on or before the 2020 Volume 4 release. We will let you know once the documentation gets published in live.    
  
Regards  
Aravind Ravi

Aravind Ravi · Answer

Hi Scott,  
  
Sorry for the inconvenience caused.  Due to complexity of the requirement, we are unable to publish the publish the documentation in this release. We will include the documentation on or before the 2021 Volume 1 release. We will let you know once the documentation gets published in live. 
  
Regards  
Aravind Ravi

Gowtham Gunashekar · Answer

Hi Scott,   

Thanks for your patience .Our volume 1 2021,release has been rolled out successfully and we have included the documentation changes in the release. The documentation has been refreshed and published in live. Please refer to the below updated link  
  
Refreshed link: https://blazor.syncfusion.com/documentation/diagram/events/  
  
Regards   
Gowtham