This is a migrated thread and some comments may be shown as answers.

HowTo set focus to RowDetails Control when new Row is added

15 Answers 606 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Alexander
Top achievements
Rank 1
Alexander asked on 26 Apr 2016, 09:07 AM

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

15 Answers, 1 is accepted

Sort by
0
Stefan Nenchev
Telerik team
answered on 27 Apr 2016, 12:49 PM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Alexander
Top achievements
Rank 1
answered on 29 Apr 2016, 08:23 AM

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.

0
Stefan Nenchev
Telerik team
answered on 29 Apr 2016, 12:05 PM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Alexander
Top achievements
Rank 1
answered on 09 May 2016, 12:25 PM

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

0
Stefan Nenchev
Telerik team
answered on 09 May 2016, 02:24 PM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Alexander
Top achievements
Rank 1
answered on 10 May 2016, 06:39 AM

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>

0
Accepted
Stefan Nenchev
Telerik team
answered on 11 May 2016, 12:21 PM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Alexander
Top achievements
Rank 1
answered on 13 May 2016, 09:17 AM
Works perfectly, thanks so much :)
0
Alexander
Top achievements
Rank 1
answered on 29 Nov 2016, 01:13 PM

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;
    }
}
0
Stefan Nenchev
Telerik team
answered on 02 Dec 2016, 07:42 AM
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
Telerik UI for WPF is ready for Visual Studio 2017 RC! Learn more.
0
Alexander
Top achievements
Rank 1
answered on 08 Dec 2016, 02:14 PM

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?

0
Alexander
Top achievements
Rank 1
answered on 08 Dec 2016, 02:15 PM
Sorry, here is the Screenshot.
0
Stefan Nenchev
Telerik team
answered on 09 Dec 2016, 02:04 PM
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
Telerik UI for WPF is ready for Visual Studio 2017 RC! Learn more.
0
Alexander
Top achievements
Rank 1
answered on 12 Dec 2016, 09:27 AM

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?

0
Stefan
Telerik team
answered on 14 Dec 2016, 01:12 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
GridView
Asked by
Alexander
Top achievements
Rank 1
Answers by
Stefan Nenchev
Telerik team
Alexander
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or