Diagram NodeTemplate with chart breaks context menu

[Michael Aston]

If a chart is used in the NodeTemplate of the diagram the right click of the context menu no longer works.

Attached is a video of this. Note the context works on a simple node and also on the div in the template but not for the SfChart. I guess the chart is capturing the mouse click.

<div style="height:100%; width:100%">

    <div class="content-wrapper" style="height: calc(100vh - 44px); width:100%;">

        <div id="diagram-space" style="width: 100%; height: 100%;">

            <SfDiagramComponent Width="100%" Height="100%" Nodes="@NodeCollection" Connectors="@ConnectorCollection" @ref=@Diagram>

                <SnapSettings Constraints=SnapConstraints.None/>

                <ContextMenuSettings Show="true"/>

                <DiagramTemplates>

                    <NodeTemplate>

                        @{

                            <div style="margin:20px;"> Test to see if context menu will show for div of NodeTemplate</div>

                            NodeExtended NodeExtendedObj = (context as NodeExtended);

                            <SfChart Title=@NodeExtendedObj.Title Height="100%" Width="100%">

                                <ChartTitleStyle Size="14px"/>

                                <ChartPrimaryXAxis Coefficient="100" LabelPlacement="LabelPlacement.OnTicks" EnableTrim="true" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

                                <ChartPrimaryYAxis Minimum="0" Maximum="100" />

                                <ChartSeriesCollection>

                                    <ChartSeries DataSource=@NodeExtendedObj.NodeRadarChartValuesList XName="Title" YName="Value" Opacity="0.75" Type="ChartSeriesType.Radar" DrawType="ChartDrawType.Area">

                                    </ChartSeries>

                                </ChartSeriesCollection>

                            </SfChart>

                        }

                    </NodeTemplate>

                </DiagramTemplates>

            </SfDiagramComponent>

            <SfFab Target="#diagram-space" Position="FabPosition.TopLeft" IconCss="e-icons e-plus" title="Add" OnClick=@OnAddClick></SfFab>

            <SfFab Target="#diagram-space" Position="FabPosition.TopLeft" HtmlAttributes=@(new Dictionary<string, object> {{ "style", "top : 76px;" }, {"title", "Zoom in"}}) IconCss="e-icons e-zoom-in"></SfFab>

            <SfFab Target="#diagram-space" Position="FabPosition.TopLeft" HtmlAttributes=@(new Dictionary<string, object> {{ "style", "top : 136px;" }, {"title", "Zoom out"}}) IconCss="e-icons e-zoom-out"></SfFab>

            <SfFab Target="#diagram-space" Position="FabPosition.TopLeft" HtmlAttributes=@(new Dictionary<string, object> {{ "style", "top : 196px;" }, {"title", "Zoom to fit"}}) IconCss="e-icons e-zoom-to-fit"></SfFab>

            <SfFab Target="#diagram-space" Position="FabPosition.TopLeft" HtmlAttributes=@(new Dictionary<string, object> {{ "style", "top : 256px;" }, {"title", "Center"}}) IconCss="e-icons e-bring-to-center"></SfFab>

        </div>

    </div>

</div>

Attachment: Screen_Recording_(07102022_135934)_1275f777.zip

[Rajeswari Pounraj]

Hi Michael,

We were able to reproduce the issue with "Diagram NodeTemplate with chart breaks context menu" We are currently validating the issue and will provide additional information on October 13, 2022.

Regards,

Rajeswari

[Durga Gopalakrishnan]

Hi Michael,

We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on 18^th October 2022. We appreciate your patience until then. You can keep track of the bug from the below feedback link.

Feedback Link : https://www.syncfusion.com/feedback/38438/context-menu-is-not-displayed-in-chart-when-placed-inside-diagram

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Regards,

Durga Gopalakrishnan.

[Durga Gopalakrishnan]

Hi Michael,

We are glad to announce that our v20.3.0.50 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor.Charts NuGet package.

NuGet Package : https://www.nuget.org/packages/Syncfusion.Blazor.Charts/

We 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.

Regards,

Durga Gopalakrishnan.