OrgChart

[Mohammad]

I create orgchart sample such as telerik demo but i want bind data source from database.
it work fine with XML source files but when i want use source from database, appearance of my form Be broken.
please help me.

[Petar Mladenov]

Hi Mohammad,

When you bind the RadDiagram you have to make sure that your ViewModels for the Connections implement ILink  and the source collection implement IGraphSource. Probably you need to wrap your DB objects in order to apply this rules. You may find these two help articles useful:
RadDiagram DataBinding
RadDiagram  How To Use MVVM
If you still have issues, you can send us some code that we could investigate locally. 

Greetings,
Petar Mladenov
the Telerik team

[Mohammad]

my problem is solve. thancks a lot for your soppurt.
when do you release Telerik Q2.2012 ?

[Petar Mladenov]

Hello Mohammad,

 Telerik Q2 2012 Official Release is scheduled for the first half of June. 

Regards,
Petar Mladenov
the Telerik team

[Dave Navarro]

Hello,

With your help, I've completed replicating the Silverlight 5 example in my project and now wish to replace the static data source with a dynamic data source from SQL Server.

I guess I have two options;
1. Create 'on the fly' an XML file (in memory) from the database and use the code 'as is' but with new data... or,
2. Rewire the diagram's  method 'PopulateWithData()' with code that reads directly from SQL Server.

Does anyone have any suggestions on which option would be best? My diagram will be in "read only" mode since the data comes from the db. I'll have methods in place to add people to the database but it won't be within the diagram's 'drag and drop' features.

Does anyone have any sample code they could share that demonstrates either option?

Please let me know and thanks!

~ Dave

[Dave Navarro]

Hello,

I've got another question; I was able to setup a method that dynamically creates the XML file in memory however the images are in the database. So, what I've done is setup a dictionary and a method that preloads the images so I can stream them in when needed.

Here's the Org Chart Dictionary (OCD);

public Dictionary<string, byte[]> OCD = new Dictionary<string, byte[]>();

My question is this; how should I recode the node.imagePath to work with the data. It's currently looking for a string value that points to a file in the Assets folder. Now I'm providing a byte[] that will need to be streamed in.

Below is one attempt that obviosly doesn't work. You can see the two remarked lines of code that I replaced but the code isn't going to work unless I rewire the node.Image to process the byte[] data and stream it in...

private Node CreateNode(XElement element, Node parentNode)
        {
            Node node = new Node();
            node.PropertyChanged += this.OnNodePropertyChanged;
            node.FirstName = element.Attribute("FirstName").Value;
            node.LastName = element.Attribute("LastName").Value;
            node.Phone = element.Attribute("Phone").Value;
            node.Email = element.Attribute("Email").Value;
            node.Address = element.Attribute("Address").Value;
            node.Path = parentNode == null ? node.FullName : parentNode.Path + "|" + node.FullName;

            //string imagePath = "/bcRMS.RMS.DevAdmin;component/Assets/Images/{0}{1}.jpg";
            //node.ImagePath = string.Format(imagePath, node.FirstName, node.LastName);
            string imagePath = "app.OCD[\"" + node.FirstName + node.LastName + "\"]";

            node.ImagePath = imagePath.ToString();

            node.JobPosition = element.Attribute("Position").Value;
            node.Branch = (Branch)Enum.Parse(typeof(Branch), element.Attribute("Branch").Value, true);
            return node;
        }

Please let me know what I should do to rewire the node.image. What I'm hoping to do is simply read the stream and handle it like a typical radImage control.

Thanks!

~ Dave

[Francois Vanderseypen]

Dave,

you should set the source of the image or replace the image altogether, simply setting a string will not work. Something like

private static BitmapImage LoadImage(byte[] imageData)
   {
       if (imageData == null || imageData.Length == 0) return null;
       var image = new BitmapImage();
       using (var mem = new MemoryStream(imageData))
       {
           mem.Position = 0;
           image.BeginInit();
           image.CreateOptions = BitmapCreateOptions.PreservePixelFormat;
           image.CacheOption = BitmapCacheOption.OnLoad;
           image.UriSource = null;
           image.StreamSource = mem;
           image.EndInit();
       }
       image.Freeze();
       return image;
   }

and using this returned BitmapImage as the Source of the XAML Image control.

Note that it's probably a good idea to wrap this call in an asynchronous method so that the loading of the images doesn't block the UI/diagram.

Hope this helps, Fr.

[Dave Navarro]

Hello,

Well, thanks for your suggestions. I got it working... it actually didn't take as much code as I first thought.

Regarding the images;
First, I modified the Node.cs view model so that the nodes imagepath was no longer a string... but instead a bitmap;

public BitmapImage ImagePath { get; set; }

Then, I took Francois' suggestion and setup this minor modification right in the CreateNote method;

BitmapImage bImg = new BitmapImage();
bImg.SetSource((new MemoryStream(app.OCD["" + node.FirstName + node.LastName + ""])));
node.ImagePath = bImg;

And now the images and nodes are loading as hoped. They are both dynamically created as the form loads and from the database with only minor modifications to the original example code.

Thanks for your help!

~ Dave