Focus CellEditTemplate on selection of Silverlight DataGrid Row

Silverlight DataGrid has TemplateColumn to change the appearance of the column.

In General, when we select DataGrid row we are not able to see CellEditTemplate data.

we need to double time click to DataGrid row to visible CellEditTemplate.

so then scenario is what to do in code to visible CellEditTemplate on one click.

Let go through following steps.


Step 1: Place DataGrid control on the XAML page and add DataGridTemplate column with CellTemplate and CellEditTemplate.

File : EmployeeListControl.xaml

<DataGrid  Name="ItemGrid"
                                       ItemsSource="{Binding EmployeeList}"
                                       AutoGenerateColumns="False"
                                       HorizontalAlignment="Left"
                                        SelectedCellsChanged="watchlistItemGrid_SelectedCellsChanged"
                                       RowDetailsVisibilityMode="VisibleWhenSelected"
                                       SelectionMode="Extended"
                                       SelectionUnit="Cell"          
                                       VerticalAlignment="Top"
                                       SelectedItem="{Binding SelectedEmployee, Mode=TwoWay}">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn                                                              
                                                             Header="Employee Name"
                                                             IsReadOnly="False"
                                                             SortMemberPath="EmployeeName">
                                        <DataGridTemplateColumn.CellEditingTemplate>
                                            <DataTemplate>
                                                <Grid  FocusManager.FocusedElement="{Binding  
                                                                                              ElementName=EmployeeTextBox}">
                                                    <TextBox Margin=" 4,4,4,4"
                                                             Width="150"
                                                             x:Name="EmployeeTextBox"
                                                             VerticalAlignment="Center"
                                                             HorizontalAlignment="Left"
                                                             Text="{Binding EmployeeName, Mode=TwoWay}"
                                                             FontWeight="Bold"
                                                             Cursor="Hand" />
                                                </Grid>
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellEditingTemplate>
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
                                                <TextBlock Margin=" 4,4,4,4"
                                                           Width="150"
                                                           VerticalAlignment="Center"
                                                           HorizontalAlignment="Left"
                                                           Text="{Binding EmployeeName,Mode=OneWay}"
                                                            FontWeight="Bold"
                                                           Cursor="Hand" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                             </DataGrid.Columns>
                            </DataGrid>


In above code i have place one DataGrid into the UserControl, currently data are binding using MVVM through ViewModel, you are aware about Binding Properties to Control.

So we skip ViewModel code here.

In DataGrid, Create DataGridTemplateColumn to Edit Employee Name to click on the Row.

In TemplateColumn Create Tow Template one is CellTemplate to view data on grid, and another is CellEditTemplate to edit data on grid.

CellTemplate

In CellTemplate place one TextBlock to display EmployeeName.

CellEditTemplate

In CellEditTemplate place TextBox to Edit EmployeeName to click on grid row.

to set focus on TextBox we have to put TextBox into the Grid, and have to set FocusManager.FocusedElement propety to TextBox name. so when we click on DataGrid Row focus automatically set to TextBox.

Now, we have to set some properties to DataGrid.

• RowDetailsVisibilityMode="VisibleWhenSelected"  

                   This property specify that when we select row it's edit template is visible.

•  SelectionUnit="Cell" 

This property identify that when you can select row, it will select current focus cell instead of whole row.

Now, have to create one EventHanlder for SelectedCellChanged.

Step 2 : Create one EventHander for SelectedCellChanged and write logic to set focus on selected cell control.

File : EmployeeListControl.xaml.cs

 private void watchlistItemGrid_SelectedCellsChanged(object sender, SelectedCellsChangedEventArgs e)
        {
            if (e.AddedCells.Count == 0) return;
            var currentCell = e.AddedCells[0];
            string header = (string)currentCell.Column.Header;
            watchlistItemGrid.BeginEdit();       
        }

above code snippet will set focus on selected cell's control and notify grid to edit data.