Problem Formatting Document. Nested lists and SpanBoxPositionHandler

4 posts, 0 answers
  1. Shawn
    Shawn avatar
    4 posts
    Member since:
    Dec 2010

    Posted 03 Feb 2011 Link to this post

    I have attached a screen shot of a sample document.  I am attempting to reproduce the formatting highlighted in the document in a RadDocument that is associated with a RichTextBox.

    I realize that support for nested NumberedLists wont be provided until the Q1 of 2011 release, so I am attempting to build the formatting manually.

    I have the "Title" and "Content" fields for each of the highlighted sections.  I am building up a Span > Paragraph > Section for each of the correspnding highlighted sections and adding it to a raddoc.

    For example, for section II.a.2 the code looks like:

     

     

    private Section BuildActivity(RPActivitiesItem activity)
    {
    Span spanTitle = new Span(activity.PublicationTitle);
    Span spanContent = new Span(activity.TextContent);

    Paragraph paragraphContent = new Paragraph();
    paragraphContent.Children.Add(spanTitle);
    paragraphContent.Children.Add(spanContent);

    Section
    section = new Section();
    section.Children.Add(paragraphContent);
    return section;
    }


    The result of this is (obviously) something like:

    II.a.2.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit magna leo. Fusce sed dolor ante. Nam velit sem, varius ut pellentesque nec, cursus at justo. In hac habitasse platea dictumst. Sed porta egestas nisi, et porta massa tempus et. Sed ultricies felis ac lectus faucibus ac ultrices tortor interdum. In in turpis eu tortor varius consectetur. Morbi tincidunt rhoncus felis sed tincidunt. Donec pellentesque, neque vel tincidunt congue, sem odio sollicitudin mauris, sit amet blandit lorem dui id ipsum. Phasellus vitae augue velit, condimentum lacinia magna. Nullam commodo imperdiet libero, quis aliquet diam malesuada quis. Vestibulum imperdiet, lorem at elementum sagittis, nulla est malesuada libero, quis euismod sapien neque non nisl. In hac habitasse platea dictumst. Aliquam rhoncus ligula eu


    I need the main body content to wrap within its own container as shown in the attached screen shot. I have been researching all day today and cant seem to figure out how to do this.  I have looked at the SpanLayoutBox and the SpanBoxPositionHandler and both require a DocumentElementStructureCollection, that I cant seem to figure out how to integrate.

    I am hard pressed to find any good examples of this or even how to implement those classes.  Any direction would be much appreciated.

    Thanks in Advance



     

  2. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts

    Posted 09 Feb 2011 Link to this post

    Hello Shawn,

    SpanBoxPositionHandler is used with document positions, which are mainly used to navigate through the document like when you use the arrows on the keyboard or change the caret position. You can read more about document positions here, but I don't see in what way they would be helpful in your case.
    As it comes to the DocumentElementCollection and DocumentStructureCollection, they implement the logic that would allow adding document elements (such as Paragraphs and Spans) to the Children's property (Blocks or Inlines) of the document element that can contain them. You can get a picture of RadDocuments's structure in our online help.
    If I understand your scenario right, you know where you wish each list item to appear and what number it should be assigned. In that case you can insert it like this:

    private Paragraph BuildActivity(RPActivitiesItem activity, int level)
    {
        int indentStep = 28;
        Span spanTitle = new Span(activity.PublicationTitle);
        Span spanContent = new Span(activity.TextContent);
     
        Paragraph paragraphContent = new Paragraph();
     
        paragraphContent.LeftIndent = level * indentStep;
     
        paragraphContent.Children.Add(spanTitle);
        paragraphContent.Children.Add(spanContent);
         
        return paragraphContent;
    }

    And then add these paragraphs to the document like this:
    private void buttonInsertNestedList_Click(object sender, RoutedEventArgs e)
    {
        RadDocument document = new RadDocument();
        Section section = new Section();
        int itemsCount = 5;
        for (int i = 0; i < itemsCount; i++)
        {
            RPActivitiesItem item = new RPActivitiesItem("Publication title " + i, "Text Content" + i);
            Paragraph paragraph = BuildActivity(item, i);
            section.Blocks.Add(paragraph);
        }
        document.Sections.Add(section);
        this.editor.Document = document;
    }

    Let us know how we can help you further.

    All the best,
    Iva
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. Shawn
    Shawn avatar
    4 posts
    Member since:
    Dec 2010

    Posted 27 Feb 2011 Link to this post

    Thanks For the Reply,

    I understand your example, however, it is not the effect I was looking for (and still cannot implement).  I modified your example slightly to include a long string of ipsum lorem (including line breaks) for the TextContent.

    I have attached two screen shots, the first is the result get with your example. The second is of the desired result.  Essentially, I need to have two spans that align on a single line, but the second wraps at its own indent level . These are marked "Span 1" and "Span 2" in the screen shot.

    Thanks for your help, I have spent WAY too much time on this already, so I appreciate your help in getting this resolved.

    -Shawn
  4. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts

    Posted 03 Mar 2011 Link to this post

    Hi Shawn,

    The code snippets in my post were targeting the nested list functionality you were inquiring about, the paragraph offsets from the left margin in particular. Judging from the WhatNeedToGet picture, the result you are trying to accomplish is having multiple columns in a document. This feature is also not supported yet and the only way to fake it is if you are using the document in flow layout mode and insert the text in two columns of a table with transparent borders.
    Please find attached a sample XAML document, which you can import in our demo.
    Multiple columns will not be available in the upcoming Q1 release and most likely will be scheduled for Q2.
     

    Kind regards,
    Iva
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top