Insert Footnote programmatically

8 posts, 1 answers
  1. Daniela
    Daniela avatar
    21 posts
    Member since:
    Jun 2012

    Posted 26 Nov 2012 Link to this post


    I'm looking for a way to insert a footnote at a specific point in my RadRichTextbox programmatically.

    The text of the footnote is stored in my data for a specific Span and should be inserted after the Text in the Span.

    I know that the instance of the RadRichTextbox has the method InsertFootnote() or InsertFootnote(Note note) but I can not see
    a) howthe position of the footnote is determined (does the 'cursor' of the radRichTextBox stand at the position where the last element was inserted?)
    b) howthe text of the footnote can be set.

    Can anyone provide a short example how I can insert a footnote at the end of a text, which is positioned in a span? I'm using Silverlight 5 and telerik version Q3 2012. I prepared a code of a code behind file of the MainPage at line 44 I wanted to insert the footnote. Maybe this expample helps to understand my problem and to provide an example for me:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Telerik.Windows.Documents.Model;
    namespace FootnoteExample
        public partial class MainPage : UserControl
            public MainPage()
                this.Loaded += new RoutedEventHandler(MainPage_Loaded);
            void MainPage_Loaded(object sender, RoutedEventArgs e)
                RadDocument document = new RadDocument();
                document.LayoutMode = DocumentLayoutMode.Paged;
                Section section = new Section();
                Table whatEverTable = new Table();
                TableRow row = new TableRow();
                TableCell cell = new TableCell();
                cell.Padding = new Telerik.Windows.Documents.Layout.Padding(0);
                cell.Padding = new Telerik.Windows.Documents.Layout.Padding(0);
                Paragraph p2 = new Paragraph();
                p2.LineSpacing = 1;
                Span s2 = new Span();
                s2.Text = "This is my text";
                    string footnotetext = "My footnote text!";
                //  footnote should be inserted directly after this text
                radRichTextBox.Document = document;
    the according xaml (no suprise):
    <UserControl x:Class="FootnoteExample.MainPage"
        d:DesignHeight="300" d:DesignWidth="400">
        <Grid x:Name="LayoutRoot" Background="White">
                Margin="24 24 0 0" />

    Thanks in advance!
  2. Answer
    Petya avatar
    973 posts

    Posted 28 Nov 2012 Link to this post

    Hello Daniela,

    There are several comments I'd like to make regarding the way you are creating your document and you can find the actual modified code at the bottom.

    When it comes to tables, inserting one from the UI inserts an empty paragraph before and after the table. This prevents certain layout issues and you should perceive the same approach when building the document in code-behind.

    As for programatically creating a document, there are certain properties implemented which can be used when building your RadDocument. Though hierarchically right, you should not be using the Children property of the document elements for adding to the collection. In our online documentation you can find an example of a document built run-time.

    Regarding footnotes, they are actually annotations. To be more precise, both the number inserted in your document body and at the end of the page are different annotations. The proper way to initialize such document element is by adding its RangeStart and RangeEnd. I have added such field in the code below.

    For future reference, if you hesitate regarding the proper way to create a document element at run time, you can create it in our online demo and export it to XAML. In the generated file you'll be able to see the exact structure of the document.

    RadDocument mainDocument = new RadDocument();
    mainDocument.LayoutMode = DocumentLayoutMode.Paged;
    Section mainDocSection = new Section();
    mainDocSection.Blocks.Add(new Paragraph());
    Table table = new Table();
    table.StyleName = RadDocumentDefaultStyles.DefaultTableGridStyleName;
    TableRow row = new TableRow();
    TableCell cell = new TableCell();
    cell.Padding = new Telerik.Windows.Documents.Layout.Padding(0);
    Paragraph cellParagraph = new Paragraph();
    cellParagraph.LineSpacing = 1;
    Span cellSpan = new Span();
    cellSpan.Text = "This is my text";
    FootnoteRangeEnd footnoteRangeEnd = new FootnoteRangeEnd();
    FootnoteRangeStart footnoteRangeStart = (FootnoteRangeStart)footnoteRangeEnd.CreatePairedStart();
    RadDocument footnoteBody = new RadDocument();
    Section footnoteSection = new Section();
    Paragraph footnoteParagraph = new Paragraph();
    Span footnoteSpan = new Span("My footnote text!");
    NoteReferenceMarkEnd referenceEnd = new NoteReferenceMarkEnd();
    NoteReferenceMarkStart referenceStart = (NoteReferenceMarkStart)referenceEnd.CreatePairedStart();
    Span s = new Span("footnote")//text is not take into account, but you should not create empty Spans
        StyleName = RadDocumentDefaultStyles.FootnoteReferenceStyleName
    footnoteRangeEnd.Note = new Note();
    footnoteRangeEnd.Note.Body = footnoteBody;
    cellParagraph.Inlines.Add(new Span("footnote")//text is not take into account, but you should not create empty Spans
    mainDocSection.Blocks.Add(new Paragraph());
    editor.Document = mainDocument;

    I hope this is helpful. Feel free to contact us again if you have other questions.

    All the best,
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft R3 2016 release webinar banner
  4. Daniela
    Daniela avatar
    21 posts
    Member since:
    Jun 2012

    Posted 02 Oct 2013 Link to this post

    I'm on this issue again :-)
    After your post some time is gone and now we want to enhance the footnotes. We implemented everything the way you described above. Now, our customer want to "reuse" existing footnotes. I make an example to clarify:
    There is a footnote 1 with the Text "my footnote" in a RadDocument. Now the user wants to add a reference to the same footnote 1. As you can see in the attached image, there are two references to footnote 2 and 5.
    Is this possible to implement with the footnote concept of the radrichtextbox?
  5. Petya
    Petya avatar
    973 posts

    Posted 07 Oct 2013 Link to this post

    Hi Daniela,

    This is currently not possible using the Footnote functionality of RadRichTextBox. We will consider adding such functionality for one of our future releases.

    Let us know if we can further assist you.

    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Susil
    Susil avatar
    2 posts
    Member since:
    Mar 2015

    Posted 19 Mar 2015 in reply to Petya Link to this post

    Hello this is Susil.....
    In my project i have used telrik Grid(not Kendo) in that i have a Description column.
    For this Description I have used RichTextBox(input). When ever  i am clicking on Edit icon data comes to my edit window but when i am updating data  on Description column comes like  "&kbb&buibbj"  this Encoded format So please give a code description to solve this one.
    Hope Question Understood...
  7. Tanya
    Tanya avatar
    376 posts

    Posted 23 Mar 2015 Link to this post

    Hi Susil,

    As it is not clear from your post, I would like you to confirm that you are using Telerik's RadGridVew for Silverlight with RadRichTextBox for Silverlight inside it. 

    If this is the case, RadRichTextBox needs a data provider in order to be bound:
            <telerik:TxtDataProvider Name="dataProvider"
                                        Text="{Binding Path=FirstName, Mode=TwoWay}"
                                        RichTextBox="{Binding ElementName=radRichTextBox}" />
            <telerik:RadRichTextBox Name="radRichTextBox" >

    In case this is not helpful for you, please send us more details about the scenario (exact version of the controls you are using, implementation, etc.).

    Hope this helps.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  8. Susil
    Susil avatar
    2 posts
    Member since:
    Mar 2015

    Posted 24 Mar 2015 Link to this post

    Actually in my ASP.NET MVC Project i have taken a Telerik grid in XXX.cshtml page  in which one of the column is (say: Comments) .
    Now i am using a popup window to insert a Record into the database in that popup i have used a RichTextBox control (Not Rad) for Comments Field.
    But problem is that when i am retriving Data from DataBase and showing in Grid data comes in Encoded Format.

    Hope this time my Question is Understandable. 
  9. Tanya
    Tanya avatar
    376 posts

    Posted 25 Mar 2015 Link to this post

    Hello Susil,

    We are doing our best to keep the forums well-structured and easy for searching. As this forum is for Telerik's controls for Silverlight, I would like to ask you if you have future questions for our controls, please, submit them in the correct forum.

    Regarding the issue you are experiencing, it seems to be coming from the RichTextBox, but this is a Microsoft control and we could not give you any advice about it. You can try posting on a forum where general programming techniques and questions are discussed like stackoverflow.


    See What's Next in App Development. Register for TelerikNEXT.

Back to Top
DevCraft R3 2016 release webinar banner