HowTo set focus to RowDetails Control when new Row is added

11 posts, 1 answers
  1. Alexander
    Alexander avatar
    19 posts
    Member since:
    Aug 2014

    Posted 26 Apr Link to this post

    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

  2. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    277 posts

    Posted 27 Apr Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Alexander
    Alexander avatar
    19 posts
    Member since:
    Aug 2014

    Posted 29 Apr in reply to Stefan Nenchev Link to this post

    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.

  5. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    277 posts

    Posted 29 Apr Link to this post

    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.
  6. Alexander
    Alexander avatar
    19 posts
    Member since:
    Aug 2014

    Posted 09 May Link to this post

    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

  7. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    277 posts

    Posted 09 May Link to this post

    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.
  8. Alexander
    Alexander avatar
    19 posts
    Member since:
    Aug 2014

    Posted 10 May Link to this post

    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>

  9. Answer
    Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    277 posts

    Posted 11 May Link to this post

    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.
  10. Alexander
    Alexander avatar
    19 posts
    Member since:
    Aug 2014

    Posted 13 May Link to this post

    Works perfectly, thanks so much :)
  11. Alexander
    Alexander avatar
    19 posts
    Member since:
    Aug 2014

    Posted 4 days and 1 hour ago Link to this post

    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;
        }
    }
  12. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    277 posts

    Posted 1 day and 6 hours ago Link to this post

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready