The Silverlight Grid Control from DevExpress includes over 15 in-place editors that can be used to appropriately format the data as well as provide an interactive and user-friendly way of editing cell values. This is a feature that’s perhaps often overlooked by developers, but very useful for end-users who work with the data displayed in the grid every day. So to that effect, I’ve prepared this step-by-step tutorial on how to embed editors in grid cells.
Note that for the sake of simplicity, I’m using a list of items as my data source. This is in no way a requirement to using editors with data. Along the way, I’ll also show the code that can be used when working with a grid bound to data using RIA Services.
1. So to start, I’ll create a new Silverlight Application Project and add a grid control to it.
2. I’ll bind the grid to the sample list of data through code:
public MainPage() {
InitializeComponent();
grid.DataSource = new ProductList();
}
3. I’ll manually create the appropriate columns so it looks like this:
The XAML used to create this at design-time is as follows:
<dxg:GridControl x:Name="grid">
<dxg:GridControl.Columns>
<dxg:GridColumn FieldName="ProductName">
<dxg:GridColumn.EditSettings>
<dxe:ComboBoxEditSettings DisplayMember="ProductName"
ValueMember="ProductName" />
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>
<dxg:GridColumn FieldName="UnitPrice">
<dxg:GridColumn.EditSettings>
<dxe:SpinEditSettings MaxValue="999" MinValue="1" DisplayFormat="c2" />
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>
<dxg:GridColumn FieldName="Quantity" />
</dxg:GridControl.Columns>
<dxg:GridControl.View>
<dxg:TableView AutoWidth="True" />
</dxg:GridControl.View>
</dxg:GridControl>
4. Note that in the code above, the “ProductName” and “UnitPrice” columns have their column EditSettings property modified. The item inside those tags is the in-place editor. In the case of the ComboBoxEdit, I have specified the DisplayMember as well as the ValueMember properties so the editor knows which field to use to display the data and to populate the combo box.
The SpinEdit control simply has maximum value, a minimum value and the number’s display format specified.
5. If I run the application now, you’ll notice that the combo box is embedded inside the cell, but nothing is being displayed and when invoked, it has not been populated with data.
This is because while we have specified which fields to get data from, the editor control is unaware of which data source to query.
6. To fix that issue, I’ll need to also specify where the combo box should get its data from. For this, I’ll add the following line of C# code:
...
using DevExpress.Xpf.Editors.Settings;
...
public MainPage() {
InitializeComponent();
grid.DataSource = new ProductList();
((ComboBoxEditSettings)grid.Columns["ProductName"].EditSettings).ItemsSource = new ProductList();
}
7. As an example and a variation of the code above, if I had bound the grid control to a table named “Products” using RIA Services, the code would be as follows:
...
using System.ServiceModel.DomainServices.Client;
using DXProjectName.Web;
using DevExpress.Xpf.Editors.Settings;
...
private ProductsContext _productsContext = new ProductsContext();
public MainPage() {
InitializeComponent();
LoadOperation<Products> loadOperation = _productsContext.Load(_productsContext.GetProductsQuery());
grid.DataSource = loadOperation.Entities;
((ComboBoxEditSettings)grid.Columns["ProductName"].EditSettings).ItemsSource = loadOperation.Entities;
}
8. And that’s it! When I run the application again, the end-result looks like this:
The project for this example can be downloaded from CodeCentral: http://www.devexpress.com/Support/Center/e/E2603.aspx