SfDiagram in Xaml & Diagram_BeginNodeRender

Thuto Gaotingwe

Asked On April 17, 2019 09:51 PM UTC

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

Reply | Reply with quote

Sathish Sivakumar [Syncfusion]

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

Regards,

Sathish

Reply | Reply with quote

Sathish Sivakumar [Syncfusion]

Replied On 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.

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

Reply | Reply with quote

Thuto Gaotingwe

Replied On 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!

Reply | Reply with quote

Sathish Sivakumar [Syncfusion]

Replied On 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 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

Reply | Reply with quote

Dilli Babu Nandha Gopal [Syncfusion]

Replied On 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.

Regards,

Dilli babu.

Reply | Reply with quote

Thuto Gaotingwe

Replied On 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)

Reply | Reply with quote

Dilli Babu Nandha Gopal [Syncfusion]

Replied On 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");

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

Thread ID:	Created:	Updated:	Platform:	Replies:
144089	Apr 17,2019 09:51 PM UTC	Apr 30,2019 01:14 PM UTC	Xamarin.Forms	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US