How to Bind Data with the XamRichTextEditor

In this video, we’re going to show you how to data bind the rich text generated by the Infragistics Xam Rich Text editor control, to other elements within a view, or to properties defined in a view model, when using the MVVM design pattern. Let’s take a look!

This demo contains two controls. Here we have the Xam Rich Text Editor on the left, and a text block on the right. What we want to do is data bind the rich text generated by the Infragistics Xam Rich Text Editor control, to the text of the text block control. But before we do this, we have to make a decision. What type, or what format, do we want to store or get the rich text out of the Rich Text Editor control?

First, we have to decide what format we want to use. The Xam Rich Text Editor will export the rich text it generates in plain text, RTF, or HTML. For our purposes, we're just going to pick HTML. I'm going to add a reference to the Infragistics documents. We want to look for rich text document HTML. Now that we've added the reference, we need to add what's called the HTML document adapter. This document adapter is the middle man, and is used to create the binding between the Rich Text Editor and the incoming data.

The HTML document adapter is used to create the binding to create the connection between the Xam Rich Text Editor, and the source of the binding property. In this case, that would be the text block. We want to give it a name, so let’s just call it HTML. What we want to do is data bind the document property of the document adapter to the Xam Rich Text Editor. So we’re “Binding”, and this is going to be “RTE”, and the path is the document of the RTE. And with that, we’ve created the binding between the Xam Rich Text Editor, and the HTML document adapter.

Next, we want to bind the output of the results of the rich text, which is generated in the document adapter, to the text block. We're going to bind the text to the document adapter. The path will be the value. You'll immediately see in the design surface, that we now have some stubbed out HTML. So let's go ahead and run the application, and you can see as I type that nothing really happens. What has to happen is it has to lose focus. By default, the binding will update when the Xam Rich Text Editor loses focus. I want to change that for our purposes and set the refresh trigger property to “content changed”. By default, it's lost focus. We also have options for explicit and delayed. We'll get to what delayed means in a minute. For now we'll say “content changed” and run the application.

Now I'm going to start typing some information. As you can see, the text block is updated every time the content changes in the Xam Rich Text Editor. Let's say that we don't want that behavior. We want to delay, or we want to update the underlying value after a certain amount of time. First what we want to do is to change our refresh trigger to “delayed”. Now delayed has a couple properties. First we have delay after first edit. We're going to use this property to say after my first edit, update the value after two seconds. When I first hit the keyboard or when I first type a key, the value would be updated two seconds after that event.

Now I'm going to start typing, and when I first hit a letter, start counting to two. As you can see, it updated immediately after that. What we're saying here is that we will update the value two seconds after the first edit occurs. Let's run the application. We're going to re-size this window. As I start typing, two seconds after that first edit began, you can see that the value updated. Once again, two seconds has passed. And again, two seconds.

Now, we also have an option to say we're going to delay after the last edit. What this means is that the value will be updated two seconds after I stop updating. So let’s run the application and I'm going to begin in editing. I'll stop and wait two seconds, and there we go: the value is updated.

Now, when you want to data bind to a property on a view model, not much really changes. Let's take a quick look at the view model for this demo. Here we have a single property called HTML text and it implements the i-notify property change interface. That's about it. The main window sets its data context in code in the constructor. Main window view model. Now in order to data bind, the HTML text property, to the Xam Ridge Text Editor, we're still using the HTML document adapter. What we're going to do, is we're going to data bind the value to that property.

Now what I'm going to do is run the application. I'm going to make sure I hit a break point and I'm going to begin typing, and you’ll see here that we have the delay. Wait two seconds, and then the property has been updated in the view model. Now I can serialize this to a file, or some other mechanism.

As you can see, data binding with the XamRichTextEditor is extremely simple. With the help of a document adapter, you can bind to either elements in your UI or to properties in a view model easily. So what are you waiting for? It’s time to get coding!