Binding the content of RadRichTextBox in Xaml

11 posts, 0 answers
  1. Cyril Iselin
    Cyril Iselin avatar
    15 posts
    Member since:
    Dec 2009

    Posted 15 Aug 2010 Link to this post

    Requirements

    RadControls version 2010 Q2
    .NET version

    Silverlight 4
    Visual Studio version

    2010
    programming language

    C#

    SAMPLE DESCRIPTION

    Problem
    Bind the content of RadRichTextBox in Xaml is not as trivial as MS RichTextBox (which simply exposes a Xaml property) as RadRichTextBox provides various input and output formats.

    Update from Telerik: Please note that since 2010 Q2 Telerik introduced specially designed data-providers, that can be used to bind RadRichTextBox content as Xaml, Html, Text and so on. The approach is described in the following help article:
    http://www.telerik.com/community/code-library/silverlight/general/binding-the-content-of-radrichtextbox-in-xaml.aspx
    A sample for using data-providers is attached. The approach suggested by the article bellow, still applies and can be useful especially in scenarios when additional custom processing of the content is required.

    Solution.
    Create a custom, bindable RadRichEditor-Control (currently supports only One-Way binding), with a DependencyProperty that exposes RadRichTextBox content.
    It should be easy to extend to support Two-Way binding...

      Usefulfor :
    -> Showing ToolTips
    -> Previews
    -> ReadOnly text


    Codebehind of the UserControl :

    public partial class RichEdit : UserControl
       {
           public string Text
           {
               get { return (string)GetValue(TextProperty); }
               set { SetValue(TextProperty, value); }
           }
     
           public static readonly DependencyProperty TextProperty =
               DependencyProperty.Register("Text", typeof(string), typeof(RichEdit), new PropertyMetadata(null, OnTextPropertyChanged));
     
           private static void OnTextPropertyChanged(DependencyObject re, DependencyPropertyChangedEventArgs e)
           {
               RichEdit richEdit = (RichEdit)re;
     
               if (string.IsNullOrEmpty((string)e.NewValue) == false)
               {
                   richEdit.richTextBox.Document = ImportXaml(e.NewValue.ToString());
               }
           }
     
           public RichEdit()
           {
               InitializeComponent();
           }
     
     
           private static RadDocument ImportXaml(string content)
           {
               IDocumentFormatProvider provider = new XamlFormatProvider();
               RadDocument document;
               using (MemoryStream stream = new MemoryStream())
               {
                   StreamWriter writer = new StreamWriter(stream);
                   writer.Write(content);
                   writer.Flush();
                   stream.Seek(0, SeekOrigin.Begin);
                   document = provider.Import(stream);
               }
     
               return document;
           }
     
     
     
       }

    XAML of the UserControl:

    <Grid x:Name="LayoutRoot" Background="White">
          <ScrollViewer x:Name="scrollViewer" VerticalScrollBarVisibility="Hidden" Padding="0">
              <Grid>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="400"></ColumnDefinition>
                  </Grid.ColumnDefinitions>
                  <telerik:RadRichTextBox x:Name="richTextBox" Margin="0,0,0,262" />
              </Grid>
          </ScrollViewer>
      </Grid>

    I hope you'll find ti useful.
    Best Greetings

    Cyril Iselin
  2. Andrew
    Andrew avatar
    68 posts
    Member since:
    Jul 2010

    Posted 03 Oct 2010 Link to this post

    I have tried this but have been unsuccessful.

    I have a string with HTML formatted content, which I want to bind to the RadRichTextBox.  I can bind it to a normal TextBox and it displays, as raw HTML, but whatever I try, the Textbox stubbornly does not want to bind.  Here is what is working.

    In my code behind
                storeDomainContext ctx = new storeDomainContext();
                dds.QueryName = "GetProductDetailsQuery";
                dds.DomainContext = ctx;
                dds.AutoLoad = true;
                filterPD.PropertyPath = "ProdID";
                filterPD.Operator = FilterOperator.IsEqualTo;
                filterPD.Value =pvalue;
                dds.FilterDescriptors.Add(filterPD);
            this.lb.ItemsSource = dds.Data;
    In Xaml
               <ListBox Name="lb" Height="332">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
    <TextBox Text="{Binding LongDescription}" TextWrapping="Wrap" Height="332" Width="350" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                 </DataTemplate>
                    </ListBox.ItemTemplate>
    I have tried placing the radrichtextbox in the listbox so it could be bound by the itemssource, and then used LongDescription to bind the HtmlDataProvider but nothing seems to work.  I must have the binding syntax wrong.

    How would you do it?
  3. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts

    Posted 05 Oct 2010 Link to this post

    Hi Andrew,

    If you want to bind RadRichtTextBox control in data template through data provider you will have to define the data provider within the template. The reason for this is that one data provider can be used with one document only -  so there will have to be a data provider for each item in you ItemsSource collection which will "connect" the item to the rich text box control. Here is how the data template should look like in your case:

    <DataTemplate>
      <telerik:RadRichTextBox x:Name="richTextBox">
        <telerik:RadRichTextBox.Resources>
          <telerikHtml:HtmlDataProvider x:Key="HtmlDataProvider"  RichTextBox="{Binding ElementName=richTextBox}" Html="{Binding LongDescription, Mode=TwoWay}"  />
        </telerik:RadRichTextBox.Resources>
      </telerik:RadRichTextBox>
    </DataTemplate>


    Let us know if that worked for you.

    All the best,
    Iva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  4. Andrew
    Andrew avatar
    68 posts
    Member since:
    Jul 2010

    Posted 05 Oct 2010 Link to this post

    Nothing showing yet, but I know the data is being retrieved.

    In xaml
                xmlns:dHTML="clr-namespace:Telerik.Windows.Documents.FormatProviders.Html;assembly=Telerik.Windows.Documents.FormatProviders.Html"
      
      
    and in the grid
                   <ListBox Name="lb" Height="181" Width="666" ScrollViewer.VerticalScrollBarVisibility="Auto">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <telerik:RadRichTextBox x:Name="richTextBox">
                                <telerik:RadRichTextBox.Resources>
      
                                    <dHTML:HtmlDataProvider x:Key="HtmlDataProvider"  RichTextBox="{Binding ElementName=richTextBox}" Html="{Binding LongDescription, Mode=TwoWay}"  />
                                </telerik:RadRichTextBox.Resources>
                                </telerik:RadRichTextBox>
      
                          <!--<TextBox Text="{Binding LongDescription}" TextWrapping="Wrap" Height="161" Width="640" HorizontalAlignment="Center" VerticalAlignment="Center" />-->
                  
                            </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
         
    in code
                storeDomainContext ctx = new storeDomainContext();
                dds.QueryName = "GetProductDetailsQuery";
                dds.DomainContext = ctx;
                dds.AutoLoad = true
                filterPD.PropertyPath = "ProdID";
                filterPD.Operator = FilterOperator.IsEqualTo;
                filterPD.Value =pvalue;
                dds.FilterDescriptors.Add(filterPD);
                this.lb.ItemsSource = dds.Data;
                try
                {
                    dds.Load();
                      
                            }
                catch
                {
                      
                }
    I know the data is there, since if the comment is placed on your control and removed from the textbox, the data is there.
  5. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts

    Posted 06 Oct 2010 Link to this post

    Hello Andrew,

    In order to demonstrate how binding works in a DataTemplate I am attaching a project, which uses most of the code provided by you using Q2 SP2 version.

    A possible issue with RadRichTextBox not showing any data is that in Q2 SP1 version the HtmlDataProvider does not recognize plain text which is not surrounded by any recognized tags (<html>, <b>, <span> etc.). This is fixed in Q2 SP2 and if you upgrade to that version, you can see the difference.

    As for the scrollbars which appear in the rich text boxes, that is something we are currently working on and should be fixed in the upcoming Q3.

    If you have any other concerns, do not hesitate to contact us.

    Kind regards,
    Iva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Andrew
    Andrew avatar
    68 posts
    Member since:
    Jul 2010

    Posted 06 Oct 2010 Link to this post

    The only difference I can see between your code that works and mine that does not, is my data is from a RIA source, and yours is returned by a function.
    I know ria is working since a normal textbox works.

    Here is the exact result on one product I am using to test
    <p>Shy and modest is so yesterday. Get ready for brilliance that's the centre of attention once the PowerShot SD1400 IS Digital ELPH camera is in your hands. First glance says it all nothing moves you like the impact of sleek sculpture, especially when it's drenched in the purest, ripest colours. Inside, Canon engineers defy micro-space with big, brilliant innovation.</p>

    Is there a problem with the contents?

    Why don't you change your test to hit a test database and just grab any string.  See if there is a difference.  In case it matters I am retrieving only one record.  If there is a better way to do it, than a listbox, let me know.  I just needed some container to bind the data to.
  7. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts

    Posted 07 Oct 2010 Link to this post

    Hi Andrew,

    There is already a demo involving WCF services at http://www.telerik.com/community/forums/silverlight/general-discussions/keeping-format-of-msword.aspx but since you get to show the data in a TextBox, I assume there is no problem there.

    There is nothing wrong with your test string either, it works fine. What I stumbled upon is that when the Height and Width properties of the RadRichTextBox are not set in the XAML, the place which the ListBox assigns to the RadRichTextBox might not be enough and the data might not show. If you set them manually, everything works fine.

    However, if you have only one string you want to show, you shouldn't put the RadRichTextBox in a ListBox. You just need to assign the DataContext:
    this.richTextBox.DataContext = item;
    (item is the instance of SomeItem you want to bind the RadRichTextBox to. For two-way binding, SomeItem must implement INotifyPropertyChanged, for another demo look here:
    http://www.telerik.com/community/forums/silverlight/richtextbox/bind-richtextbox-to-database-object.aspx)

    In the XAML you still have:
    <telerik:RadRichTextBox x:Name="richTextBox" Width="400">
          <telerik:RadRichTextBox.Resources>
                  <dHTML:HtmlDataProvider x:Key="HtmlDataProvider" RichTextBox="{Binding ElementName=richTextBox}" Html="{Binding LongDescription, Mode=TwoWay}" />
           </telerik:RadRichTextBox.Resources>
    </telerik:RadRichTextBox>

    Hopefully that solves the issue.


    Greetings,
    Iva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Andrew
    Andrew avatar
    68 posts
    Member since:
    Jul 2010

    Posted 07 Oct 2010 Link to this post

    That was it, the height and width need to be specified.  What an annoying bug.
  9. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts

    Posted 08 Oct 2010 Link to this post

    Hello Andrew,

    I am glad the issue was solved.
    If you encounter any other problems, do not hesitate to get back to us.

    Best wishes,
    Iva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Adrian Pay
    Adrian Pay avatar
    28 posts
    Member since:
    Nov 2009

    Posted 14 Dec 2010 Link to this post

    Hi. I'm using the Q3 version of Telerik controls and I can't set the line spacing of RadRichTextBox to 1. Do you have an example for this?

    Thanks,
    Jhoanna
  11. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts

    Posted 15 Dec 2010 Link to this post

    Hi Adrian Pay,

    You can use the properties of RadDocument/Section/Paragraph LineSpacing and LineSpacingType, which manipulate the spacing between lines. LineSpacing is measured in dip (pixels), though, so "1" will not be an appropriate value.
    If you want, you can also manipulate the ParagraphDefaultSpacingAfter property, which sets additional space between adjoining paragraphs.
    In XAML that would be:

    <telerik:RadRichTextBox Name="radRichTextBox1" >
        <telerik:RadRichTextBox.Document>
            <telerik:RadDocument LineSpacing="20" LineSpacingType="Exact" ParagraphDefaultSpacingAfter="0"  />
        </telerik:RadRichTextBox.Document>
    </telerik:RadRichTextBox>
    If you have other questions, do not hesitate to contact us again.

    Greetings,
    Iva
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top