Can't highlight node anymore with release 19.4.041

[Nicolas Navier]

Hi,
I have a big org chart to display and so I created a method that brings a particular node into the center and highlight that node by applying a different css class. It used to work with version 19.3.0.x but with the new version that functionality does not work anymore and I wonder why.

if the variable called  highLightNode contains the node, the code is supposed to apply a css class 
Here is the code :

<SfDiagram @ref="diagramProjectOther" Tool="@DiagramTools.ZoomPan" ID="diagramPods" Height="950px" ModelType="@model" Nodes="@NodeContentPodsCollection" Connectors="@ConnectorPodsCollection" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" Layout="@LayoutValueForPods">

                                    <DiagramPageSettings>

                                        <DiagramFitOptions CanFit="true" Mode="FitModes.Height" CanZoomIn="true" Region="DiagramRegions.Content"></DiagramFitOptions>

                                    </DiagramPageSettings>

                                    <DiagramSnapSettings Constraints="@snapConstraints">

                                        <HorizontalGridlines LineColor="blue" LineDashArray="2,2">

                                        </HorizontalGridlines>

                                        <VerticalGridlines LineColor="blue" LineDashArray="2,2">

                                        </VerticalGridlines>

                                    </DiagramSnapSettings>

                                    <DiagramTemplates>

                                        <NodeTemplate>

                                            @{

                                                var noeudDirection = context as Node;

                                                if (listeNodesPods.Where(x => x.Contains(noeudDirection.Data.Split("|")[0])).Any() || listeNodesPods.Where(x => x.Contains(noeudDirection.Data.Split("*")[0])).Any())

                                                {

                                                    if (noeudDirection.Data.Contains("|"))

                                                    {

                                                        <SfCard ID="@(noeudDirection.Id)" CssClass="@(highLightNode.Contains(noeudDirection.Data.Split("|")[0]) ? "hightlightvip" : "")">

                                                            <CardHeader Title="@(noeudDirection.Data.Split("|")[0])" SubTitle="@(noeudDirection.Data.Split("|")[2])" ImageUrl="@noeudDirection.Data.Split("|")[1]" />

                                                            @if (noeudDirection.Data.Split("|").Count() > 3)

                                                            {

                                                                <CardContent Content="@("Taux d'occupation :" + noeudDirection.Data.Split("|")[3] + "%")" />

                                                            }

                                                        </SfCard>

                                                    }

                                                    else if (noeudDirection.Data.Contains("*"))

                                                    {

                                                        <SfCard ID="@(noeudDirection.Id)">

                                                            <CardHeader Title="@(noeudDirection.Data.Split("*")[0])" ImageUrl="@($"" />

                                                        </SfCard>

                                                    }

                                                    else

                                                    {

                                                        <SfCard ID="@(noeudDirection.Id)">

                                                            <CardHeader Title="@(noeudDirection.Data)" SubTitle="@((context as Node).Data)" ImageUrl="" />

                                                        </SfCard>

                                                    }

                                                }

                                            }

                                        </NodeTemplate>

                                    </DiagramTemplates>

                                </SfDiagram>

  

    /// <summary>

    /// brings the focus to the selected node

    /// </summary>

    /// <param name="args"></param>

    public void FocusNode(ChangeEventArgs<string, EmployeeData> args)

    {

        if (args != null && args.Value != null)

        {

            var rect = diagramProjectOther.Nodes.Where(x => x.Data.ToString().Contains(args.Value)).FirstOrDefault();

            highLightNode = rect.Data.ToString();

            if (rect != null)

            {

                diagramProjectOther.BringToCenter(new Area()

                {

                    x = rect.OffsetX - (rect.Width / 2),

                    y = rect.OffsetY - (rect.Height / 2),

                    width = rect.Width,

                    height = rect.Height

                });

            }

        }

        else if (args.Value == null)

        {

            highLightNode = string.Empty;

        }

    }

I can't see why it would not work anymore, if you have some clues, please let mw know.

Regards,

--Nicolas

[Aravind Ravi]

Hi Nicolas, 

We have created a simple sample to update the node stroke color. We have tried to run the code snippet you  have shared, but we are unable to run the sample as it shows multiple errors. The error due to the dependency files are missing. Instead of using the css you can use the node stroke color to highlight the node.  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Node-Highlight272035685 

If issue still persists, please share us a simple runnable sample illustrating issue or modifying the above sample replicating issue. This would help us to serve you better. 

Regards 

Aravind Ravi 

[Nicolas Navier]

Hi, 

I updated the index file, here is the part that I expected to work:

<SfDiagram @ref="diagram" Height="600px" Width="1200px" Nodes="@NodeCollection" ModelType="@model">

    <DiagramTemplates>

        <NodeTemplate>

            <SfCard ID="Test" CssClass="@(applyCss ? "hightlightvip" : "")">

                <CardHeader Title="a card" SubTitle="a subtitle" />

            </SfCard>

</NodeTemplate>

    </DiagramTemplates>

</SfDiagram>

If "applyCss" is true, the class " hightlightvip" is supposed to be added in the DOM and change the background color.

The css beeing :

<style>

    .hightlightvip {

        background-color: #88e3bb !important

    }

</style>

That used to work in my project.

Can you validate on your part ? 

Regards,

--Nicolas

Attachment: Index_62bbbc93.zip

[Nicolas Navier]

I got it to work by calling refresh on the diagram, not too bad as a workaround.

You can still check on your side if you think that's supposed to be this way (pretty sure I did not need to do a refresh on the previous version 19.3.x).

Regards,

--Nicolas

[Aravind Ravi]

Hi Nicolas, 

We are validating your requirements and update you with more details on January 13^th 2022. 

Regards 

Aravind Ravi 

[Aravind Ravi]

Hi Nicolas, 

On further analysis of your requirement, we have changed the template behavior for diagram to render the template in multiple diagram. So, please use diagram refresh method to refresh the html/native template dynamically. 

Regards 

Aravind Ravi 

[Nicolas Navier]

Ok thanks, that's what I will use then, I had a feeling something had changed, glad I was not mistaken :-)​

[Shyam G]

Hi Nicolas,

We are happy to hear that your problem is resolved.

Regards,

Shyam G