Data Providers

The RadRichTextBox control allows you to export and import its documents into various document formats - HTML, XAML,RTF, DOCX, PDF. You can export and import the document from and to strings or files. For that purpose you could use the following classes:

  • XamlFormatProvider

  • HtmlFormatProvider

  • DocxFormatProvider

  • RtfFormatProvider

  • PdfFormatProvider (export only)

  • TxtFormatProvider

For more information, check out the Import/Export topic.

However, the format providers cannot be used in XAML and you have to implement a logic that will call their Import and Export methods. This is something that you might not want to be concerned with when using the RadRichTextBox in a data bound scenarios. For such cases the DataProvider classes are used. They wrap the FormatProviders' functionality and allow its usage in XAML. Currently the following DataProvider classes are available:

  • XamlDataProvider - use when you want to bind XAML source to RadRichTextBox.

  • HtmlDataProvider - use when you want to bind HTML source to RadRichTextBox.

  • RtfDataProvider - use when you want to bind RTF source to RadRichTextBox.

  • DocxDataProvider - use when you want to bind a docx source to RadRichTextBox.

  • TxtDataProvider - use when you want to bind plain text source to RadRichTextBox.

Data providers have to be declared in the visual tree and not the Resource dictionary of a control. You don't have to worry about the place in the visual tree where a provider is, as it does not have a visual representation.

The DataProviders can be easily used to bind the RadRichTextBox to a XAML, HTML, RTF or a plain text string. This is done only in XAML without the usage of any code-behind. Using a two way data binding you can also keep the string up to date with the changes made to it through the RadRichTextBox. To implement a DataProvider class in your application, you'll have to create an instance and configure it via the following properties:

  • RichTextBox - specifies which RadRichTextBox instance this data provider is attached to.

  • String Value- specifies the input/output of the DataProvider in the respective format. The name of the property is Xaml for XamlDataProvider, Html for HtmlDataProvider, Text for TxtDataProvider and Rtf for RtfDataProvider. An exception to this rule is the Docx property of DocxDataProvider which is a byte array.

It is best to declare data providers in the visual tree, as this way the binding will be properly updated when the data context is changed. You don't have to worry about the place in the visual tree where the provider is, as it does not have a visual representation.

Each DataProvider class is located in the same assembly as the corresponding FormatProvider class. For example, the XamlFormatProvider class is in the Telerik.Windows.Documents.FormatProviders.Xaml.dll assembly. Only the TxtDataProvider is located in the Telerik.Windows.Documents assembly. In order to use a data provider, make sure to have referenced the required assembly.

The DataProviders can be accessed via the default Telerik namespace:

XAML

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

The purpose of this topic is to show you how to use the DataProviders in DataBinding scenarios. The following scenarios will be explained:

Binding the provider to other UI Elements

In the following example two simple UI controls are used - a plain RadRichTextBox and a TextBox, which will display the document as a XAML text. The main functionality is contained in the XamlDataProvider class. It's attached to the RadRichTextBox and its Xaml property is data bound to the TextBox's____Text property.

XAML

<UserControl x:Class="DataProvidersDemo.MainPage"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <Grid x:Name="LayoutRoot"
          Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <telerik:XamlDataProvider x:Name="xamlDataProvider"
            Xaml="{Binding ElementName=textBox, Path=Text, Mode=TwoWay}"
            RichTextBox="{Binding ElementName=radRichTextBox}" />
        <telerik:RadRichTextBox Margin="2" x:Name="radRichTextBox" />
        <TextBox Margin="2" Grid.Row="1" x:Name="textBox" />
    </Grid>
</UserControl>

At some point, you may want to start customizing the documents' appearance or modify the document after it has been imported but before it is shown. Data providers facilitate this by exposing a SetupDocument event. It's fired every time the data provider instantiates a new document so you can modify the document. The following code-snippet demonstrates how to do that.

XAML

<telerik:XamlDataProvider Name="xamlDataProvider"
           Xaml="{Binding ElementName=textBox, Path=Text, Mode=TwoWay}"
           RichTextBox="{Binding ElementName=radRichTextBox}"
           SetupDocument="XamlDataProvider_SetupDocument"/>

C#

private void XamlDataProvider_SetupDocument(object sender, Telerik.Windows.Documents.FormatProviders.SetupDocumentEventArgs e)
{
    e.Document.LayoutMode = Telerik.Windows.Documents.Model.DocumentLayoutMode.Paged;
}

VB.NET

Private Sub XamlDataProvider_SetupDocument(sender As Object, e As Telerik.Windows.Documents.FormatProviders.SetupDocumentEventArgs)
 e.Document.LayoutMode = Telerik.Windows.Documents.Model.DocumentLayoutMode.Paged
End Sub

In the previous example, the document's LayoutMode property is changed. However you can apply any number of modifications to the document.

Binding the DataProvider to Dynamic Data

The DataProviders can also be used in DataTemplates to enable DataContext binding.

Here is an example using RadRichTextBox in ItemsControl. For each item in the ItemsSorce collection an expander is created. The content of the expander is RadRichTextBox control bound to the Body property of the DataContext through HtmlDataProvider.

XAML

<ItemsControl>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <telerik:RadExpander>
                <telerik:RadExpander.Header>
                    <TextBlock Text="{Binding Name}"/>
                </telerik:RadExpander.Header>
                <telerik:RadExpander.Content>
                    <Grid>
                        <telerik:HtmlDataProvider x:Name="HtmlProvider" 
                                      RichTextBox="{Binding ElementName=richTextBox}"
                                      Html="{Binding Body, Mode=TwoWay}" />
                        <telerik:RadRichTextBox x:Name="richTextBox" Height="150" Width="350"
                                HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="1" />            
                    </Grid>
                </telerik:RadExpander.Content>
            </telerik:RadExpander>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Here is a sample snapshot: