RIA databinding with RichtextBox

[Kamal Mostofi]

Hello,
I use Ria services to display the data and allow users to edit some information. I do display the text in a textbox control but I'd like to use Richtextbox control so they can do some formatting. The data binding happens in the Xaml. 
How can I bind Richtextbox to display the text from database?

Thanks in advance.
Kamal

[Iva Toteva]

Hi Kamal,

There is a demo with RIA services and RadRichTextBox in Mike's post from August 17 in this forum thread. It uses data providers to bind the content of the document.
Check it out and let us know if you have additional questions.

Greetings,
Iva
the Telerik team

[Kamal Mostofi]

Hi Iva,
Thanks for your reply. I have RIA datasource, list box, transition control and some controls inside the transition control which displays data from a database. Can I bind the RichTextBox in the Xaml code? or I should bind it in code behind? All the binding happens in the Xaml .

Thanks,
Kamal

[Ivailo Karamanolev]

Hi Kamal Mostofi,

Yes, you can achieve the data binding in XAML entirely using the data providers Iva gave you a link for. You can also take a look at the demos attached to the forum thread Iva posted a link to. We are ready to help you if you have any specific problems.

Greetings,
Ivailo
the Telerik team

[Kamal Mostofi]

Hi,
I set the child windows datacontext in code behind and display data on different controls. One of the controls should be a richtextbox. I followed the example but I can't see the data in the control.

Here is the code for data provider

<controls:ChildWindow.Resources>
        <telerikXaml:XamlDataProvider x:Key="xamlDataProvider"
                    Xaml="{Binding ElementName=landpropertyDomainDataSource, Path=Data, Mode=TwoWay}"
                                              RichTextBox="{Binding ElementName=editor}"
                                      />
        </controls:ChildWindow.Resources>

 <riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my1:landproperty, CreateList=true}" Height="0" LoadedData="landpropertyDomainDataSource_LoadedData" Name="landpropertyDomainDataSource" QueryName="GetPropertiesByID" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:LandlordContext />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

is the xamldataprovider setting correct? (elementname and path)

thanks for your help.
Kamal

[Iva Toteva]

Hi Kamal,

The Path has to point to the column in the DB table that keeps the content of the document as XAML, i.e. if your table Documents has an ID and Content columns, you have to bind the provider like this:

<telerikXaml:XamlDataProvider x:Key="xamlDataProvider"
                              RichTextBox="{Binding ElementName=editor}" Xaml="{Binding ElementName=landpropertyDomainDataSource, Path=Data.CurrentItem.Content}" />

You would also need to make sure that you pass the value of the ID as a QuerParameter to the domain data source.

Kind regards,
Iva
the Telerik team

[Kamal Mostofi]

Hi,
Thanks for your response.
I have the following code . propinfo is the column name that I store the information. I don't see the text in the editor :-(

<telerikXaml:XamlDataProvider x:Key="xamlDataProvider"

                    Xaml="{Binding ElementName=landpropertyDomainDataSource, Path=Data.CurrentItem.propinfo, Mode=TwoWay}"

                                              RichTextBox="{Binding ElementName=editor}"/>


[Iva Toteva]

Hello Kamal Mostofi,

Please find attached a modified version of the DB example from the forum thread we initially recommended. This time, the query that the domain source uses includes a parameter.
We would gladly assist you further if you meet any obstacles with the use of the data providers and RadRichTextBox. For more information domain data source, queries, etc. you can refer to MSDN.

Greetings,
Iva
the Telerik team

[Kamal Mostofi]

Hi,
Thanks for your solution. It helped me to bind it to the database. It does work in edit page but I'd like to  display the text in the view page to clients. but it doesn't show it. here is the code:

<UserControl.Resources>
        <CollectionViewSource x:Key="landpropertypropdetailsViewSource" Source="{Binding Path=Data.propdetails, ElementName=landpropertyDomainDataSource1}" />
        <CollectionViewSource x:Key="landpropertylandpropimagesViewSource" Source="{Binding Path=Data.landpropimages, ElementName=landpropertyDomainDataSource1}" />
        <CollectionViewSource x:Key="landpropertypropEPCsViewSource" Source="{Binding Path=Data.propEPCs, ElementName=propEPCDomainDataSourcepc}" />

        <telerikXaml:XamlDataProvider x:Key="xamlDataProvider"
                    Xaml="{Binding ElementName=lstproperties, Path=SelectedItem.propsummary, Mode=OneWay}"
                                              RichTextBox="{Binding ElementName=editor}" ></telerikXaml:XamlDataProvider>


    </UserControl.Resources>

        <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <ImageBrush ImageSource="~/App_Themes/background/City2.jpg" Stretch="UniformToFill" Opacity="0.3"></ImageBrush>
        </Grid.Background>
        <Grid.Resources>
            <ElasticEase x:Name="ResizingEase" Springiness="5" Oscillations="1"></ElasticEase>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300"></ColumnDefinition>
            <ColumnDefinition Width="700"></ColumnDefinition>
            <ColumnDefinition Width="2"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="430"></RowDefinition>
            <RowDefinition Height="1"></RowDefinition>
        </Grid.RowDefinitions>
        <Riacontrols:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my1:landproperty, CreateList=true}" Height="0" LoadedData="landpropertyDomainDataSource_LoadedData" Name="landpropertyDomainDataSource1" QueryName="GetLivePropertiesInformation" Width="0" >
            <Riacontrols:DomainDataSource.DomainContext>
                <ds:LandlordContext x:Name="docDomainContext"/>
            </Riacontrols:DomainDataSource.DomainContext>
        </Riacontrols:DomainDataSource>
        <Riacontrols:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my1:propEPC, CreateList=true}" Height="0" LoadedData="propEPCDomainDataSourcepc_LoadedData" Name="propEPCDomainDataSourcepc" QueryName="GetPropEPCsByProperty" Width="0" >
            <Riacontrols:DomainDataSource.DomainContext>
                <ds:LandlordContext />
            </Riacontrols:DomainDataSource.DomainContext>
        </Riacontrols:DomainDataSource>

        <ListBox x:Name="lstproperties"  Width="250" Height="380" Grid.Row="1" Grid.Column="0"  ItemsSource="{Binding Data, ElementName=landpropertyDomainDataSource1}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionMode="Single"  BorderThickness="0" Background="Transparent" telerik:Theming.Theme="Transparent" >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel></toolkit:WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="3" Width="280">
                    <Rectangle VerticalAlignment="Center" Margin="5"
                           HorizontalAlignment="Left"
                           RadiusX="5"
                           RadiusY="5"
                           Width="75"
                           Height="75">
                        <Rectangle.Effect>
                            <DropShadowEffect Opacity="0.5"/>
                        </Rectangle.Effect>
                        <Rectangle.Fill>
                            <ImageBrush ImageSource="{Binding propcover}"/>
                        </Rectangle.Fill>
                    </Rectangle>
                        <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="3,0,0,0" HorizontalAlignment="Left" Background="Transparent" >
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Name="txtnoofbedroom" Text="{Binding noofbedroom}"></TextBlock>
                                <TextBlock Text=" "></TextBlock>
                                <TextBlock Text="{Binding proptypedescrib}"></TextBlock>
                            </StackPanel>
                            <TextBlock Text="{Binding propadd1}">
                                </TextBlock>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding propcounty}"></TextBlock>
                                <TextBlock Text=", "></TextBlock>
                                <TextBlock Text="{Binding proppcode1}"></TextBlock>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding propprice, StringFormat=c0, ConverterCulture= en-GB}"></TextBlock>
                                <TextBlock Text=" "></TextBlock>
                                <TextBlock Text="{Binding proppricetype}"></TextBlock>
                            </StackPanel>

                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <telerik:RadTransitionControl x:Name="transhome" Content="{Binding SelectedItem, ElementName=lstproperties}" Grid.Column="1" Grid.Row="1">
                <telerik:RadTransitionControl.ContentTemplate>
                    <DataTemplate>
                    <ScrollViewer VerticalScrollBarVisibility="Auto" BorderThickness="0" telerik:Theming.Theme="Transparent">
                        <StackPanel Orientation="Vertical">

                                            <telerik:RadRichTextBox x:Name="editor" VerticalScrollBarVisibility="Auto" Height="150" />

                                        <telerik:RadButton Width="120" Content="Request information" x:Name="butrequestinfo" HorizontalAlignment="Right" Margin="0,5,10,10" Click="butrequestinfo_Click"></telerik:RadButton>
                                    </StackPanel>
</ScrollViewer>
                       </DataTemplate>
</telerik:RadTransitionControl.ContentTemplate>
</telerik:RadTransitionContro>

    </Grid>

What could it be wrong with data binding?
thanks,
Kamal

[Iva Toteva]

Hello Kamal Mostofi,

We have recently found that the DataContext of data providers may not be updated properly when they are declared as resources. Therefore, the data providers have been implemented as FrameworkElements and should be placed in the visual tree/ You don't have to worry about the place where the provider is, as it does not have a visual representation.
If moving the data provider to the visual tree does not solve the problem, we would appreciate it if you opened a support ticket and attached an application that reproduces the behavior you are observing.

Kind regards,
Iva
the Telerik team

[Kamal Mostofi]

Hi,
I removed it from resource control to the visual tree but I get a error on x:key name

<telerikXaml:XamlDataProvider x:Key="xamlDataProvider"
                    Xaml="{Binding ElementName=lstproperties, Path=SelectedItem.propsummary, Mode=OneWay}"
                                              RichTextBox="{Binding ElementName=editor}" ></telerikXaml:XamlDataProvider>

Error: Key attribute can be used only on a tag contained in an IDictionary type property.

thanks,
Kamal

[Iva Toteva]

Hello Kamal,

You have to remove the Key attribute, as it can be used with elements declared as resources. Instead, you can set the Name of the data provider, in order to be able to reference it in code-behind, bind to it, etc. Here is the modified version of your code-snippet:

<telerikXaml:XamlDataProvider x:Name="xamlDataProvider" Xaml="{Binding ElementName=lstproperties, Path=SelectedItem.propsummary, Mode=OneWay}" RichTextBox="{Binding ElementName=editor}" ></telerikXaml:XamlDataProvider>

If it still does not work, please open a support ticket and attach a demo project, so that we can identify the cause of the problem and suggest a solution.

Kind regards,
Iva
the Telerik team

[Kamal Mostofi]

Hi,
Thanks. I don't have the error now.
I have an admin page where I enter texts into Richtextbox (with Ribbon) and save it. This section works.

But, on the client side, I have a list box with list of items.  When we click on the items, their details displays on the screen. These details are inside a transition cotrol. I added the RichTextbox to display the text that was entered by admin..... It doesn't show it.
My question is how I can display the formatted text inside a RichtextBox from database?

Thanks,
Kamal

[Iva Toteva]

Hi Kamal,

We have already pointed you several examples of how you can display and edit formatted text using a data base. The problem you have stumbled upon is most probably in the setting up of the WCF service or the binding. Could you try placing a TextBox which has its Text property bound to the same column in your DB that you wish to have the XamlDataProvider of RadRichTextBox bound to, and see if it shows anything? That would determine if the problem is with RadRichTextBox and the data provider or the service.
If you are able to show the data-base entries in the TextBox, please open a support ticket and attach your application, so that we can see where the problem lies. 

Regards,
Iva
the Telerik team