Updating DataSource after clicking on a node in SfDiagram

[Oyede]

Hi All,

I want to add a new set of data from a web service after clicking on Yoshi.

For example, after clicking on Yoshi, Sam and Jon should display under it.

Please how do I go about this?

[Gayathri Ramalingam]

Hi Oyede, 

 

Thank you for using Syncfusion products. 

 

We can add new node while clicking node under it (i.e., after clicking on Yoshi, Sam and Jon displayed under it.). We have prepared sample for the same and it can be downloaded from below link, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/NuGetSample1081631980 

 

Could you please try the above suggested solution and let us know whether it meets your requirement or not?   

 

With Regards, 

Gayathri R 

[Oyede]

Thank you very much. This solved my problem perfectly.

[Gayathri Ramalingam]

Hi Oyede,  

 

Thank you for your update. We are glad to know that the issue is resolved.  

 

With Regards, 

Gayathri R 

[Oyede]

Hi Gayathri,

Is there any way I can display both names and designations together?

[Gayathri Ramalingam]

Hi Oyede, 

 

Yes. We can display both names and designations together in node and it can be achieved by applying template for node. Kindly use the below code snippet to achieve your requirement.  

 

//Apply template for node. 

DrawTemplate(node); 

 

private void DrawTemplate(Node node) 

{ 

      var NodeTemplate = new DataTemplate(() => 

      { 

                

                StackLayout content = new StackLayout() 

                { 

                    WidthRequest = 100, 

                    HeightRequest = 40, 

                    Orientation = StackOrientation.Vertical 

                }; 

                Label name = new Label() 

                { 

                    TextColor = Color.FromRgb(255, 0, 0), 

                    Margin = new Thickness(0, 8, 0, 0), 

                    Text = (node.Content as Employee).Name, 

                    FontSize = 10, 

                    HorizontalOptions = LayoutOptions.CenterAndExpand 

                }; 

                Label designation = new Label() 

                { 

                    Text = (node.Content as Employee).Designation, 

                    TextColor = Color.FromRgb(255, 0, 0), 

                    FontSize = 10, 

                    HorizontalOptions = LayoutOptions.CenterAndExpand 

                }; 

                content.Children.Add(name); 

                content.Children.Add(designation); 

                Frame style = new Frame(); 

                style.Content = content; 

                style.Padding = new Thickness(0); 

                style.CornerRadius = 5; 

                style.BackgroundColor = FillColor[(node.Content as Employee).Designation]; 

                style.BorderColor = StrokeColor[((node.Content as Employee).Designation)]; 

                style.HasShadow = false; 

                return style; 

 

 

 

            }); 

            node.Template = NodeTemplate; 

} 

 

We have prepared sample for the same and it can be downloaded from below link,  

https://www.syncfusion.com/downloads/support/directtrac/general/ze/NuGetSample1514093579 

 

Please refer the below UG documentation, 

https://help.syncfusion.com/xamarin/diagram/node?cs-save-lang=1&cs-lang=csharp#customization 

 

Could you please try the above suggested solution and let us know whether it meets your requirement or not?    

 

With Regards, 

Gayathri R 

[Oyede]

Hello Gayathri, Sorry for the late reply.

I have been able to display both the name and the designations but there are still some issues.

1. The Corner Radius for the frame doesn't seem to work when the node template is used.
2. When I add data from a web service to the DataSource in the diagram_NodeClicked handler, the data doesn't seem to show up. However, if I add it manually it works. See code snippet below

//Adding to Teams Collection manually which works


//id == parentId

Teams.add(new Team(firstname = "Rick", lastname = "blackwell",id = 1, employee_id = 30))

Teams.add(new Team(firstname = "Tarlly",lastname = "Pickket",id=1,employee_id=34))

diagram.DataSourceSettings = new DataSourceSettings(){DataSource = Teams, Id = employee_id, ParentId = id}

//add from web service doesn't work

var teamList = await service.getTeams();

foreach(var item in teamList){

Teams.add(item)

}

diagram.DataSourceSettings = new DataSourceSettings(){DataSource = Teams, Id = employee_id, ParentId = id}


[Gayathri Ramalingam]

Hi Oyede, 

 

Please find the details for your query from below, 

 

Query	Details
The Corner Radius for the frame doesn't seem to work when the node template is used.	We were able to reproduce the issue “Corner radius is not applied when the node template is used." in our side and we suspect this to be a defect. We have forwarded this issue to our development team for further analysis and we will update further details by 09th August 2021.
When I add data from a web service to the DataSource in the diagram_NodeClicked handler, the data doesn't seem to show up. However, if I add it manually it works. See code snippet below	We are currently working on this. We will analyze  and update you details on 06th August 2021. Could you please provide the ‘json’ file or modify the sample which we provided in the previous update to reproduce the reported issue. It will be more helpful for us to reproduce the issue in our side and assist you with the better solution at the earliest.

 

 

With Regards, 

Gayathri R 

[Gayathri Ramalingam]

Hi Oyede,  

 

Thank you for your patience.  

 

We tried to reproduce the issue “Data not displayed while getting values from WebService” using SfDiagram, but it is working fine as expected. 

  

We have created a simple sample based on the provided information and the sample can be downloaded from the below link.  

https://www.syncfusion.com/downloads/support/directtrac/general/ze/NuGetSample-1931170943 

 

Kindly provide the following details to investigate further on this issue.   

1.      Modify / Simple sample with which the issue could be reproduced. 

2.      Replication procedure to reproduce the issue or screen shot illustrating the issue. 

3.      Android device specification with the OS version. 

The above details will be more helpful for us to reproduce the issue in our side and assist you with the better solution at the earliest.   

 

Note: We have to set the proper ‘Id’ and ‘ParentId’ property while initializing DataSourceSettings in diagram. 

 

With Regards, 

Gayathri R 

 

[Oyede]

Hello Gayathri,

Sorry for the late reply. I have been able to solve the issue of "​​Data not displayed while getting values from Webservice", ​The issue was caused by a mix up of ids for the employees.​

[Gayathri Ramalingam]

Hi Oyede,

Sorry for the inconvenience. As promised, we are unable to provide the validation details for “Corner radius is not applied when the node template is used” today. We will consider this as high priority and provide you the details on 11^th August 2021. 

 

 

With Regards, 

Gayathri R 

 

[Oyede]

Ok Thanks Gayathri. I would be waiting for the details.

[Gayathri Ramalingam]

Hi Oyede, 

 

Thank you for your patience.  

 

On further analyzation we found that, currently we do not have support for “Template with CornerRadius in SfDiagram control in Android”. However, we have added it to our feature request list, we will implement the mentioned feature in any our upcoming release. We will let you know when this feature is implemented. The status of implementation can be tracked through our Features Management System:     

https://www.syncfusion.com/feedback/27819/need-to-provide-support-for-template-with-cornerradius-in-android 

 

 

With Regards, 

Gayathri R 

[Oyede]

Hi Gayathri,

Thank you for your response.

[Hruday]

Hi Gayatri,

I Tried about above code base but facing issue where nodes are not displayed ..Can you please help me

[Benin JayaDhas]

Hi Oyede,

Sorry for the inconvenience.  we were
able to reproduce the issue from our side. Kindly provide the platform details on which you are facing this issue. On analysis we have noted that it is working fine in android and iOS platform , only in UWP platform we are facing the issue. Currently we are validating the issue and we will provide further details on 21^st July 2022 .

Regards

Benin Jayadhas

[Hemalatha Duraisamy]

Hi Oyede,

Sorry for the inconvenience caused. Due to complexity still, we are validating the issue on “Nodes are not displayed properly in UWP Platform”. We will update the further details on 25^th July 2022.  

Regards,

Hemalatha D.

[Hemalatha Duraisamy]

Hi Oyede,

We have confirmed that the issue “Node disappears in Node clicked event after clicking the node in UWP Platform”. is defect and logged defect report for this issue. The fix for the issue will be available on 8^th August 2022.

FeedBack Link:  https://www.syncfusion.com/feedback/36588/node-disappears-in-node-clicked-event-after-clicking-the-node-in-uwp-platform

Note: We will provide the custom NuGet for the fix. If you require a patch for the reported issue in any of our Essential Studio Main or SP release versions, then kindly let us know the version, so that we can provide a patch in that version based on our SLA policy.  

Regards,

Hemalatha D.

[Hruday]

Thank you  Hemalatha :)

[Hemalatha Duraisamy]

Hi Oyede,

We have fixed the reported issue with “Node disappears in Node clicked event after clicking the node in UWP Platform” in this product version v20.2.0.43 and we have created a Custom NuGet for this fix. This fix will be included in our upcoming weekly NuGet.     

  

Please find the download link below,  

Custom NuGet: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Diagram-77287654

  

Note: If you require a patch for the reported issue in any of our Essential Studio Main or SP release versions, then kindly let us know the version, so that we can provide a patch in that version based on our SLA policy.  

Regards,

Hemalatha D.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.