Lesson 4 - Data Binding
- 4 minutes to read
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 18.2\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.
var fluent = mvvmContext1.OfType<AccountCollectionViewModel>();
fluent.SetBinding(gridView1, gView => gView.LoadingPanelVisible, x => x.IsLoading);
fluent.SetBinding(gridControl1, gControl => gControl.DataSource, x => x.Entities);
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.
fluent.WithEvent<DevExpress.XtraGrid.Views.Base.ColumnView, DevExpress.XtraGrid.Views.Base.FocusedRowObjectChangedEventArgs>(gridView1, "FocusedRowObjectChanged")
.SetBinding(x => x.SelectedEntity,
args => args.Row as DataModels.Account,
(gView, entity) => gView.FocusedRowHandle = gView.FindRow(entity));
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.
//Account Edit Form View
var fluent = mvvmContext1.OfType<AccountViewModel>();
fluent.SetObjectDataSourceBinding(
accountBindingSource, x => x.Entity, x => x.Update());
//Category Edit Form View
var fluent = mvvmContext.OfType<CategoryViewModel>();
fluent.SetObjectDataSourceBinding(
bindingSource, x => x.Entity, x => x.Update());
//Transaction Edit Form View
var fluent = mvvmContext.OfType<TransactionViewModel>();
fluent.SetObjectDataSourceBinding(
bindingSource, x => x.Entity, x => x.Update());
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.
fluent.SetBinding(accountBindingSource,
abs => abs.DataSource, x => x.LookUpAccounts.Entities);
fluent.SetBinding(categoryBindingSource,
cbs => cbs.DataSource, x => x.LookUpCategories.Entities);
Populating editor drop-down menus is described in greater detail in Lesson 6.