SfDiagram in Xaml & Diagram_BeginNodeRender

[Thuto Gaotingwe]

Hi, is it possible to have all the code that creates SfDiagram all in Xaml, including the code that adds nodes & their labelling/ styling. I have been trying to create a simple tree diagram for days using data that comes from my web service asynchronously and i failed. I tested organizational Chart sample from you & it works but it does have to wait for data from any services. 

In my project the use of .wait() method in async method does not work either; The Diagram_BeginNodeRender does not run!! never runs. The code only loads the chart without any labeling or styling

  

[Sathish Sivakumar]

Hi Thuto, 

Greetings from Syncfusion. 

We have forwarded the details to development team to analyze your requirement on Organizational Chart in SfDiagram, we will provide further details on this issue on 23^rd April 2019. 

Regards, 

Sathish 

[Sathish Sivakumar]

Hi Thuto, 

We tried to reproduce the reported issue from our side but we are unable to reproduce it. We have shared the sample which was used at our end. 

Sample link: http://www.syncfusion.com/downloads/support/forum/144089/ze/diagramsample_(3)2033962759.zip  

Kindly modify the sample to reproduce the issue and share us the same which will be helpful for us to provide you a prompt solution at the earliest. 

Regards, 

Sathish 

[Thuto Gaotingwe]

Hi Sathish Sivakumar,

Am still failing to get it to work with a real API asynchronously via MVVM & binding to the DataSource, the thing is... it seems like the diagram gets rendered while the app is still getting data from the service. This results in nothing showing?? I have taken the initiative of creating a temporary dummy JSON api (http://thutopaul-001-site7.btempurl.com/api/EmployeesAPI) in one of my servers which I want you to use & render a SfDiagram as an example. When you render please also show how to display the "Role" field as the name of the node

Thank you!

[Sathish Sivakumar]

Hi Thuto,  

We have prepared a sample based on the given JSON which is available in the following link. 

Sample link: http://www.syncfusion.com/downloads/support/forum/144089/ze/diagramsample-1115339446.zip

We have modified the JSON with the following changes, 

Case 1: We have changed “Team” object value from “null” to “1” since “null” occurs more than one instance(for HR team and Production and Sales Team). Since, we currently do not provide support to multiple parent in Layout in SfDiagram Xamarin. We will analyze the feasibility of multiple parent support and will update you on 29^th April 2019. 

Case 2: We have changed parent ID value to Overall parent id for the object contains same employee id and team ({"team":"2","role":"R and D Team","employeeId":2}) in the sample side. Since, we cannot have different layout in a single layout. This modification was done for better use case. 

Kindly let us know if you require any further assistance. 

Regards, 

Sathish 

[Dilli Babu Nandha Gopal]

Hi Thuto,  

 

As mentioned earlier, SfDiagram does not provide support to multiple parenting support. So, Kindly share us your complete use case scenario or requirement which will be helpful for us to provide you a prompt solution or workaround at the earliest. 

 

Regards, 

Dilli babu. 

[Thuto Gaotingwe]

Hi Dilli & Sathish,

The sample project that you created helped me to solve the problem that I was having, thank you so much for that, i can now plot nodes! Am not looking for multi-parenting at the moment but it is definitely something that am going to need in the near future(2020), hopefully then you will have updated SFDiagram to include that. I do however want to add tapped event to my diagram nodes, is it possible?? If yes please show me how, I also want to apply a template to improve the UI of the nodes but am not sure where to start, if possible can you update the current project sample that you shared with me... showing how I can apply a simple template (changing node color/shape, showing a picture in a node & adding a click/ tapped event to a node)

[Dilli Babu Nandha Gopal]

Hi Thuto, 

 

Thank you for your update. 

 

Yes, you can achieve the mentioned requirements in SfDiagram by using the following code example 

 

  1. Changing the node shape type / colour  

node.ShapeType = ShapeType.Ellipse; 

 

Style style = new Style() { Brush = new SolidBrush(Color.OliveDrab) }; 

node.Style = style; 

 

  2. Showing image as template  

public DataTemplate getTemplate() 

{ 

            var template = new DataTemplate(() => 

            { 

                Grid grid = new Grid(); 

                grid.WidthRequest = 80; 

                grid.HeightRequest = 80; 

                Image image = new Image(); 

                image.Source = ImageSource.FromResource("diagramsample.employee.png"); 

                grid.Children.Add(image); 

                return grid; 

            }); 

            return template; 

} 

 //sets template for node 

 node.Template = getTemplate(); 

 

  3. Click action to a node.  

XAML : 

 

<syncfusion:SfDiagram x:Name="diagram" NodeClicked="Diagram_NodeClicked" /> 

             

C#: 

 

        private void Diagram_NodeClicked(object sender, NodeClickedEventArgs args) 

        { 

            Node node = args.Item as Node; 

            DisplayAlert("Employee Information", "Role :" + node.Annotations[0].Content, "Cancel"); 

        } 

 

We have modified the sample as per your requirement. Kindly download the sample from the following  

http://www.syncfusion.com/downloads/support/forum/144089/ze/diagramsample1474421970 

 

To know more about to apply template in node, please refer the below link 

https://help.syncfusion.com/xamarin/sfdiagram/node#customization 

 

Regards, 

Dilli babu.