Adding my own properties into settingspane of raddiagram on selection of shape

Some body please give me response. how can i store extra data with each shape on diagram which can be edited by using settingspane.


Regards
KOTI.M

Hello Koti,
Here you can read how to create a custom diagram shape. As for the settings pane - you have two options:
- you could edit the default template and put whatever you want there (this approach is better if you do not want to keep the default SettingsPane template)
- with a little bit of code behind you could add a new TabItem in the settings pane and put the new settings there (this is better for the cases when you want to add new functionality to the default one)
I've attached a sample project showing the second approach so could you please examine it and if you have more questions feel free to ask.

All the best,
Zarko
the Telerik team

Hi Zarko ,

          Thank you very much for your response, the solution that you have given is great. the second way which you told suits for my application.
           Now I am facing two problems.
           Problem 1 is, i want to use all the Gallery-item's from the extensions namespace. As its difficult to create those many custom shapes, on drop of shape into the diagram, i am assigning an object of custom class with all the extra info, To the tag of shape. So how to bind the object that exists in Tag of Selected shape to the newly added tab-Content ?

          Problem 2 is: when i save the diagram, to save the extra info that exists with each shape, i am handling shape-serialized,
 shape-De-serialized events of rad-diagram. now the problem is if i save the in for as an attribute, while De-serializing i am getting it back.

ex: info["Data"] = "40;Dining room";

          but if i create an xmlnode and store into serialization-info, it exists in saved XML. but while Desalinizing i am getting null.

ex: info["address"] = new XElement("address",
                new XElement("StreetLine", "Alexander Malinov Blvd. 33"),
                new XElement("Zip", "1729"),
                new XElement("City", "Sofia"),
                new XElement("Country", "Bulgaria")
                );
       address node will exists in outputxml. but while loading it back on Desalinization, info["address"] is giving null.

Hope you understand what i am trying to implement and whats the problem is. if anything is not clear, kindly let me know i will describe in more detail.

     And is there any better way that can i do for getting the same features. as bellow
           1 Need to use All the galleryItems from extensions with out creating customshapes for each item.
           2 Need to store extra info with each item.
           3 Need to serialize and deserialize Extra info added to each item while saving and loading back to and from raddiagram.
           4 The extra info should be editable using settings pane of the raddiagram. along with the default properties that are editable with settings pane.

       Please suggest me.


Thanks & Regards
       KOTI.M





           3 Need to

Hi Koti,
If you want to use all of our predefined items you should just set the itemsSource of your RadDiagramToolBox to an HierarchicalGalleryItemsCollection. The toolBox works with Galleries and GalleryItems so you could manually choose your items too.
As for your second question - unfortunately at the moment the RadDiagram supports only string serialization. The value of your XElement is in the file but it is not parsed to the serializationIfno.
If you have further questions please feel free to ask.


Regards,
Zarko
the Telerik team

Thank you very much Zarko.

Regards
 Koti.M

Hi Zarko ,
How can i bind text property of settings pane to some property of my viewmodel?

and

Could you give me small example how to edit the default template?

And how should i know in my viewModel  what type of shape i add it from toolbox if i do that by dragging

Thanks & Regards!

Hi Srikanth,
Unfortunately at the moment there's no straightforward way to access/bind the settings pane to a property in your viewModels. We're planning to improve the extensibility of our SettingsPane for the next major release - Q2 2013 and we'll try to add this feature.
For now there is a possible workaround with a custom valueConverter for the binding and an eventHandler. I've attached a sample project with this workaround and a custom settingsPane template so you could try it out.
I'm not sure that I understand your third question so could you please elaborate on it a little bit more?
I hope I was able to help you and we're looking forward to hearing from you again.

Regards,
Zarko
the Telerik team

Hi Zarko ,

          Thank you very much for your response, it's clear for me know about settings pane.
About third question.
I bind diagram to my graphsource, which inherit your ObservableGraphSourceViewModelBase<Node, Link>, where Node is my own node which inherit your NodeViewModelBase and Link is inherit you LinkViewModelBase. So when i dragging shape from a toolbox and place it at the diagram panel new node is create, i override your CreateNode method so after checking geometry i know what shape is it creating. Still i have a trouble. When i add shape i know position, but when i dragging shape over the diagram canvas the position property doesn't change. But if i save diagram to XML file (using XMLSerializer) and load from it (also using XMLSerializer) the position property is changing while dragging.

And now i have one another trouble. I create link between shapes, and all is working correct. But if i save diagram to file (using XMLSerializer) and after loading from file (also using XMLSerializer) all of my links appear at the position {0,0}. The nodes appear correctly. I don't know what is the problem because i bind and nodes and links position property to my viewmodel.

Probably i do something wrong but i don't know where.
Please suggest me asap!

P.S. And how should i correctly implement your base class methods:
AddLink
AddNode
CreateNode
CreateLink
RemoveItem
RemoveLink

P.P.S. Just find. When i load graphsource from XML file, the CreateNode and other methods doesn't call... in's strangely
P.P.P.S. Have one last question. What difference between InternalItems/InternalLinks and Items/Links??

Thanks & Regards!

Hello Srikanth,
Unfortunately without a sample project or at least some code snippets I can't be sure what exactly goes wrong in your case. From your explanation I guess that the Position binding is lost somewhere (note: if you change the position property of a shape, before the style is applied, the binding won't work) and that's why it is not changed on dragging.
For the saving your diagram I suggest that you use our diagram.Save and diagram.Load methods (or fileManager.SaveToFile and fileManager.LoadFromFile) and also your graphSource should be SerializableGraphSourceBase<MyNode, MyLink>.
The correct implementation of those methods really depends on your specific implementation, but you can take a look at our MindMap example and see how we're implementing them.
Yes the CreateNode method is not called but if you use SerializableGraphSouce the DeserializeNode method will be called.
There's really no difference between those collections - Items and InternalItems are actually the same collection, but the InternalItems are casted to ObservableCollection for convenience.
I've attached a sample project showing MVVM with Position binding and Save/Load so could you please examine it and tell us if this is what you're looking for.

All the best,
Zarko
the Telerik team

Hi Zarko ,
Thank  you! I checked your sample project. Save-load working correctly, but after loading, your binding of position is lost at the shape template. Position is changed but it's not showing on the shape content in your example. And in addition i cant bind another property (like height or width)
Thanks & Regards!

Hello Srikanth,
Thank you for pointing out this issue - it seems that I've missed this scenario. Could you please try to change the SerializeNode and DeserializeNode methods with these ones:
This should fix the problem and if I've missed something else or you have further questions please feel free to ask.

All the best,
Zarko
the Telerik team

Hello Zarko ,
Thank  you! You solved my issue. But i face with another problem. I have read you article about custom toolbox :
http://www.telerik.com/help/wpf/raddiagram-extensions-toolbox.html

And if i use your solution, all is working correctly, but if i dragging shapes to the diagram, these shapes transform to the rectangles. What should i do to fix this problem.
If you need some snippets of code, please tell me. But if you don't, suggest me ASAP.

Thanks & Regards!

Hi Srikanth,

In WPF the drag/drop operation doesn't work out-of-the-box since the Geometry of the dragged shape isn't serialized. This is why you'll have to customize the shape serialization that is implemented in the RadDiagramToolbox. For that purpose you can use the SerializationService and attach a handler for the ItemSerializing event. In the handler, you need to manually serialize the geometry of the dragged shape. You can read more information about the RadDiagram services in our documentation.

Then you can handle the RadDiagram.ShapeDeserialized event to deserialize the Geometry. I attached a sample solution demonstrating this approach. Please give it a try and let me know if it works for you.

Regards,
Tina Stancheva
the Telerik team

Hi, Tina Stancheva!
I've try your sample project and i think, your GeometryParser is working bad.
I always have an error when try to parse the geometry string.

Probably i do something wrong. Now i stack with this issue. So could you help me please?

Thanks & Regards
Srikanth

Hi srikanth,

We haven't received similar reports for badly working GeometryParser. Could you pleas elaborate more on your exact issue? Any additional information would be highly appreciated - the error message, stack trace of the exception. Are you able to reproduce your issue in the provided solution? If not, is it possible for you to modify it so that we can investigate it better? Or you can simply open a new support thread with an isolated project attached.  What is the exact control version that you use ?
Thank you in advance for your cooperation.

Greetings,
Petar Mladenov
the Telerik team

I get your example :
ToolBoxToDiagramDnD.zip
and when i drag the shape from toolbox to the diagram and when i drop it i have an error occurred at the geometry parser with message:
" Unexpected token 'M111,5;37,5C111,5;57,91 86,67;74,5 56;74,5 25,33;74,5 0,5;57,91 0,5;37,5 0,5;17,09 25,33;0,5 56;0,5 86,67;0,5 111,5;17,09 111,5;37,5z' encountered at position '6'. "
and stack trace:
"    at MS.Internal.AbbreviatedGeometryParser.ThrowBadToken()
   at MS.Internal.AbbreviatedGeometryParser.ParseToGeometryContext(StreamGeometryContext context, String pathString, Int32 startIndex)
   at MS.Internal.Parsers.ParseStringToStreamGeometryContext(StreamGeometryContext context, String pathString, IFormatProvider formatProvider, FillRule& fillRule)
   at MS.Internal.Parsers.ParseGeometry(String pathString, IFormatProvider formatProvider)
   at System.Windows.Media.Geometry.Parse(String source)
   at Telerik.Windows.Controls.Diagrams.GeometryParser.GetGeometry(String path)
   at ToolBoxToDiagramDnD.MainWindow.RadDiagram_ShapeDeserialized(Object sender, ShapeSerializationRoutedEventArgs e) in c:\Users\Admin\Desktop\ToolBoxToDiagramDnD\MainWindow.xaml.cs:line 42 "

As for"Are you able to reproduce your issue in the provided solution?  Yes. I able to reproduce this error"

Maybe i doing something wrong.
Expect for your help. Thanks in advance

Hi Srikanth,

I downloaded the sample from the link you provided, I extracted it on our side and I was able to successfully run the project. I dragged each shape from the DiagramToolbox to the diagramming surface and I couldn't reproduce the issue.

Am I following incorrect steps? Do you think you can make a small screencast demonstrating how you reproduce the issue on your side? Thank you in advance.

Regards,
Tina Stancheva
the Telerik team

Hi Zarko,
Thank you for your solution to other programmer,it help me solve some problem about how to Customize SettingsPane,but I have another problem:
How to require the value of the RadControl in SettingsPane?
In my project,I want to set the property of the RadDiagramShape in RadDiagram using SettingsPane,then save the property to Access database.
Please help me in doing this. 

Thanks & Regards
Wang

Hello Wang,

If you need to customize the SettingsPane, I'd recommend first looking at the SettingsPane article. It describes the structure of the control and provides further information on how to customize its content.

Then you can also download and examine the CustomSettingsPane example in our SDK. It demonstrates how to add a new custom tab to the SettingsPane. Once you open the project please take a look at the Resources.xaml ResourceDictionary where you can find a customized style and specifically ControlTemplate of the SettingsPaneView control. In the ControlTemplate of the SettingsPaneView there is a SettingsPaneStyleControl - which is the default Style tab of the SettingsPane and a custom tab - Toolbox. In the custom tab there is a TextBox that allows users to enter a value. This value is defined to be taken and applied on a business property in the DataContext of the currently edited shape. Please note the following attached properties:

• SettingsPaneView.EditorPropertyName - sets the property that should take the entered value. In the sample this is a business property coming from the DataContext of the RadDiagramShape. I guess this is the feature you'd like to implement in your case as well.
• SettingsPaneView.EditorItemType - this property represents the type of the objects on which the SettingsPane Editor Control should work. It can say None, Shapes, Connections, Custom, All.
• SettingsPaneView.EditorValue - this property defines the value of which property of the current control should be taken and applied on the currently edited shape

I hope this information will get you started.

Regards,
Tina Stancheva
Telerik

Regarding Settings Pane MVVM support:

"Unfortunately at the moment there's no straightforward way to access/bind the settings pane to a property in your viewModels. We're planning to improve the extensibility of our SettingsPane for the next major release - Q2 2013 and we'll try to add this feature."

The release notes of Q2 2013 mention nothing regarding this having been added.  Can we have a status update, possibly a soon dev release with this feature added?

The converter provided CustomSettingsPane.zip does provide a working solution for binding VM properties to the Settings Pane UI controls.

Thanks,
Mike

Hi,Tina
Thank you for your response to help me solve my questions.On the basis of the example you gave me,I customized the new SettingsPane.But I come up against another problem that when I changed the property of the shape in the diagram,I find the property of all the other same shapes also changed.I want to know how to achieve the result that set the property for the single shape like the default SettingsPane.
Please help me in doing this.

Thank & Regards
Wang

Hi,Zarko
I want to get the value of the RadDiagramShape in the SettingsPane I customized.Also,I customized the RadDiagramToolbox and used the approach to drag the toolboxitem to diagram:

I get your example:

• CustomSettingsPaneUpdated.zip

Hi guys,

@Mike - The SettingsPane control was refactored with Q2 2013. Its ControlTemplate was changed to allow easier modification and to expose more extension points. Please take a look at the SettingsPane documentation for further information. Also please note that the solution Zarko provided is outdated and instead I'd recommend going through the  CustomSettingsPane example in our SDK. It demonstrates how to use the default Style tab and also add a custom tab which allows users to create a new shape and customize its underlying business data values before adding it to the DiagramToolbox.

@Wang - I wasn't able to reproduce the issue you described regarding the SettingsPane. I can successfully change only the properties of the currently edited DiagramItem. In order to test such a scenario I modified our SDK example to include a custom tab that allows you to define the content of a shape. The content is represented by a custom business property. Also, please note that as Zarko's example is using an older version of the SettingsPane control, I'd recommend basing your sample on the CustomSettingsPane example in our SDK. Also, please have in mind that in both samples the RadDiagram is databound to a collection of items. This is why it is populated through its GraphSource property and adding shapes in its Shapes/Items collection isn't allowed. The GraphSource property acts as an ItemsControl.ItemsSource property and similarly to the ItemsControl logic - you can't set both the Items and ItemsSource collections.

I attached a sample solution where I customized the SettingsPane control to include  a tab where the user can change the current content of a selected shape. Also, I've modified the default Drag/Drop logic between the RadDiagramToolbox and the RadDiagram so that the operation passes data objects. Please have a look at the solution and let us know if it helps.

Also, please don't hesitate to write back if you have any further questions regarding the SettingsPane customization. And if you have any other issues please open a new support ticket where they can be handled more precisely.



Regards,
Tina Stancheva
Telerik

Hi,Tina,
Thank you for your response!
I have some ideas from your sample and  I get another sample solution from Zarko in the forum to suit my solution.

• CustomSettingsPaneUpdated.zip

Now I have two questions:
1) First,I want to hold the default Drop/Drag logic between  the RadDiagramToolbox and the RadDiagram.
 And in my solution,different tool item have different SettingsPane,the meaning is that the contenttemplate is different in the SettingsPane.What's more,I don't wanna use  the TabControl in the SettingsPane.
The above sample has the same contenttemplate in the SettingPane.So,I don't know how to set the different DataTemplate for different toolshape.
2) The second question,when I Drag/Drop the RadDiagramToolboxItem,how to deserialize Node for different RadDiagramToolboxItem.
This sample have the same Node for all RadDiagramToolboxItem.But if  different Node for RadDiagramToolboxItem?

I'm very anxious to solve this problem.Please help me in doing this as soon as possible!
Thank you very much!
Regards
Wang

Hi Wang,

 First we highly encourage you to take advantage of our support system by sending a support ticker where a 24 hours response time is guaranteed. Simply refer this thread to the the new support thread.
I made a small change to your project to support editing a ViewModel's property directly (this works from Q2 2013):

This way set , the previously used converter and TextBoxLoaded event are not needed anymore.

Now to your questions:
1) You can use different SettingsPaneViewStyles and apply them on PreviewAdditionalContentActivated event:
2) I am not sure what is your exact requirement. Could you please elaborate a bit more ? If you need to serialize some custom properties you can subscribe for the ItemSerializing event handler like so:
This is also demonstrated in the attached sample. In the handler you can save properties like so:
Please let us know if this helps you proceed further or not. Regards,
Petar Mladenov
Telerik

Hi
Can somebody explain how to add custom tab into predefined Telerik setting pane and how to save these custom tab properties values into XML files with the predefined setting pane values in Silverlight application?
 
Thank you,
J.SIva

Hi Siva,

 You have to edit the Style of the SettingsPaneView and apply it implicitly in order to add new Tabs. It is explained in this help article and demonstrated in our CustomSettingsPane XAML SDK sample.
As for the XML, what exactly are you trying to save into an XML file ? It is typical to save predefined XAML in XML. Usually in XML you save the current state of the Diagram (the positions, sizes of the shapes and connections). Could you please elaborate a bit more on this particular requirement ? Thank you in advance for your cooperation.

Regards,
Petar Mladenov
Telerik

Hi Petar
Thank you for your response,
I have added one custom tab into telerik setting pane and i have added two text boxes inside this custom tab, but i am not able to save those custom tab  text boxes values into the xml file

Regards,
J.Siva

Hi Petar,

I have added one custom tab into telerik setting pane and i have added two text boxes inside this custom tab, but i am not able to save those custom tab  text boxes values into the xml file . So please provide me a sample silverlight example. give me the solution  how to save into xml files in my custom tab properties in the setting pane for every shape,

Regards,
J.Siva

Hi Siva,

 How do you use these TextBox-es ? Do they display a ViewModel value or they directly edit a Shapes's Custom proeperty or label in their template ? What else do you save in the XML, do you need the whole diagram structure ? 

Regards,
Petar Mladenov
Telerik

Hi Petar,

Text Boxes directly edit a Shapes's Custom proeperty or label in their template , I  need the whole diagram structure into xml  format. And also i want to save the whole diagram which contains more than one shapes. i want to save all shapes same property with different values..those values i will give with the setting pane: my custom tab : text boxes for each shape

Regards,
J.Siva

Hi Siva,

 Since you directly made changes to properties of the DiagramShapes (or class that inherits from RadDiagramShape / RadDiagramShapeBase) you can use the usual way of extending the Diagram Serialization process - by handling ShapeDeserialized and ShapeSerialized events. This technique is described in the following help article:
Diagram Serialization => Section Extending Diagram Serialization

Regards,
Petar Mladenov
Telerik

Hello

Is there a way to access/bind data from the settings pane to a viewModel yet?

If yes is there an example project someone can link me?

Hi Panos,

You can use the Settings Pane attached properties to bind it to your viewmodels. You can take a look at the CustomSettingsPane demo from our SDK Samples Browser to get a better idea of how to use these properties.

Please, review it and let me know if it answers your query.

Regards,
Dimitar Dinev
Progress Telerik

Okay i got it working but i have a small problem, when using fluent theme light variation all is ok , but when i change to dark variation the field colors dont change appropriately (see screenshots)

Is there any way around this ?

Also is there an easy built in way to save the changes the user made so they can be loaded the next time he opens the app?

Hello Panos,

Since your query differentiates from the original subject of this forum thread, I have taken the liberty of creating a new support ticket on your behalf. May I kindly ask you to continue the communication on the matter there in order to keep our conversation history in order?

Thank you in advance for your cooperation on the matter.

Regards,
Dimitar Dinev
Progress Telerik