Binding RadDocument from ViewModel

[Leos]

Hello,
I have RadDocument property in my ViewModel.

public RadDocument MyDocument
{
    get
    {
        RadDocument doc = new RadDocument();
        Uri uri = new Uri("MyApp;component/Documents/HelpTelerik.docx", UriKind.Relative);
        using (Stream s = Application.GetResourceStream(uri).Stream)
        {
            doc = provider.Import(s);
        }
        return doc;
    }
}

Provider is DocxFormatProvider.

How to bind it into RichTextBoxt?

<telerik:RadRichTextBox Grid.Row="1" IsReadOnly="True" Document="{Binding MyDocument, Mode=TwoWay}"/>

does not work - no dependecy property?:
Object of type System.Windows.Data.Binding cannot be converted to type Telerik.Windows.Documents.Model.RadDocument.

Thank you very much.

My version: Telerik RadControls for Silverlight Q3/2010.

[Boby]

Hello Leos,
For achieving this you can use our data providers - components designed to help with binding RadRichTextBox. You can read more about them in this article.
As docx format is not text-based, there is no specific data provider for it, but you can store the data temporarily in XAML format, and when saving ViewModel to underlying data model to convert it to docx with code similar to this:

RadDocument document = new XamlFormatProvider().Import(xaml);
byte[] docx = new DocxFormatProvider().Export(document);

where xaml is the string field in your ViewModel, containing the XAML representation of the document - the one that RadRichTextBox content is bound to through data provider.
Export method have one more overload which writes to opened stream.

Don't hesitate to write back if you find this explanation insufficient.

Kind regards,
Boby
the Telerik team

[Dan Wygant]

In the View's XAML I tried:
<telerik:RadRichTextBox x:Name="editor" Height="200" HorizontalContentAlignment="Center"
Document="{Binding RadDocumentXaml, Mode=TwoWay}" />

Where the ModelView has a few properties:

public RadDocument MyRadDocument { get; set; }

private string mRadDocumentXaml = string.Empty;
public string RadDocumentXaml
{
 get
 {
  mRadDocumentXaml = new XamlFormatProvider().Export(MyRadDocument);
  return mRadDocumentXaml ;
 }
 set
 {
  MyRadDocument = new XamlFormatProvider().Import(value);
  bool isChanged = ChangeProperty("RadDocumentXaml ", ref mRadDocumentXaml , value);
 }
}

But get the same exception: XamlParseException
Right on that line/position where the binding is specified.

Thanks,
  DanWygant on Yahoo

[Ivailo Karamanolev]

Hello Dan Wygant,

You cannot bind the Document property of RadRichTextBox, because it is not a DependencyProperty. As Bobi previously advised you, you should use data providers. For example, if you have a string property RadDocumentXaml in your view-model, which implements INotifyPropertyChanged, you can set it as a binding source to the rich text box in the following way:

<telerikXaml:XamlDataProvider Xaml="{Binding RadDocumentXaml, Mode=TwoWay}" RichTextBox="{Binding ElementName=editor}" x:Name="dataProvider" />
<telerik:RadRichTextBox x:Name="editor" />

You can also find a sample demo attached to this post.

Best wishes,
Ivailo
the Telerik team

[Andreas]

Hi,

I have a View with RadRichTextBox and a ViewModel with a document of any type (docx, rtf or txt) as Stream.
How to use the DataProvider technique in this scenario? Can I place multiple DataProviders to the View (XAML) pointing to the same RadRichTextBox control? And how to connect them to the stream data of the ViewModel? Afaik I could only provide a property of type RadDocument based on my Stream data in the ViewModel, but as I see the Data Providers doesn't work with RadDocument instances. How to solve that?

Best Regards
Andreas

[Iva Toteva]

Hi Andreas,

You cannot have more than one data provider set the content of a RadRichTextBox, because each data provider will produce a different document and it will not be possible to determine which of the documents should be shown in the editor.

You can either use format providers to import documents from streams in different document formats or convert all documents to one format and use a DataProvider for that format. Then, instead of the RadDocument property in your ViewModel, you can keep a string with the serialization of that document in the format you have chosen.

All the best,
Iva Toteva
the Telerik team

[Vipin Panwar]

'telerik.windows.controls.ribbonbar.dll'  is missing in the attached demo.

Can you please provide the same version .dll?

Thanks,

Vipin Panwar

[Vipin Panwar]

Hi Telerik Team,

I am wondering if you assist me on below,

I have RadListBox with RadRichTextBox on same xaml page. I am using MVVM. In view model class i got a entity type collection as itemsource of RadListBox. When user select any of RadRichTextBox item we have to populate same object another property(For Signature like Outlook) that stored HTML inside in database. User will edit the sign and save the signature to db.

 Can you assist me to achieve the above using MVVM with RadRichTextBox.

 Let me know if any additional information is required.

 Thanks in advance,

Vipin Panwar

[Todor]

Hi Vipin,

As Ivailo mentioned in his reply, you cannot bind the Document property of RadRichTextBox, because it is not a DependencyProperty. You should use data providers instead.

For your convenience, I've created a sample project which uses the approach mentioned above fitting the scenario you described. You can find it attached.
However, you said when "user any of RadRichTextBox item we have to populate same object another property", so if the scenario is not the one used in the sent project and you cannot achieve the desired goal, please try to modify it in a way it should be and send back to us.

About the Telerik.Windows.Controls.RibbonBar.dll - The version of the project which Ivailo sent is quite old - since 2011. The control is obsoleted and it is not part of the UI for Silverlight suite. Thus, a reference to the Telerik.Windows.Controls.RibbonView assembly should be added instead.

I hope this helps.

Regards,
Todor
Telerik

[Vipin Panwar]

Hi Todor,

Thanks for quick reply and the kind of help by created a sample project.

Additional to this let's say user wants to modify the signature similar to outlook and want to save/update them in sql table. On save how can we get the modified signature in View Model class from RadRichTextBox that we need to save in db as html. I am using Relay command.

Is it again with the help of data provider or something else?

Also can we achieve the same above without data provider, i mean using only xaml or something else as alternate?

Thanks in advance

Vipin Panwar

[Vipin Panwar]

Hi Todor, 

As I said in above post I want to save the user's input (Signature in HTML format) into a SQL database table and then load it from there in my Silverlight application. I go through the some available Telerik documents, i read from below link,

RadRichTextBox allows you to export and import its content. This is useful in case you want to save the user's input into a data base and then load it from there, or if you want to save/load the content of RadRichTextBox to/from a file.​

http://docs.telerik.com/devtools/silverlight/controls/radrichtextbox/import-export/features-import-export

So please assist me how can we incorporate Import/Export with MVVM to import from SQL table and to save back signature to database. if possible please share sample project. This implementation is similar to outlook insert signature in new email. 

Thanks in advance,

Vipin Panwar

[Vipin Panwar]

Hi Telerik Team,

Is there any update so far on the above post to use import/export with mvvm to save the user's input into a data base and then load it from there?

Thanks,

Vipin

[Todor]

Hi Vipin,

When the binding to the property of your model is in two-way mode, the property value will be affected when the user edits the RadRichTextBox's document. This means at any time the property value would be up-to-date so you can save it to the database whenever it is necessary. Using the data providers is the way to achieve the goal in an MVVM way.

About storing the data in the database - it depends on your scenario and application requirements in which format you could save the data. For example, you could save it like a string.

I hope this helps.

Regards,
Todor
Telerik

[Vipin Panwar]

Hi Telerik Team,

I have an Silverlight application with MVVM. I have implemented RadRichTextBox as suggested by Todor in shared sample project above post. 

There is a need to additional this to insert image in RadRichTextBox with user signature(text). I search for same but didn't meet with an example like how to achieve this. Currently i am using HTML Data Provide to load/update user signature in RadRichTextBox from the database.

Also copy/paste the image to RadRichTextBox not works. 

I read some telerik post but not meet the way to achieve the same. If possible can you please re-attached the updated sample project code here. that would be really helpful.

Thanks,

Vipin 

[Boby]

Hello Vipin,

I am not sure I properly understand your scenario. You can insert images in RadRichTextBox using RadRichTextBox.InsertImage (using the image stream) or RadRichTextBox.InsertInline (using an ImageInline argument) methods. 

As this is not related to the original topic of the thread, I would suggest you to continue the conversation in a separate support ticket if needed.

Regards,
Boby
Telerik

[Vipin Panwar]

Hi Boby,

I tried but still not meets the steps and page url to open a new thread !

Regards your comment (I am not sure I properly understand your scenario.),

I have to use Silverlight Telerik Rad Rich text with HTML data provider to read and save user signature (text) in database in html format. That Todor (Telerik support team member) shared sample project in above post in same thread.

Additional to this, I have to allow a user to browse a image/logo (image, .jpg, .png) and to insert with the user signature (With text in rad Rich Text Box) like in Outlook (insert signature/logo with image).

Currently we are saving text enter by user in RadRichtextBox in html format to the db with the help of HtmlDataProvider.

Earlier this control was not capable to save image with text, i saw in a thread by Telerik support member.

So how can we achieve this to insert image in RadRichtextBox with text as user signature and to save in html format to db and load again from db with image/logo.​

If possible try with the shared sample project in above post by Todor and shared. This would be really helpful to use this control for many telerik control users. 

Please let me know if additional information is required in case if you still not clear to this scenario.

Thanks in advance,

Vipin Panwar

[Vipin Panwar]

Hi Telerik Team,

Is there any update so far on the above post, to insert image in RadRichTextBox with user signature(text) and to save in SQL database table as html?

Is it possible or not using Telerik Rad Rich Text Box?

Thanks,
Vipin

[Boby]

Hi Vipin,

The demo that Todor sent you demonstrated how to data-bind the content to .NET objects. You should additionally add your custom logic to preserve the data to a database. In a Silverlight application, the typical approach is to expose the database from the server using some kind of web services - for example, Silverlight RIA Services.

As far as I understand, you additionally need to provide a UI to the users so that they would be able to insert images in the RadRichTextBox control. You can find samples on how to attach full ribbon UI or simpler toolbar UI in the Telerik XAML SDK repository on GitHub. Note that in both examples you can freely modify the UI, removing the elements you won't need or adding new ones. Both of the examples contains the button for inserting the image. RadRichTextBox is capable of importing/editing/exporting HTML files with images and text.

Also sorry for the omission of a question from your previous posts, namely "Also copy/paste the image to RadRichTextBox not works. " - this is expected as Silverlight applications have access only to the plain Unicode text in the clipboard due to platform's security limitations. This means that all non-text elements could not be in a Silverlight application.

I would again suggest you to open separate forum thread or support ticket on the matter. This would help with the traceability of the issues as currently this forum thread is becoming polluted with topics unrelated to the original question.


Regards,
Boby
Telerik