unable to set focus on textbox using button mvvm

1 Answer 3337 Views

Buttons RichTextBox

Patrick asked on 08 Oct 2021, 06:04 PM

JobNotes.png

Hi, I'm trying to set focus on a textbox in a grid with a 'New' button click. the button has style setter to enable the text box on click, but i cannot get the textbox to get focus. best i can get is the cursor frozen in the textbox, requiring user to hit tab or enter. All my searching is saying there's a bug that will be fixed - years ago. I'm running the current version 2021.R3

trying the focusmanager does nothing. Here is the code:

<UserControl x:Class="Arc2.App.Views.JobNoteVw"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Arc2.App.Views"
xmlns:Utils="clr-namespace:Arc2.App.Controls"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="560">
<Grid>
<Grid.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsNew}" Value="True">
<Setter Property="FocusManager.FocusedElement" Value="{Binding ElementName=txNote}"/>
</DataTrigger>
</Style.Triggers>
</Style>

</Grid.Style>
<Grid.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="1" Color="CadetBlue"/>
</LinearGradientBrush>
</Grid.Background>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="155"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="155"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition Height="32"/>
<RowDefinition Height="35"/>
<RowDefinition Height="*"/>
<RowDefinition Height="35"/>
<RowDefinition Height="35"/>
<RowDefinition Height="4"/>
<RowDefinition Height="35"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>

<TextBlock Text="WO Number:" Margin="10,0,10,5" VerticalAlignment="Bottom" TextAlignment="Right" Height="16" />
<TextBlock Text="Job Number:" Margin="10,0,10,5" Grid.Row="1" VerticalAlignment="Bottom" TextAlignment="Right" Height="16" />
<TextBlock x:Name="txtWo" Text="{Binding SelJob.TrackingNumber, Mode=OneWay}" Grid.Column="1" IsEnabled="False"
HorizontalAlignment="Stretch" Margin="5,0,5,5" VerticalAlignment="Bottom" Foreground="DarkGreen" Height="16" />
<TextBlock x:Name="txtJob" Text="{Binding SelJob.JobNumber, Mode=OneWay}" Grid.Row="1" Grid.Column="1" IsEnabled="False"
HorizontalAlignment="Stretch" Margin="5,0,5,5" VerticalAlignment="Bottom" Foreground="DarkGreen" Height="16" />

<TextBlock Text="Job Description:" Grid.Row="2" Margin="10,5,10,0" TextAlignment="Right"/>
<TextBox x:Name="txtJobDesc" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3"
Text="{Binding SelJob.JobDescription, Mode=OneWay}" IsEnabled="False"
Margin="5" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" TabIndex="1" IsTabStop="True"/>


<TextBlock Text="Note:" Grid.Row="3" Margin="10,5,10,0" TextAlignment="Right"/>

<Grid x:Name="d1" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3"
VerticalAlignment="Stretch"
FocusManager.FocusedElement="{Binding ElementName=TxNote}">
<Grid.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding HasRows}" Value="False">
<Setter Property="Grid.IsEnabled" Value="False"/>
</DataTrigger>
<DataTrigger Binding="{Binding HasRows}" Value="True">
<Setter Property="Grid.IsEnabled" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<TextBox x:Name="TxNote" Text="{Binding TmpJobNote.Note}" VerticalAlignment="Stretch"
Margin="5,3" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap"
IsTabStop="False" KeyboardNavigation.IsTabStop="False">
<TextBox.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEdit}" Value="True">
<Setter Property="TextBox.IsEnabled" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsEdit}" Value="False">
<Setter Property="TextBox.IsEnabled" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</Grid>

<TextBlock Text="Effective Date:"
Grid.Row="4" VerticalAlignment="Center"
Margin="10,9,10,10" TextAlignment="Right" Height="16" />
<telerik:RadDatePicker x:Name="d3"
Grid.Row="4" Grid.Column="1" VerticalAlignment="Center"
SelectedValue="{Binding TmpJobNote.TimeStamp}"
DateTimeWatermarkContent="Select Date..."
TodayButtonVisibility="Visible"
Margin="5,1" HorizontalAlignment="Stretch" Height="22">
<telerik:RadDatePicker.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding HasRows}" Value="False">
<Setter Property="telerik:RadDatePicker.IsEnabled" Value="False"/>
</DataTrigger>
<DataTrigger Binding="{Binding HasRows}" Value="True">
<Setter Property="telerik:RadDatePicker.IsEnabled" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsEdit}" Value="True">
<Setter Property="telerik:RadDatePicker.IsEnabled" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsEdit}" Value="False">
<Setter Property="telerik:RadDatePicker.IsEnabled" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</telerik:RadDatePicker.Style>
</telerik:RadDatePicker>
<TextBlock Text="Author:" Margin="10,7" Grid.Row="4" Grid.Column="2" VerticalAlignment="Center" TextAlignment="Right" Height="16" />

<TextBox x:Name="txtAuthor" Text="{Binding AuthorNm}" Grid.Row="4" Grid.Column="3"
Margin="5" HorizontalAlignment="Stretch" IsReadOnly="True">
<TextBox.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEdit}" Value="True">
<Setter Property="TextBox.IsEnabled" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsEdit}" Value="False">
<Setter Property="TextBox.IsEnabled" Value="False"/>
</DataTrigger>

</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>


<TextBlock Text="Date Added:" Grid.Row="5" Margin="0,9,10,10" HorizontalAlignment="Right" VerticalAlignment="Center" Height="16" Width="66" />
<TextBox x:Name="txtDtAdd" Text="{Binding TmpJobNote.DateAdded}"
Grid.Column="1" Grid.Row="5" Margin="5,5" IsReadOnly="True" IsTabStop="False" />
<TextBlock Text="Date Updated:" Margin="5,9,5,10"
Grid.Row="5" Grid.Column="2" VerticalAlignment="Center" TextAlignment="Right" Height="16" />
<TextBox x:Name="txtDtUpdate" Text="{Binding TmpJobNote.DateUpdated}"
Grid.Row="5" Grid.Column="3"
Margin="5,5" IsReadOnly="True" IsTabStop="False" />

<StackPanel Orientation="Horizontal" Grid.Row="7" Grid.ColumnSpan="4" HorizontalAlignment="Center" Margin="8,0" Width="544">
<Button Content="New" Margin="15,2" Width="70" FontWeight="Bold"
Command="{Binding NewCommand}">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsNew}" Value="True">
<Setter Property="Button.IsEnabled" Value="False"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsNew}" Value="False">
<Setter Property="Button.IsEnabled" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsEdit}" Value="True">
<Setter Property="Button.IsEnabled" Value="False"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsEdit}" Value="False">
<Setter Property="Button.IsEnabled" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button Content="Save" Margin="15,2" Width="70" FontWeight="Bold"
Command="{Binding SaveCommand}">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEdit}" Value="True">
<Setter Property="Button.IsEnabled" Value="True" />
</DataTrigger>
<DataTrigger Binding="{Binding IsEdit}" Value="False">
<Setter Property="Button.IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button Content="Edit" Margin="15,2" Width="70" FontWeight="Bold"
Command="{Binding EditCommand}">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEdit}" Value="True">
<Setter Property="Button.IsEnabled" Value="False"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsEdit}" Value="False">
<Setter Property="Button.IsEnabled" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding HasRows}" Value="False">
<Setter Property="Button.IsEnabled" Value="False"/>
</DataTrigger>
<DataTrigger Binding="{Binding HasRows}" Value="True">
<Setter Property="Button.IsEnabled" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button Content="Cancel" Margin="15,2" Width="70" FontWeight="Bold"
Command="{Binding CancelCommand}">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEdit}" Value="True">
<Setter Property="Button.Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsEdit}" Value="False">
<Setter Property="Button.Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button Content="Delete" Margin="65,2,10,2" Width="70" FontWeight="Bold"
Command="{Binding DeleteCommand}">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsNew}" Value="True">
<Setter Property="Button.IsEnabled" Value="False"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsNew}" Value="False">
<Setter Property="Button.IsEnabled" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>


<telerik:RadGridView HorizontalAlignment="Stretch"
x:Name="gvJobNote"
Margin="5,5,5,0"
Grid.Row="8"
Grid.ColumnSpan="4"
VerticalAlignment="Top"
EnableLostFocusSelectedState="False"
RowIndicatorVisibility="Collapsed"
AutoGenerateColumns="False"
AlternationCount="2"
IsReadOnly="True"
ItemsSource="{Binding JobNoteList}"
SelectedItem="{Binding SelJobNote}"
AlternateRowBackground="#FFB4D2D3">
<i:Interaction.Behaviors>
<Utils:GridViewScrollIntoView/>
</i:Interaction.Behaviors>
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn Header="Eff Dt" DataMemberBinding="{Binding TimeStamp}" DataFormatString="{} {0:MM/dd/yyyy}" HeaderTextAlignment="Center" Width="85" TextAlignment="Center" />
<telerik:GridViewDataColumn Header="Note" DataMemberBinding="{Binding Note}" TextAlignment="Left" Width="*" HeaderTextAlignment="Center" />
<telerik:GridViewDataColumn Header="Author" DataMemberBinding="{Binding Author}" HeaderTextAlignment="Center" Width="90" />
<telerik:GridViewDataColumn Header="Added" DataMemberBinding="{Binding DateAdded}" HeaderTextAlignment="Center" Width="140" TextAlignment="Right" />
<telerik:GridViewDataColumn Header="Updated" DataMemberBinding="{Binding DateUpdated}" Width="140" HeaderTextAlignment="Center" />
</telerik:RadGridView.Columns>

</telerik:RadGridView>

</Grid>
</UserControl>

1 Answer, 1 is accepted

0

answered on 13 Oct 2021, 12:37 PM

SetFocusTextBoxSampleProject.zip

Hi Patrick,

Thank you for the provided information.

I was able to reproduce this behavior on my end as well. In order to change it, instead of setting the focus manager on the grid element, you could set it in the TextBox control style with an additional Setter. When the IsEdit property is set to True, the control will be enabled and it will also get the focus. The following code snippet shows what I mean:

<DataTrigger Binding="{Binding IsEdit}" Value="True">
    <Setter Property="TextBox.IsEnabled"  Value="True"/>
    <Setter Property="FocusManager.FocusedElement" Value="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
</DataTrigger>

That said, I have attached a sample project implementing this approach, so, could you give it a try and let me know how it goes?

Regards,
Stenly
Progress Telerik

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.

Patrick

commented on 13 Oct 2021, 02:50 PM

Your solution works when there is already a comment in the system and you 'Edit' the existing comment. However, when selecting a 'New' comment, it is still frozen. I added a setter for the 'IsNew' flag, and it makes no difference. So your solution only partially works, but thank you for that - it is a step in the right direction. I'll look at your sample to see if I'm missing something.

Stenly

commented on 18 Oct 2021, 09:55 AM

ProjectResultVideo.zip

I have tested the project, but I was not able to observe the mentioned behavior. When the New button is clicked, the TextBox control takes focus with or without text inside of it. I have attached a video showcasing this. In addition, if the issue still persists, could you isolate it in a sample project, so I can look at it on my end?

Tags

Buttons RichTextBox

Asked by

Answers by