Problems with Datacontext while using a DataTemplate

[Michael]

I have created a project that is using the sample in the code library http://www.telerik.com/community/code-library/silverlight/diagrams/partial-silverlight-conversion-of-the-financial-dashboard.aspx

This essentially a striped down version of the DashboardDesigner but for Silverlight.

I have created a new shape with a set of dependency properties, one of which is called Title. I have also created a corresponding object in the Toolbox for this item. When this object is dragged to the diagram surface I have opted to use the following Datatemplate:

                <DataTemplate x:Name="BlahBlahShape">
                    <Border BorderBrush="#FF87ACBE" BorderThickness="2" VerticalAlignment="Top" Grid.RowSpan="2"
						CornerRadius="5" Background="#FFF1FAFF">
                        <Grid x:Name="PART_maingrid">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Border BorderBrush="#FF87ACBE" BorderThickness="0,0,0,1" VerticalAlignment="Top"
								CornerRadius="5,5,0,0" Background="#FFF1FAFF" Cursor="Hand" x:Name="PART_HeaderBorder">
                                <ContentPresenter x:Name="Header" HorizontalAlignment="Left" Content="{Binding}"
									Margin="0 4" ContentTemplate="{StaticResource HeaderTemplate}" />
                            </Border>
                            <telerik:RadToggleButton Style="{StaticResource RadToggleButtonStyle}" Width="15" Height="17"
								IsChecked="True" x:Name="ShowHideButton" VerticalAlignment="Top"
								HorizontalAlignment="Right" Margin="0 6 6 0" />
                            <Border Background="White" Padding="0" BorderBrush="Transparent" Grid.Row="1"
								BorderThickness="1" CornerRadius="0" VerticalAlignment="Top">
 
                            </Border>
                        </Grid>
                    </Border>
                </DataTemplate>

Where the HeaderTemplate is  

   <DataTemplate x:Key="HeaderTemplate">

        <Grid Width="184" Height="60">
            <StackPanel Margin="5,2,0,0" HorizontalAlignment="Left">
                <TextBlock x:Name="PART_Header" Text="{Binding Title}" Foreground="#FF000000"
								TextTrimming="WordEllipsis" TextWrapping="NoWrap" Width="Auto" MaxWidth="160"
								Height="20" FontFamily="Segoe UI Semibold" FontSize="12" />
                <TextBlock x:Name="PART_SubHeader" Text="{Binding Path=Title}" Width="Auto" Height="Auto"
								TextWrapping="Wrap" FontSize="12" Foreground="#FF000000" FontFamily="Segoe UI" />
            </StackPanel>
        </Grid>

My problem is that I dont know what to set the datacontext to. I have tied a number of things to no avail. For example, in the BlahBlahToolboxItem where the actual shape is created on DragDrop

	public class TaskToolboxItem : ContentControl, IToolboxItem

	{
		public BlahBlahToolboxItem()
		{
	            DefaultStyleKey = typeof(TaskToolboxItem);
			//Content = "Text";
		    	
		}
 
		public RadDiagramShape CreateShape(Point position)
		{
 
            		var shape = new TaskShape();
           		this.DataContext = shape;
 
	     		shape.Title = "Testing";
			shape.Position = position;
			return shape;
		}
	}

I have also tried to set the Datacontext to the Raddiagram after it is created. 

What I am missing?

[Miro Miroslavov]

Hello Michael,

 I'm not sure if I understand your scenario. Why do you need to use DataTemplates? If you want to template the  TaskToolBoxItem control, you'd better use it's ContolTemplate. This control is only to define how the "shape" should look like in the Toolbox. Also this is only one way to make this happen, you can also use directly a shape there, no need for ToolBoxItem control. 
In case you need further assistance I would recommend you to send the sample you currently have so we can check directly the core. Thank you. 
You may also have a look at the blog post regarding the Financial Dashboar sample - http://blogs.telerik.com/miromiroslavov/posts/12-03-07/a-financial-dashboard-designer-based-on-raddiagram.aspx 

Greetings,
Miro Miroslavov
the Telerik team

[Dave Navarro]

Hello Michael,

I'm looking to setup a dynamic OrgChart from the code behind and thought I should use a Data Template to accomplish this... now I'm not so sure.

Did you get your question and code resolved?

If so, can you share any ideas or code to help me get started?

Thanks!

~ Dave

[Miro Miroslavov]

Hi Dave, Data templates are perfectly suitable for many scenarios including Org chart. But of coarse it depends on your custom needs - for example do you need to Copy/Paste, Drag & Drop, Save/Load your items. In case you need that "serialization" functionality - you'll most probably need to

1. Inherit from our RadDiagramShape
2. Provide custom control template and properties to suits your scenario
3. Override the Serialized and Deserialized methods of the shape to save/load your custom properties of the shape

If you elaborate more on your custom scenario, we may provide you better assistance. 
Thank you for your cooperation. 

Regards,
Miro Miroslavov
the Telerik team

[Dave Navarro]

Hello,

Thanks for getting back with me. I'm writing an application that has a need for 3 different versions of the diagram tool.

1. It needs an Org Chart for the agency personnel. The example on the Silverlight 5 demo site will be perfect. I just got the example working / replicated so now I need to replace the XML data with live data from SQL Server 2008.
2. It needs a drawing tool that will allow users to place objects (drag / drop) onto the drawing area and then save / load / print / export.
3. It needs a relational "Org Chart" (not exactly the same as #1) that can show people and how they are related to each other... their connection points to one another. A simple example would be person 1 is connected to person 2. Person 2 is connected to 3 other people - #3, #4 and #5. Perhaps it could even show that person 5 is connected to person 1. They know each other but person 1 does not know persons #3 or #4.

I hope that makes sense. It's sort of a mind map / Org Chart / ... thingy...

By the way, scenario's 1 & 3 will be 'read only' since the data lives in SQL Server. Sure, they'll add records but they won't manipulate the drawing ... they'll add data and then 'refresh' the drawing / OrgChart.

Anyway, at this point I'm learning the various ways to work with the diagram tool and connect it to a database since two of the three scenarios will use data from SQL Server. The second scenario will only save the drawings onto the server "disc" and will save a reference number in a database so the drawing can be identified and selected.

With such a feature rich tool to work with I want to ask as many questions as possible so I know and understand as much as I can right from the start.

If you know of any examples for scenarios 2 & 3 then please let me know. Also, if there are any 'gotchas' that I should be aware of then please let me know that too. I'm hoping this won't be a 'hair pulling' experience for me but sometimes learning a new tool / api can be "challenging".

Also, please pass the word on to someone there that the OrgChart demo does not list the necessary Style.xaml files used in the demo. The other demos do list the files... but I've had to ask for and hunt down the <ResourceDictionary> files for it... which has been problematic since they seem to be different from the ones used in the downloaded demo that come with our subscriptions. Anyway... perhaps it will save someone else some time in the future.

Thanks for your help!

~ Dave

[Miro Miroslavov]

Hi Dave Navarro, 
If you would like to examine the examples/demos, you'd better open the Examples solution that is part of your installation - it comes with full source code for all the diagrams demos. Regarding your particular scenarios:

• #1 - In my opinion there is no need for you to go though the XML file - you'd better get your SQL data and directly populate the Org chart view models, the same way we do it by reading the XML. Actually the example is using the XML just for simplicity, but for your case, better to skip it.
• #2 - I think both the DiagramToolbox and the First Look (Ribbon) examples are very good starting point for this. They both have toolboxes with shapes, all commands for exporting are bound and everything works, including lots of customization that could be made to the diagram surface itself.
• #3 - As you also noticed it, I also think that you may base your development on our OrgChart example. I'm not actually sure where is the difference with the #1 example, but in any case you may share code base between the two. 

Thank you for your feedback, we'll improve the Resoureces of the sample too.
As you said it, the diagram has lots of features and might be tricky to do all things, but you can always ask us for assistance. 

All the best,
Miro Miroslavov
the Telerik team

[Ravi]

Hi,

I am trying to build a Custom Shape Control. Actually I have User Control, which consists of some text boxes and Combobox. Text boxes have Lostfocus events.

I want to build Custom Shape using that User Control. and also the textboxes should be editable using EditTemplate and uneditable using ContentTemplate if i am not wrong.

Bindings of Data to textboxes and combobox along with should work.

I need a sample which does the above functionality. please help me

Thanks

Ravi