TextChangedEvent and Focus Event not Fired

[Vuyiswa]

Good Day 

i have managed to customize the radchat and now i am using control template .  and in the control tamplate i have an ChatEntry for some reason the textchanged event and focus event dont get fired. 

 

            <ControlTemplate x:Key="RadChat_ControlTemplate"><br>                <Grid telerikInput:KeyboardHelper.IsTranslationTarget="True"<br>            RowSpacing="2"><br>                    <Grid.RowDefinitions><br>                        <RowDefinition /><br>                        <RowDefinition Height="Auto" /><br>                        <RowDefinition Height="Auto" /><br>                    </Grid.RowDefinitions><br>                    <Image HorizontalOptions="FillAndExpand" x:Name="ctr1" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="chat_background.png"   /><br><br>                    <telerikConversationalUI:ChatListView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"<br>                                                AutoScrollMode="{TemplateBinding AutoScrollMode}"<br>                                                ScrollMediator="{TemplateBinding ActualScrollMediator}"<br>                                                Margin="{Binding Height, Source={x:Reference PickerContainer}, Converter={StaticResource ChatListViewMarginConverter}}"<br>                                                ItemTemplate="{TemplateBinding ItemTemplateSelector}" <br>                                                ItemsSource="{TemplateBinding Items}"<br>                                                AutomationProperties.Name="ChatListView" /><br>                    <telerikCommon:RadContentView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"<br>                                        Grid.Row="1"<br>                                        Content="{TemplateBinding TypingIndicator}" /><br>                    <telerikCommon:RadContentView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"<br>                                        x:Name="PickerContainer"<br>                                        VerticalOptions="End"<br>                                        Content="{TemplateBinding Picker}" /><br>                    <Grid Grid.Row="2" BackgroundColor="{TemplateBinding InputAreaBackgroundColor}" Padding="5, 0, 0, 0"><br>                        <Grid.ColumnDefinitions><br>                            <ColumnDefinition /><br>                            <ColumnDefinition Width="Auto" /><br>                        </Grid.ColumnDefinitions><br>                        <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand"><br>                            <telerikConversationalUI:ChatEntry telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"<br>                                                Text="{TemplateBinding Message, Mode=TwoWay}"<br>                                                BackgroundColor="Transparent"  WidthRequest="270"<br>                                                VerticalOptions="Center" Keyboard="Chat"<br>                                                CompletedCommand="{TemplateBinding ActualSendMessageCommand}"<br>                                                FocusMediator="{TemplateBinding FocusMediator}"<br>                                                telerikInput:KeyboardHelper.IsTranslationSource="True" /><br>             <br>                            <telerikInput:RadButton x:Name="btnattach"  <br>                                        ImageSource="attach_final.png"<br>                                      <br>                                                Clicked="btnattach_Clicked"<br>                                telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"<br>                                        Grid.Column="1"<br>                                        Margin="0, 0, 10, 0"<br>                                        BackgroundImage="{TemplateBinding SendMessageButtonImage}"<br>                                        BackgroundColor="Transparent" <br>                                        WidthRequest="30"<br>                                        HeightRequest="30"<br>                                        VerticalOptions="Center"<br>                                       /><br><br>                            <telerikInput:RadButton x:Name="btnsend"  <br>                                        ImageSource="send_final.png" <br>                                telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"<br>                                        Grid.Column="1"<br>                                        Margin="0, 0, 10, 0" <br>                                        BackgroundImage="{TemplateBinding SendMessageButtonImage}"<br>                                        BackgroundColor="Transparent" <br>                                        WidthRequest="30"<br>                                        HeightRequest="30"<br>                                        VerticalOptions="Center"<br>                                   Clicked="chat_send"<br>                                       /><br>                        </StackLayout><br>                    </Grid><br>                </Grid><br>            </ControlTemplate>

 

<p>private void Txtchatmessage_TextChanged(object sender, TextChangedEventArgs e)<br>        {</p><p>}</p>

[Lance | Manager Technical Support]

Hello Vuyiswa,

The TextChanged event is working as expected. In your ControlTemplate example, I don't see you subscribing to the TextChanged event at all.

Generally speaking, you need to be careful when using a ControlTemplate. It is not the same thing as using XAML on a normal ContentPage. You will want to either build a custom control or escape the instance's context with a custom binding (i.e. RelativeSource).

Custom Control Example

If you're looking to get the events of the entry in order to show "X user is typing", take a look at my custom control demo https://github.com/LanceMcCarthy/CustomXamarinDemos#signalr-and-conversationalui 

The demo passes the "X user is currently typing" event to the SignalR server and all other conversation participant's "current typers" collection is updated in real time.

Take a close look at the custom TimedChatEntry control, this is where the ChatEntry.TextChanged event is wired up.

Further Assistance with Custom & Extended Controls

If you are editing/changing any ControlTemplate or implement a custom platformer renderer that does the same, this alters the behavior of the control that we shipped. This specific instance is now a Custom Control and is no longer covered by Telerik Technical Support (see scope of support for more details).

However, I will make an exception if you take the following steps:

1. Create an isolated reproducible project (with the custom control implementation)
2. Open a Technical Support Ticket
3. Attach the custom control's project, explain the problem and share a link to this forum thread.
   

If you are unable to renew your Telerik license, or get assigned as the Licensed USer (which we have discussed in this forum post), so that you can open a Ticket, you can also contact the Professional Services - Custom Feature team. They will build/fix the custom control for you.

Regards,
Lance | Manager - Technical Support
Progress Telerik

[Vuyiswa]

Good Day Admin 

Thanks for the response. the issue is now resolved , the issue i had two template controls both if them subscribed to text change from the xam , iam not using MVVM. so i was using the wrong one. i deleted one that i was not using and tested it and it worked. 

I had a look at TimedChatEntry Custom control , its nice an easy to use. i used it and hook it up with SignalR and it works wonders thanks. 

One think i noticed in the "Typing indicator 

             <telerikConversationalUI:RadChat.TypingIndicator>
                    <telerikConversationalUI:TypingIndicator x:Name="typingIndicator" BackgroundColor="Transparent" TextColor="Black"  />
                </telerikConversationalUI:RadChat.TypingIndicator>

 

How can i customize it , i dont want it to show a head (icon) of the person typing, The name and the word "User is typing" is enough for me. i also want to make the background to be transparent and be as the chat window. 

 

Thanks 

[Lance | Manager Technical Support]

Hi,

Take a look at the documentation for Typing Participants, you'll see the Author model has an Avatar property.  When you set the Avatar property of the Author model with a valid image, it will be shown next to the text.

Take a look at the ChatRoom Example demo for more guidance https://github.com/telerik/telerik-xamarin-forms-samples/tree/master/QSF/QSF/Examples/ConversationalUIControl/ChatRoomExample

Regards,
Lance | Manager - Technical Support
Progress Telerik