HowTo set focus to RowDetails Control when new Row is added

[Alexander]

Hi,

I need to know how to set the focus to a TextBox in the RowDetailsTemplate of my RadGridView when the user adds a new row with the NewRow-Row.

The best would be when the Cells of the NewRow are set to ReadOnly while the user inputs the values to the Controls of the RowDetailsTemplate, is this possible? How?

Thanks for all helpfull answers :)

 

Greets Alexander

[Stefan Nenchev]

Hello Alexander,

There is no straight-forward way to achieve such behavior, however, I have managed to come up with some approach that you can use. I am not absolutely familiar with your setup, but you can check the sample project attached. The sample utilizes the AddingNewDataItem event which is fired when adding an item with the NewRow.

Regards,
Stefan Nenchev
Telerik

[Alexander]

Hi Stefan,

thanks for your answer, it looks good. But I have one problem left. The RowDetails Section keeps visible after I select a other row. How can I achieve that the RowDetails Section gets closed after I select a other row? Please take a look at the Screenshot.

[Stefan Nenchev]

Hi Alexander,

You can use the approach from the following blog How To: Toggle Row Details one at a time. Simply subscribe to the RowDetailsVisibilityChanged event and apply the following logic:

GridViewRow lastExpandedRow;
private void clubsGrid_RowDetailsVisibilityChanged(object sender, GridViewRowDetailsEventArgs e)

        {

            if (e.Visibility == Visibility.Visible)

            {

                if (lastExpandedRow != null)

                {

                    lastExpandedRow.DetailsVisibility = Visibility.Collapsed;

                }

                lastExpandedRow = e.Row;

            }

        }

Regards,
Stefan Nenchev
Telerik

[Alexander]

Hmm, there is something strange when I add your snippet.

When I click a row for the first time it is working perfectly. When I click on a other row the current RowDetail is closing and the new one pops up. When I click back on the first row the RowDetail don't pops up, the RowDetailsVisibilityChanged event doesn't gets fired. Same when I click back to the second selected row and any other row I have selected one time before. Do you have any idea why this behavior is appearing?

 

Regards,

Alexander

[Stefan Nenchev]

Hi Alexander,

The RowDetailsVisibilityChanged event is fired as expected at my end on each click of the ToggleButton. I have noticed another issue, where if you expand and collapse a row and try to expand it again, it would not work as it is the lastExpandedRow. You can avoid it through the following modification:

private void clubsGrid_RowDetailsVisibilityChanged(object sender, GridViewRowDetailsEventArgs e)
        {
            if (e.Visibility == Visibility.Visible)
            {
                if (lastExpandedRow != null && lastExpandedRow != e.Row)
                {
                    lastExpandedRow.DetailsVisibility = Visibility.Collapsed;
                }
                lastExpandedRow = e.Row;
            }
        }

The behavior you describe is not observed at my end, though. Can you provide a sample project?

Regards,
Stefan Nenchev
Telerik

[Alexander]

I don't have ToggleButtons, the RowDetails Section appears by clicking directly on a row.

Maybe the XAML of my Grid can help you? Here it is:

    <Grid>
        <Grid.Resources>
            <local:UsersViewModel x:Key="UsersViewModel"/>
        </Grid.Resources>
        <telerik:RadGridView x:Name="gvUser" IsReadOnly="False" AutoGenerateColumns="False" NewRowPosition="Bottom" GroupRenderMode="Flat" CanUserInsertRows="True"
                             DataContext="{StaticResource UsersViewModel}" ItemsSource="{Binding Users}"
                             AddingNewDataItem="gvUser_AddingNewDataItem" RowDetailsVisibilityMode="VisibleWhenSelected"
                             RowDetailsVisibilityChanged="gvUser_RowDetailsVisibilityChanged">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Name="cName" Header="Nachname" DataMemberBinding="{Binding Name}"/>
                <telerik:GridViewDataColumn Name="cPrename" Header="Vorname" DataMemberBinding="{Binding Prename}"/>
                <telerik:GridViewDataColumn Name="cAccount" Header="Benutzeraccount" DataMemberBinding="{Binding UserAccount}"/>
                <telerik:GridViewDataColumn Name="cPermissionLevel" Header="Berechtigungsebene" DataMemberBinding="{Binding PermissionLevel}"/>
                <telerik:GridViewDataColumn Name="cPosition" Header="Position" DataMemberBinding="{Binding Position}"/>
                <telerik:GridViewDataColumn Name="cDepartment" Header="Abteilung" DataMemberBinding="{Binding Department}"/>
                <telerik:GridViewDataColumn Name="cEmail" Header="Email" DataMemberBinding="{Binding Email}"/>
            </telerik:RadGridView.Columns>

            <telerik:RadGridView.RowDetailsTemplate>
                <DataTemplate>
                    <Grid Grid.IsSharedSizeScope="True">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <TextBlock FontWeight="Bold" Margin="5" Grid.ColumnSpan="5">
                            <TextBlock.Text>
                                <MultiBinding StringFormat="{}{0} - {1}, {2}">
                                    <Binding Path="UserAccount"/>
                                    <Binding Path="Name"/>
                                    <Binding Path="Prename"/>
                                </MultiBinding>
                            </TextBlock.Text>
                        </TextBlock>

                        <Border HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.RowSpan="3" BorderBrush="Black" BorderThickness="2" Margin="20,0,0,0">
                            <Image Name="imgUserPicture" Grid.Row="1" Grid.RowSpan="3" Stretch="UniformToFill" Width="100" Height="100" Source="{Binding UserImage}"
                                   SourceUpdated="imgUserPicture_SourceUpdated"/>
                        </Border>
                        <telerik:RadButton Name="btnOpenPicture" Grid.Row="4" Content="Bild auswählen..." Margin="30,10,10,10" Click="btnOpenPicture_Click"/>

                        <TextBlock Grid.Row="2" Grid.Column="1" Text="Name: " FontWeight="Bold" HorizontalAlignment="Right" Margin="10"/>
                        <TextBox Name="txtName" Grid.Row="2" Grid.Column="2" Width="150" Text="{Binding Name}" HorizontalAlignment="Left" Margin="10"
                                 LostFocus="txt_LostFocus" TextChanged="txt_TextChanged"/>

                        <TextBlock Grid.Row="3" Grid.Column="1" Text="Vorname: " FontWeight="Bold" HorizontalAlignment="Right" Margin="10"/>
                        <TextBox Name="txtPrename" Grid.Row="3" Grid.Column="2" Width="150" Text="{Binding Prename}" HorizontalAlignment="Left" Margin="10"
                                 LostFocus="txt_LostFocus" TextChanged="txt_TextChanged"/>

                        <TextBlock Grid.Row="4" Grid.Column="1" Text="Accountname: " FontWeight="Bold" HorizontalAlignment="Right" Margin="10"/>
                        <TextBox Name="txtAccountname" Grid.Row="4" Grid.Column="2" Width="150" Text="{Binding UserAccount}" Height="{Binding ActualHeight, ElementName=txtName}" HorizontalAlignment="Left" Margin="10"
                                 LostFocus="txt_LostFocus" TextChanged="txt_TextChanged"/>

                        <TextBlock Grid.Row="2" Grid.Column="3" Text="Position: " FontWeight="Bold" HorizontalAlignment="Right" Margin="10"/>
                        <TextBox Name="txtPosition" Grid.Row="2" Grid.Column="4" Width="150" Text="{Binding Position}" HorizontalAlignment="Left" Margin="10"
                                 LostFocus="txt_LostFocus" TextChanged="txt_TextChanged"/>

                        <TextBlock Grid.Row="3" Grid.Column="3" Text="Abteilung: " FontWeight="Bold" HorizontalAlignment="Right" Margin="10"/>
                        <TextBox Name="txtDepartment" Grid.Row="3" Grid.Column="4" Width="150" Text="{Binding Department}" HorizontalAlignment="Left" Margin="10"
                                 LostFocus="txt_LostFocus" TextChanged="txt_TextChanged"/>

                        <TextBlock Grid.Row="4" Grid.Column="3" Text="Email: " FontWeight="Bold" HorizontalAlignment="Right" Margin="10"/>
                        <TextBox Name="txtEmail" Grid.Row="4" Grid.Column="4" Width="150" Text="{Binding Email}" Height="{Binding ActualHeight, ElementName=txtName}" HorizontalAlignment="Left" Margin="10"
                                 LostFocus="txt_LostFocus" TextChanged="txt_TextChanged"/>

                        <TextBlock Grid.Row="2" Grid.Column="5" Text="Passwort: " FontWeight="Bold" HorizontalAlignment="Right" Margin="10"/>
                        <StackPanel Grid.Row="2" Grid.Column="6" Orientation="Horizontal">
                            <telerik:RadWatermarkTextBox Name="txtPassword" WatermarkBehavior="HideOnTextEntered" Width="150" IsReadOnly="True" WatermarkContent="{Binding EncryptedPassword}"
                                                         HorizontalAlignment="Left" Margin="10" TextChanged="txt_TextChanged"/>
                            <telerik:RadButton Name="btnResetPassword" Content="Passwort zurücksetzen" Width="150" Height="{Binding ActualHeight, ElementName=txtName}"
                                               Click="btnResetPassword_Click"/>
                        </StackPanel>

                        <TextBlock Grid.Row="3" Grid.Column="5" Text="Zugriffslevel: " FontWeight="Bold" HorizontalAlignment="Right" Margin="10"/>
                        <telerik:RadComboBox Name="cbPermissionLevel" DisplayMemberPath="Description" SelectedValuePath="Id" IsEditable="False"
                                             Grid.Row="3" Grid.Column="6" Margin="10,10,0,10" SelectionChanged="cbPermissionLevel_SelectionChanged"/>

                        <telerik:RadButton Name="btnSaveUser" Content="Speichern" Grid.Row="4" Grid.Column="6" Width="150"
                                           Height="{Binding ActualHeight, ElementName=txtName}" Visibility="{Binding NewUser}"
                                           Click="btnSaveUser_Click"/>
                    </Grid>
                </DataTemplate>
            </telerik:RadGridView.RowDetailsTemplate>
        </telerik:RadGridView>
    </Grid>

[Stefan Nenchev]

Hello Alexander,

Indeed, setting the RowDetailsVisibilityMode to VisibleWhenSelected is not working as expected in this particular scenario. Actually, I came across another approach that you can use while testing the behavior. Can you add a GridViewToggleRowDetailsColumn for your RadGridView with the following setup:

<telerik:GridViewToggleRowDetailsColumn ExpandMode="Single" IsVisible="False" />

Instead of setting the RowDetailsVisibilityMode, you can expand the selected row in the SelectionChanged event:

private void clubsGrid_SelectionChanged(object sender, SelectionChangeEventArgs e)
      {
          clubsGrid.GetRowForItem(clubsGrid.SelectedItem).DetailsVisibility = Visibility.Visible;
      }

I have modified the sample project for your reference. Please review it and check if such approach would work in your case.

Regards,
Stefan Nenchev
Telerik

[Alexander]

Works perfectly, thanks so much :)

[Alexander]

Hi,

I need to use the solution in this Thread in a other allication but I can't get it to work...

The problem is when I add a new Row at runtime, the newly added item doesn't get's the CurrentItem of the GridView. Previously I had to change the DispatcherPriority of the CommitEdit() and Rebind() Action to Send. Otherwise the GetRowForItem() method has returned null. Maybe that is the problem? How to workaround? What can I do?

Here is my edited code:

public void gvMasterData_AddingNewDataItem(object sender, Telerik.Windows.Controls.GridView.GridViewAddingNewEventArgs e)
{
    if (currentDetailDataContext == null || currentDetailDataContext.Saved)
    {
        var item = new Item();
        item.NewItem = System.Windows.Visibility.Visible;
        item.Id = -1;
        e.NewObject = item;

        Dispatcher.BeginInvoke((Action)(() =>
        {
            (sender as RadGridView).CommitEdit();
            (sender as RadGridView).Rebind();
        }), DispatcherPriority.Send);

        Dispatcher.BeginInvoke((Action)(() =>
        {
            var row = gvMasterData.GetRowForItem(item);
            row.DetailsVisibility = Visibility.Visible;
        }), DispatcherPriority.Background);

        Dispatcher.BeginInvoke((Action)(() =>
        {
            var row = gvMasterData.GetRowForItem(item);
            row.ChildrenOfType<RadWatermarkTextBox>().FirstOrDefault().Focus();
        }), DispatcherPriority.Background);

        if (btnSaveItem != null)
        {
            btnSaveItem.IsEnabled = true;
        }
    }
    else
    {
        e.Cancel = true;
        gvMasterData.SelectedItem = gvMasterData.Items[gvMasterData.Items.Count - 1];
    }
}

 

public void gvMasterData_RowDetailsVisibilityChanged(object sender, Telerik.Windows.Controls.GridView.GridViewRowDetailsEventArgs e)
{
    if (e.Visibility == Visibility.Visible)
    {
        currentDetailDataContext = e.DetailsElement.DataContext as Item;
        if (lastExpandedRow != null && lastExpandedRow != e.Row)
        {
            gvMasterData.RowDetailsVisibilityChanged -= gvMasterData_RowDetailsVisibilityChanged;
            lastExpandedRow.DetailsVisibility = Visibility.Collapsed;
            gvMasterData.RowDetailsVisibilityChanged += gvMasterData_RowDetailsVisibilityChanged;
        }
        lastExpandedRow = e.Row;
    }
}

[Stefan Nenchev]

Hi Alexander,

As it is hard for me to provide you with an exact answer with only this information given from your side,
would it be possible to provide a sample project so I can have a more detailed look and advise you appropriately? You can raise a ticket as project attachments are not available in the forum.

Have a great weekend.

Regards,
Stefan Nenchev
Telerik by Progress

[Alexander]

Hi,

because of confidential data and a complex ViewModel it's not that easy for me to provide you with a sample project but I have attached a screenshot with a example. On it you can see that the pointer for the CurrentItem keeps pointing on the first Item after I have added a new Item with a click on the "Add new Item" row. Do you have any ideas?

[Alexander]

Sorry, here is the Screenshot.

[Stefan Nenchev]

Hi Alexander,

This is the border indicating that this is the current cell. You can edit the control template of the GridViewCell and remove it from the parent grid. Would this work for you? Check the attached sample.

Regards,
Stefan Nenchev
Telerik by Progress

[Alexander]

Hi Stefan,

thanks for your reply. I can't get your example to work in my project. The ErrorMessage is 'The resource "GridViewCellStyle" couldn't get resolved. What could be the problem here?

[Stefan]

Hi Alexander,

This would be an expected behavior if you are using the standard binaries of our components. The BasedOn property needs to be set when the NoXAML binaries with implicit styles are used. So, you can simply remove it. Please take a look at the Implicit Styles topic for more information on the matter.

Regards,
Stefan X1
Telerik by Progress