This is a migrated thread and some comments may be shown as answers.

Diagrams drive me crazy - how to align containers

3 Answers 207 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Michele
Top achievements
Rank 2
Michele asked on 27 Aug 2014, 09:55 AM
Hello,
I've been working last days on a demo with RadDiagrams...and I've almost reached my goal... I just need a few help on containers....

I've created via code some different containers based on a level I had

foreach (var level in levels)
          {
              CheckListItemContainer container = new CheckListItemContainer();
 
              container.Content = "TEST";
              foreach (var item in level)
              {
                  if (!container.InternalItems.Any(x => x.ItemID == item.ItemID))
                  {
                      var checklistItem = new CheckListItem();
 
                      checklistItem.ItemID = item.ItemID;
                      checklistItem.Codice = item.Codice;
                      checklistItem.Descrizione = item.Descrizione;
                      checklistItem.Note = item.Note;
                      checklistItem.Status = item.Status;
                      checklistItem.Tipologia = item.Tipologia;
                      checklistItem.TipologiaID = item.TipologiaID;
 
                      container.AddItem(checklistItem);
                  }
 
                  Tmp[item.ItemID] = level.Key;
              }
 
              this.CheckListDiagramGraphSource.AddNode(container);
          }

I've set in my view the TreeLayout as TreeLeft as (http://www.telerik.com/help/silverlight/media/raddiagram-features-layout-tree-left.png)

and I have a container for each level.... I wish to have all the container aligned horizontaly but actualy it displays as the image I've attached

How do I tell the container to set the items vertically?
Ho do I align the containers horizontaly?

Thanks in advance

3 Answers, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 28 Aug 2014, 06:31 AM
Hi Paolo,

I cannot be sure how you use our TreeLayout and what are the exact settings set in the TreeLayoutSettings object. But it seems that you have not set the LayoutContainerChildren property to true. By default it is set to false and this is why the shapes inside the containers are not properly laid out.

private void RadButton_Click(object sender, RoutedEventArgs e)
{
    TreeLayoutSettings settings = new TreeLayoutSettings()
    {
        LayoutContainerChildren = true,
        TreeLayoutType = TreeLayoutType.TreeLeft
    };
    this.diagram.Layout(LayoutType.Tree, settings);
}

As for the positioning of the containers, if the default placement does not fit your requirements. You will need to customize the algorithm. Or you can try running several algorithms with different settings, rather than using only one layout algorithm. Another approach would be to manually position the containers as you require.

Regards,
Pavel R. Pavlov
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Michele
Top achievements
Rank 2
answered on 28 Aug 2014, 09:13 AM
Hello Pavel,
your suggestion is a step ahead the goal...now my result is the one you can see in the attachment... is there out-of-box a feature to center the shape in their container?
For your question about setting the manual position of the items I can't since the items are loaded dinamically and I don't know how many shape there're in a single container...

Thanks 



0
Pavel R. Pavlov
Telerik team
answered on 01 Sep 2014, 11:11 AM
Hello,

Centering the content of the RadDiagramContainerShapes is not supported out-of-the-box at time of writing. However, you can use the LayoutContainerChildren property of the TreeLayoutSettings. It will automatically resize the containers so that they will fit the size that its children take. Also, you will be able to layout the containers every time you add children to the containers. This will update the size of the containers accordingly. 

You can try our Layout SDK demo out. This behavior is demonstrated in the Containers tab of the configuration control. Select the "Containers" tab, then press "Create Sample" button and then "Layout". Then you can reorder the children shapes and then layout again. You will see that the algorithm affects the size of the containers.

Regards,
Pavel R. Pavlov
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
Diagram
Asked by
Michele
Top achievements
Rank 2
Answers by
Pavel R. Pavlov
Telerik team
Michele
Top achievements
Rank 2
Share this question
or