I have covered data binding the Silverlight Grid Control using WCF RIA Services in the past, but have left out a common scenario where a user might need to update cells using in-place editors and save that data back to the data source.
So in this blog post, we’re going to take a look at how to use the combo box editor to change the data for a field and then save that change back to the database. Here I’m assuming the presence of a DXGrid for Silverlight control bound to the “Products” table of the sample Northwinds database. The “ProductName” column should have a combobox in-place editor as well. If you are just starting out, I recommend reading the following posts first before you proceed further:
- Silverlight Grid Control - Data Binding using RIA Services
- Silverlight Grid Control – How to Embed Editors
Updates do not occur automatically, so to save each change, I need a mechanism where the whole process is correctly automated. I’ll do this by handling the HiddenEditor and RowUpdated events of the TableView.
- <dxg:GridControl Name="gridControl1">
- <dxg:GridControl.View>
- <dxg:TableView AutoWidth="True" Name="tableView" HiddenEditor="tableView_HiddenEditor" RowUpdated="tableView_RowUpdated" />
- </dxg:GridControl.View>
- <dxg:GridControl.Columns>
- <dxg:GridColumn FieldName="ProductName" Header="Product Name">
- <dxg:GridColumn.EditSettings>
- <dxe:ComboBoxEditSettings DisplayMember="ProductName" ValueMember="ProductName" />
- </dxg:GridColumn.EditSettings>
- </dxg:GridColumn>
- <dxg:GridColumn FieldName="UnitPrice" Header="Unit Price" />
- <dxg:GridColumn FieldName="UnitsInStock" Header="Units in Stock" />
- <dxg:GridColumn FieldName="UnitsOnOrder" Header="Units on Order" />
- </dxg:GridControl.Columns>
- </dxg:GridControl>
The HiddenEditor event is invoked every time an editor is closed. So in this case, when an item in the combo box is selected and the editor is closed, the HiddenEditor event will be triggered.
The RowUpdated event is where we’ll submit the changes back to the database.
Here’s the code I’ll add to handle saving and submitting the data:
- private void tableView_HiddenEditor(object sender, DevExpress.Xpf.Grid.EditorEventArgs e)
- {
- if (e.Column.FieldName != "ProductName") return;
- gridControl1.View.CommitEditing();
- }
-
- private void tableView_RowUpdated(object sender, DevExpress.Xpf.Grid.RowEventArgs e)
- {
- _productsContext.SubmitChanges(OnSubmitCompleted, null);
- }
-
- private void OnSubmitCompleted(SubmitOperation so)
- {
- if ((so.HasError))
- {
- MessageBox.Show(string.Format("Save Failed: {0}", so.Error.Message));
- so.MarkErrorAsHandled();
- }
- else
- {
- MessageBox.Show("Data Saved");
- }
- }
The code in the OnSubmitCompleted method is purely for demonstration and error handling purposes.
And that’s it! You can now run the application and use the combo box to select and update the values in the “ProductName” column of the grid.
Stay tuned for a video demonstration of this tutorial on the DevExpress Channel.