Back to Devexpress

DxSankey.NodeClick Event

blazor-devexpress-dot-blazor-dot-dxsankey-11dd7f79.md

latest3.2 KB
Original Source

DxSankey.NodeClick Event

Fires when a user clicks a DxSankey node.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[Parameter]
public EventCallback<SankeyNodeClickEventArgs> NodeClick { get; set; }

Event Data

The NodeClick event's data class is SankeyNodeClickEventArgs. The following properties provide information specific to this event:

PropertyDescription
NodeReturns the clicked node.

Remarks

Handle the NodeClick event to respond to clicks on nodes.

The following code snippet handles the NodeClick event and displays information about the clicked node and associated links:

razor
<DxSankey Data="@Data"
          Width="100%"
          Height="440px"
          NodeClick="@OnNodeClick"
          SourceFieldName="Source"
          TargetFieldName="Target"
          WeightFieldName="Weight">
    <DxSankeyNodeSettings Width="8" Spacing="30" />
    <DxSankeyLinkSettings ColorMode="SankeyLinkColorMode.Gradient" />
    <DxTitleSettings Text="Commodity Turnover" />
</DxSankey>

@Message

@code {
    IEnumerable<SankeyDataPoint> Data = Enumerable.Empty<SankeyDataPoint>();
    protected override void OnInitialized() {
        Data = GenerateData();
    }

    string Message { get; set; }
    void OnNodeClick(SankeyNodeClickEventArgs args) {
        var node = args.Node;
        Message = "The clicked node: " + node.Label + ". " +
          "Incoming links: " + node.LinksIn.Length + ". " +
          "Outgoing links: " + node.LinksOut.Length + ".";
    }
}
csharp
public List<SankeyDataPoint> GenerateData() {
    return new List<SankeyDataPoint>() {
        new SankeyDataPoint("Spain", "United States of America", 2),
        new SankeyDataPoint("Germany", "United States of America", 8),
        new SankeyDataPoint("France", "United States of America", 4),
        new SankeyDataPoint("Germany", "Great Britain", 2),
        new SankeyDataPoint("France", "Great Britain", 4),
        new SankeyDataPoint("United States of America", "Australia", 6),
        new SankeyDataPoint("United States of America", "New Zealand", 5),
        new SankeyDataPoint("United States of America", "Japan", 3),
        new SankeyDataPoint("Great Britain", "New Zealand", 4),
        new SankeyDataPoint("Great Britain", "Japan", 1),
    };
}
public class SankeyDataPoint {
    public string Source { get; set; }
    public string Target { get; set; }
    public int Weight { get; set; }
    public SankeyDataPoint(string source, string target, int weight) {
        Source = source;
        Target = target;
        Weight = weight;
    }
}

See Also

DxSankey Class

DxSankey Members

DevExpress.Blazor Namespace