Diagram toolbox property serialization

[Timon]

Hello everyone,

I'm currently stucked with the following situation.

I'm generating via a ViewModel the shapes for my toolbox. This is done via a property binding.

01.Public ReadOnly Property CostCenterToolbox As ObservableCollection(Of DiagramGallery)
02.    Get
03.        Dim galleryCollection = New ObservableCollection(Of DiagramGallery)()
04.        Dim gallery As New DiagramGallery With {.Header = "Cost centers"}
05.
06.        costCenterDataTable = ParameterProduction.Instance.Open_ParCostCenter
07.        For Each row As DataRow In costCenterDataTable
08.            Dim node = New WorkflowCostCenterNode With
09.                {
10.                    .Content = row.Item("costCenter") & vbCrLf & row.Item("Description"),
11.                    .TreeId= 0,
12.                    .ProcessId = 0,
13.                    .CostCenter = row.Item("costCenter"),
14.                    .Description = row.Item("Description")
15.                }
16.            gallery.Shapes.Add(node)
17.        Next
18.        galleryCollection.Add(gallery)
19.
20.        Return galleryCollection
21.    End Get
22.End Property

On the right side of the toolbox there is my diagram, which initially loads an existing workflow.

Now the problem is, that when dragging a shape from the toolbox to the diagram the dropped shape doesn't have any information about the node properties I gave it (in this case TreeId, ProcessId, CostCenter, Description are all Nothing).
As the documentation says, I need to serialize my custom properties, so that the diagram recognizes them.
The initially loaded workflow to the diagram is done via a GraphSource, which works perfectly (with the same node properties from above). In the GraphSource class I have those SerializeNode and DeserializeNode methods overriden.
But for the toolbox the nodes aren't in a graph source but added directly to the gallery and then to the gallerycollection (see code snippet above).

This might be the problem.
Is it possible to create the nodes, add them to a graph source object and then add them to the toolbox gallery?

Otherwise, how can I achieve, that when dragging the shape (initially created with the node and custom properties) from the toolbox to my diagram, that the node behind the shape has the custom property values I've initially set. Maybe the node properties are already lost, when the shapes are loaded into the toolbox?

I've read the following documentations without success :-(
- http://docs.telerik.com/devtools/wpf/controls/raddiagram/howto/drag-custom-toolboxitem

- http://docs.telerik.com/devtools/wpf/controls/raddiagram/features/raddiagrams-serialization#manual-serializationdeserialization

- http://docs.telerik.com/devtools/wpf/controls/raddiagram/extensions/toolbox#how-to-populate-raddiagramtoolbox-with-custom-data-items

Any hints and maybe short examples are very welcome

[Petar Mladenov]

Hi Timon,

I prepared a sample for you based on our Diagram Custom Settings Pane SDK demo. Here is the main flow to follow:

- In MainViewModel. cs I populate the Diagram ToolBox in MVVM way:

CustomGallery customGal = new CustomGallery() { Header = "Custom Shapes" };
            ShapeViewModel sModel = new ShapeViewModel();
            sModel.ID = "123456";
            sModel.Geometry = ShapeFactory.GetShapeGeometry(FlowChartShapeType.DataShape);
            customGal.Shapes.Add(sModel);
            this.Items.Add(customGal);

Notice this model introduces the ID string property.

- If you run the application and Drag the shape ion the Custom Shapes Tab, you will fire DefaultSerializationService_ItemSerializing event:

private void DefaultSerializationService_ItemSerializing(object sender, SerializationEventArgs<IDiagramItem> e)
    {
        if (e.Entity != null && e.Entity is RadDiagramShape)
        {
            var shape = e.Entity as RadDiagramShape;
            if (shape.Geometry != null)
            {
                e.SerializationInfo["MyGeometry"] = (e.Entity as RadDiagramShape).Geometry.ToString();
            }

            ShapeViewModel model = shape.DataContext as ShapeViewModel;
            if (model != null)
            {
                e.SerializationInfo["ID"] = model.ID;
            }
        }
    }

Notice here we save the ID property of the model in the Dictionary which is transferred via the SAVE / LOAD process.

- when you drop the shape in Diagram which has SerializableGraphSource bound to it, the DeserilizeNode function fires:

public override ShapeViewModel DeserializeNode(IShape shape, SerializationInfo info)
        {
            ShapeViewModel model = new ShapeViewModel()
            {
                 Geometry = GeometryParser.GetGeometry(info["MyGeometry"].ToString()),
                  ID = info["ID"].ToString(),
            };
            return model;
        }

Notice here we restore the  ID property on the newly created model.

I hope the given scenario and sample code will help you move forward.

Regards,
Petar Mladenov
Telerik by Progress

[Timon]

Hi Petar,

thanks for your reply.

Can you please explain to me, how I can convert the C# constructor of the code behind file to match my VB work?

1.SerializationService.Default.ItemSerializing += DefaultSerializationService_ItemSerializing;

 

This is your C# work and I can't figure out how I can match it with the VB-Code SerializationService.Default.SerializeItems (?)

Thanks in advance!

Timon

[Timon]

Ah well - I figured it out myself ;-)