We recommend that you use the xamDataGrid control instead of the xamGrid control. The xamGrid is being planned for retirement over the next few years and will not receive any new features. We will continue to provide support and critical bug fixes for the xamGrid during this time. For help or questions on migrating your codebase to the xamDataGrid, please contact support.
This topic will walk you through how to use the CellEnteredEditMode and CellExitingEditMode events to create a custom editor on a template column.
Assumptions:
This topic assumes the following:
You already have a xamGrid™ control bound to data on your page. For more information see the Data Binding topic.
You have Editing enabled. For more information, see the Editing Data topic.
You will create a custom combo box that will be used as an editor for the Product Name column on your grid. When the grid enters editing mode, a combo box populated with all the product names will appear, the current product name will be highlighted in the drop down.
Create a TemplateColumn, set the Key to ProductName.
In XAML:
<ig:XamGrid x:Name="MyDataGrid" ItemsSource="{Binding Source={StaticResource DataUtil}, Path=Products}">
<ig:XamGrid.EditingSettings>
<ig:EditingSettings AllowEditing="Row"/>
</ig:XamGrid.EditingSettings>
<ig:XamGrid.Columns>
<ig:TemplateColumn Key="ProductName">
<!-- TODO: Add ItemTemplate -->
<!-- TODO: Add EditorTemplate -->
</ig:TemplateColumn>
</ig:XamGrid.Columns>
</ig:XamGrid>Create an ItemTemplate.
Create a DataTemplate.
Add a TextBlock to the DataTemplate and bind it to the ProductName column.
In XAML:
<ig:TemplateColumn.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ProductName}"/>
</DataTemplate>
</ig:TemplateColumn.ItemTemplate>Create an EditorTemplate.
Create a DataTemplate.
Add a ComboBox.
Create an ItemTemplate for the combo box.
Create a DataTemplate.
Add a TextBlock to the DataTemplate and bind it to the product name.
In XAML:
<ig:TemplateColumn.EditorTemplate>
<DataTemplate>
<ComboBox>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ProductName}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</DataTemplate>
</ig:TemplateColumn.EditorTemplate>Add the CellEnteredEditMode and CellExitingEditMode events to the xamGrid control.
In XAML:
<ig:XamGrid x:Name="MyDataGrid" …
CellEnteredEditMode="MyDataGrid_CellEnteredEditMode"
CellExitingEditMode="MyDataGrid_CellExitingEditMode">
…
</ig:XamGrid>Handle the CellEnteredEditMode and CellExitingEditMode events.
In Visual Basic:
Private Sub MyDataGrid_CellEnteredEditMode(ByVal sender As Object, ByVal e As EditingCellEventArgs)
' Ensure correct cell
If (e.Cell.Column.Key = "ProductName") Then
Dim box As ComboBox = CType(e.Editor, ComboBox)
box.ItemsSource = DataUtil.Products
' Set selected index to the index of the grid cell
box.SelectedIndex = e.Cell.Row.Index
End If
End Sub
Private Sub MyDataGrid_CellExitingEditMode(ByVal sender As Object, ByVal e As ExitEditingCellEventArgs)
' Ensure using correct cell and editing has not been cancelled
If ((e.Cell.Column.Key = "ProductName") _
AndAlso Not e.EditingCanceled) Then
Dim box As ComboBox = CType(e.Editor, ComboBox)
If (Not (box.SelectedItem) Is Nothing) Then
' New value is value of selected item in combo box
e.NewValue = CType(box.SelectedItem, Product).ProductName
box.ItemsSource = Nothing
box.SelectedItem = Nothing
End If
End If
End SubIn C#:
private void MyDataGrid_CellEnteredEditMode(object sender, EditingCellEventArgs e)
{
// Ensure correct cell
if (e.Cell.Column.Key == "ProductName") {
ComboBox box = e.Editor as ComboBox;
box.ItemsSource = DataUtil.Products;
// Set selected index to the index of the grid cell
box.SelectedIndex = e.Cell.Row.Index;
}
}
private void MyDataGrid_CellExitingEditMode(object sender, ExitEditingCellEventArgs e)
{
// Ensure using correct cell and editing has not been cancelled
if (e.Cell.Column.Key == "ProductName" && !e.EditingCanceled) {
ComboBox box = e.Editor as ComboBox;
if (box.SelectedItem !=null){
// New value is value of selected item in combo box
e.NewValue = ((Product)box.SelectedItem).ProductName;
box.ItemsSource = null;
box.SelectedItem = null;
}
}
}Save and run your application. When the ProductName column enters editing mode, you should see a combo box appear populated with the existing product names. The current product name should be selected.
