Clicking on the Workspace does not clear selection

[Manuel]

Hi,

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

Regards

Manuel

[Gowtham Gunashekar]

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]

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]

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]

Well, i used the ZoomPan to disable the multi selection tool,

is there any better solution for it?

[Aravind Ravi]

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 ID="diagram" Width="1000px" Height="@Height" @ref="@diagram" Nodes="@NodeCollection" Tool="DiagramTools.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 ID="diagram" Width="1000px" Height="@Height" @ref="@diagram" Nodes="@NodeCollection" Tool="@tool"> 

            <DiagramEvents SelectionChanged="@SelectionChange"></DiagramEvents> 

        </EjsDiagram> 

 

@functions 

    { 

 

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

} 

 

Regards,  

Aravind Ravi 

[Manuel]

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]

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]

Thanks for the advice.

[Aravind Ravi]

Hi Manuel,   

 

Most welcome. Please let us know if you need any other assistance 

    

Regards,    

Aravind Ravi 

[Scott Peal]

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 @ref="@Diagram" @onclick="@OnClick" Height="750px" Nodes="@NodeCollection" Connectors="@ConnectorCollection"  >

</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]

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]

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]

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]

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]

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