Diagrams drive me crazy - how to align containers

4 posts, 0 answers
  1. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 27 Aug 2014 Link to this post

    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

  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 28 Aug 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 28 Aug 2014 in reply to Pavel R. Pavlov Link to this post

    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 



  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 01 Sep 2014 Link to this post

    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.
     
Back to Top