[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Collapse]Rich Text Editor
   [Expand]Product Information
    Product Class Structure
    Supported Formats
   [Collapse]Getting Started
     Lesson 1 - Create a Simple Rich Text Editor
     Lesson 2 - Customize the Integrated Ribbon UI
     Lesson 3 - Bind the RichEditControl to a Document Source using the MVVM pattern
     Lesson 4 - Create an Application Using the Instant Layout Assistant (for VS 2015 and earlier)
   [Expand]RichEditControl Document
   [Expand]Fields
    Text Formatting
    Import and Export
   [Expand]Page Layout
    Printing
    Hyphenation
    AutoCorrect
    Track Changes
    Mail Merge
    Restrictions and Protection
   [Expand]Visual Elements
    Services
    Events
    Commands
    HTML Tag Support
   [Expand]Examples
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 3 - Bind the RichEditControl to a Document Source using the MVVM pattern

The following topic describes how to load a document from a database to the RichEditControl using the Model-View-ViewModel design pattern.

Expanded Create a RichEditControl

  1. Find the DevExpress 19.2 : Rich Text Editor group on the Toolbox and drop the RichEditControl on the form. Right-click the control and select Layout > Reset All.

  2. The RichEditControl comes with a built-in ribbon containing all related items. You can disable the ribbon or create only specific ribbon tabs using the RichEditControl's Smart Tag. Refer to the Lesson 1 - Create a Simple Rich Text Editor and Lesson 5 - Create Separate Ribbon Pages for a Rich Text Editor topics for more information.

Expanded Create a Data Model

In this example, the data model is created from the DevExpress Cars.mdf data source using the Entity Framework Code First from an Existing Data Base approach. Refer to the Entity Framework Code First to an Existing Database topic on MSDN for an example on how to define a data model using this approach.

Note

Make sure that the Entity Framework package is added to Visual Studio before creating a Data Model. Refer to the Get Entity Framework article for details on how to install the Entity Framework package.

As a result, the Car and MyModel classes are added to the project and moved to the Model folder. The MyModel class is a DBContext class descendant which allows you to query and save entity class instances. The Car class represents an individual database table. It provides the RtfContent property whose value is used as a document source.

Expanded Create a ViewModel

Add a new folder to your project. Right-click the project's name in the Solution Explorer and select Add > New Folder. Change the folder name to ViewModel.

Add a MainViewModel class. In the Solution Explorer, right-click the ViewModel folder and select Add > Class…. In the invoked Add New Item window, assign the MainViewModel name to the class.

Add the following code to handle data interaction:

  • Declare Car and MyModel classes' objects to obtain the data model and a specific data entry.
  • Create a DatabaseDocumentSource property used to bind the document from a database to the RichEditControl.
  • In the ViewModel constructor, load and fill the data model using the Load method, retrieve the first database entry and set the created DatabaseDocumentSource property to the data object's RtfContent property value.

Expanded Save Changes To the Database

The RichEditControl.DocumentSource property allows you to bind documents loaded from a database to the RichEditControl. However, this approach does not save changes made to the document back to database. To save the changes, access the current document content and use it as a new RtfContent property value. In this example, we implement a custom command which saves changes to the database. The command is executed on a button click.

Follow the steps below to accomplish this task.

  1. Create a new modified object and implement an UpdateModified method which updates the modified value.

  2. Create CanSave and Save methods used as CanExecute and Execute command methods. Implement these methods as shown in the code sample below:

Expanded Specify Bindings in XAML

Note

The DevExpress binding mechanisms use a special language described in the Language Specification topic.

  1. Declare the ViewModel and Devexpress.MVVM namespaces.

  2. Use the ViewModelSource to bind the ViewModel to the DataContext property as follows:

  3. Bind the UpdateModified method to the RichEditControl.ModifiedChanged event using the DXEvent binding mechanism to update the modified object every time the document changes. Use the RichEditControl.Modified property as the UpdateModified method parameter to define whether the document was changed.

  4. Create a new Save to the Database ribbon item. Refer to the Lesson 3 - Customize the Integrated Ribbon UI topic for details on how to create a new item in the built-in ribbon.

    Bind the button's command property to the CanSave and Save methods using the DXCommand binding mechanism and CommandParameter property as shown below:

Expanded Run the Project

Run the application to see the Rtf content in the RichEditControl. The Save To The DataBase ribbon button becomes available when making changes to the document.

Is this topic helpful?​​​​​​​