Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Collapse]Build an Application
  [Expand]Choose Application UI
   Data Management Controls
  [Expand]Printing and Exporting
  [Collapse]WinForms MVVM
   [Expand]Concepts
   [Expand]Design-time Support
   [Collapse]Tutorials
     Lesson 1 - Creating The Project. Scaffolding Wizard.
     Lesson 2 - Creating Views
     Lesson 3 - Navigation and Services
     Lesson 4 - Data Binding
     Lesson 5 - Login Form
     Lesson 6 - Lookup Editors and Master Detail
     Lesson 7 - Additional Functionality
  [Expand]Skins
  [Expand]Localization
  [Expand]Right-to-Left Layout
   Redistribution and Deployment
 [Expand]Controls and Libraries
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 4 - Data Binding

Expanded Setting Grid DataSources

After the sample application is up and running, it is time to populate its Views with data.

Important

You are free to use any sample data you want. In this application, the Expenses.sqlite3 sample database is used. This file is included in the DevExpress Demo Center's data. You can copy it from your local storage (the default location is C:\Users\Public\Documents\DevExpress Demos 15.1\Components\Data\Expenses.sqlite3) or download it by clicking this link. Include this file into your project and make sure your application configuration uses the required SQLiteConnection to access it. You can refer to Microsoft Data Developer Center for more help or watch the online video tutorial about binding the Data Grid control to EF data.

All detail Views contain GridControls that are bound in the very same manner. The 'EntitiesViewModel' file, generated by the Scaffolding Wizard, contains an Entities collection that can be used as the data source. The following code illustrates how to use the SetBinding method to bind the GridControl for the 'Accounts' View to its data source.

For the rest of the detail Views, this code remains the same. You only need to modify the name of the ViewModel, passed to the OfType() method.

When your Views are bound to the required data, you would probably like to synchronize your grid with the SelectedEntity object, which keeps the currently selected entity. To do so, use the event-to-command behavior that will create this binding and refresh it each time the ColumnView.FocusedRowObjectChanged event occurs. The code below illustrates an example for the Accounts View.

Expanded Binding Edit Form Views

Edit form Views contain data layout controls instead of grid controls. The concepts of the binding itself remain the same. The difference is that detailed Views display the entire entities collection, and thus use properties and methods of the auto-generated 'EntitiesViewModel' class. Edit form Views are designed to display single entities, so here you should use methods and properties of the 'SingleObjectViewModel' class.

In the code above, the SetObjectDataSourceBinding method was used. This method works specifically with the Binding Source component and implements two useful behaviors at once.

  • Entities are treated as solid objects and normally do not send changed notifications when any of their fields change. For instance, if you change the name of an exising account, the related 'Account' entity will still be considered as unchanged. Binding using the SetObjectDataSourceBinding method will result in monitoring these changes and updating bindings nevertheless.
  • Vice versa, when the target UI element changes its bound property value (e.g., the editor's BaseEdit.EditValue property is modified at runtime), the bindings will be updated. The Binding Source component will be aware of these changes.This results in calling a method that is normally called whenever an entity is modified. Typically, this method is called 'Update', like in the code sample above.

As a side effect from these mechanics, DevExpress editors used for designing your edit forms will start validating values, entered by an end-user (see the figure below). This validation is based on Data Annotation Attributes, declared within your Data Models in the very first tutorial.

The edit form View for the Transactions collection has a more complicated layout with drop-down editors, which allow end-users to select the entity from two other collections - accounts and categories. Therefore, you will need your drop-down editors to display items from these collections. To do so, bind your accountBindingSource and categoryBindingSource objects to the required collections.

Populating editor drop-down menus is described in greater detail in Lesson 6.

Expanded See Also

How would you rate this topic?​​​​​​​