button click event not firing within node in diagram component

[Nicolas Navier]

Hi,

Consider the following scenario, we have a diagram that contains some nodes. Those nodes uses card components and those contains some button components like so :

<NodeTemplate>
@{
var node = context as Node;
if (node.Data.Contains("|"))
{
string[] nodeData = node.Data.Split("|");
<SfCard ID="@node.Id">
<CardHeader Title="@nodeData[0]" SubTitle="@nodeData[1]" ImageUrl="@nodeData[2]" />
@if (nodeData[3] == "True")
{
<CardFooter>
<CardFooterContent>
<SfButton @onmousedown="@((e) =>buttonclickevent(int.Parse((context as Node).Id)))"
IconCss="fas fa-angle-down"
CssClass="e-btn e-outline e-primary">
Expand node
</SfButton>
</CardFooterContent>
</CardFooter>
}
</SfCard>
}
}
</NodeTemplate>
</DiagramTemplates>

No matter what we do, the event onclick is not triggered and my colleague tried those links to no avail :

https://www.syncfusion.com/forums/155309/nodetemplate-with-a-button-prevent-the-button-from-click

https://www.syncfusion.com/forums/168842/node-click-event-triggers-after-node-is-selected

Could you give us some advice ?

Regards,

--Nicolas

[syed]

I am using Diagram (classic) and I get the node click event like this:

<SfDiagram>

    <DiagramEvents Clicked="OnNodeClick"></DiagramEvents>

</SfDiagram>

Then in my code:

OrganizationalDetails employee { get; set; } = new();

public void OnNodeClick(IBlazorClickEventArgs args)

    {

        if(args.Element.Selector != null && args.Element.Selector.Nodes != null)

        {

            /* it means that node is clicked. You can access nodes data like this */

            JObject jObject = JObject.FromObject(args.Element.Selector.Nodes[0].Data);

             employee = jObject.ToObject<OrganizationalDetails>();

        }

    }

If you are using SfDiagramComponent, I am not sure how to get the node clicked event (ask the support team).

[Nicolas Navier]

Thanks Syed,

Have you tried with the zooming and panning options enabled ? I think once you enabled those it stops to work.

--Nicolas

[Ranjitha Amirthalingam]

Hi Nicolas,

We have tried to replicate the issue in our end. But the issue is not reproduced. We have provided the code example and sample for your reference.

Code Example:

<SfDiagramComponent @ref="diagram" Height="690px" Nodes="@nodes">

    <DiagramTemplates>

        <NodeTemplate>

            @{

                Node node = context as Node;

                <SfCard ID="@node.ID">

                    <CardHeader />

                    @if (node.ID == "html1")

                    {

                        <CardFooter>

                            <CardFooterContent>

                                <SfButton @onclick="OnClick"

                                          IconCss="fas fa-angle-down"

                                          CssClass="e-btn e-outline e-primary">

                                    Expand node

                                </SfButton>

                            </CardFooterContent>

                        </CardFooter>

                    }

                </SfCard>

            }

        </NodeTemplate>

    </DiagramTemplates>

</SfDiagramComponent>

 

public void OnClick()

    {

        nodes[0].Shape = new BasicShape() { Type = Shapes.Basic, Shape = BasicShapeType.Ellipse };

        nodes[0].Style = new ShapeStyle() { Fill = "cornflowerblue" };      

    }

Regards,

Ranjitha A.

Attachment: NodeTemplateSample_e427c46.zip