We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfDiagram in Xaml & Diagram_BeginNodeRender

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


7 Replies

SS Sathish Sivakumar Syncfusion Team April 18, 2019 11:08 AM UTC

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 23rd April 2019. 


SS Sathish Sivakumar Syncfusion Team April 23, 2019 02:39 PM UTC

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. 

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. 


TG Thuto Gaotingwe April 24, 2019 08:55 PM UTC

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!

SS Sathish Sivakumar Syncfusion Team April 25, 2019 12:10 PM UTC

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 29th 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. 


DB Dilli Babu Nandha Gopal Syncfusion Team April 29, 2019 04:53 PM UTC

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. 
Dilli babu. 

TG Thuto Gaotingwe April 29, 2019 06:40 PM UTC

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)

DB Dilli Babu Nandha Gopal Syncfusion Team April 30, 2019 01:14 PM UTC

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"); 
                return grid; 
            return template; 
 //sets template for node 
 node.Template = getTemplate(); 
  3. Click action to a node.  
<syncfusion:SfDiagram x:Name="diagram" NodeClicked="Diagram_NodeClicked" /> 
        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  
To know more about to apply template in node, please refer the below link 
Dilli babu. 

Live Chat Icon For mobile
Up arrow icon