Unplanned
Last Updated: 15 May 2020 09:13 by ADMIN
Brandon
Created on: 05 May 2020 16:49
Category: Chat
Type: Feature Request
1
RadChat: add tagging functionality with Auto Complete list with authors
I'd like to know if it's possible to add Auto-Complete functionality to the Chat UI in WinForms.  I want to be able to tag a user in the chat message.  When I type the '@' symbol I want the auto-complete to start with a prepopulated list of users.
6 comments
ADMIN
Dess | Tech Support Engineer, Principal
Posted on: 15 May 2020 09:13
Hello, Brandon, 

According to the provided information, it is not clear what is the exact method implementation that you have in your method. I am glad that you have found a suitable solution for your case.

However, in order to focus the InputTextBox, the possible solution that I can suggest is to call the ChatElement.InputTextBox.Focus method. But it depends on the specific implementation that you have and whether some other control steals the focus. If you are still experiencing any further undesired behavior, it would be greatly appreciated if you can provide a sample project demonstrating the problem you are facing. Thus, we would be able to get better understanding of the precise case and think about a suitable solution. Thank you in advance for your cooperation.

If you need any further assistance please don't hesitate to contact me.  

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Brandon
Posted on: 11 May 2020 19:52
Hello.  I'd like to note that in the method I created, using the Tab key to accept the suggestion will remove focus from the Chat UI in some cases and I haven't found a way to send focus back to the Chat UI TextBox (not one that works anyway).  So with that being said, I swapped it to use Keys.Space to accept the suggested text.
ADMIN
Dess | Tech Support Engineer, Principal
Posted on: 07 May 2020 06:07

Hello, Brandon, 

Indeed, the autocomplete popup is displayed for the entire InputTextBox. Usually, for most of the RadControls you can manage the location of the autocomplete popup. However, in this particular case this is a popup coming from the standard MS TextBox which is hosted in the InputTextBox. Hence, we don't have control over it and its popup.

It seems to be a reasonable request to add tagging functionality and displaying a list with suggestions for the authors. 

I have logged it in our feedback portal by making this thread public on your behalf. You can track its progress, subscribe for status changes and add your comments on the following link - feedback item.

I have also updated your Telerik points

Thank you for sharing the achieved solution with the community. The illustrated append autocomplete behavior seems to work OK.

We will consider it when addressing this feature request.

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Brandon
Posted on: 06 May 2020 18:34

Okay.  Here's how I did it and maybe you can easily add this type of auto-complete to your control as it's very handy and I think a ton of people would enjoy it.

First of all, I didn't bother using a context menu.  I did the auto-complete using the Suggest method directly within the textbox itself.

 

In the form class I created a variable to capture when the backspace or delete key was pressed.

Private Msg_BackPressed As Boolean = False

 

Then in the form load I added the event handlers for the textbox

AddHandler txtWO_Msg.ChatElement.InputTextBox.TextBoxItem.TextBoxControl.TextChanged, AddressOf txtWO_Msg_TextBoxControl_TextChanged
AddHandler txtWO_Msg.ChatElement.InputTextBox.TextBoxItem.TextBoxControl.PreviewKeyDown, AddressOf txtWO_Msg_TextBoxControl_PreviewKeyDown

 

Lastly, here are the event handler functions that process the input and get the suggestion.

Private Sub txtWO_Msg_TextBoxControl_TextChanged(sender As Object, e As EventArgs)
    'Cancel if we pressed the backspace
    If Msg_BackPressed Then Msg_BackPressed = False : Exit Sub

    Dim t As TextBox = TryCast(sender, TextBox)

    If t IsNot Nothing Then

        If t.Text.Length > 0 AndAlso t.Text.Contains("@") Then

            'Here we'll get the text strictly after the @ symbol, wherever they are in the textbox
            Dim User As String = ""
            Dim TmpStr As String = Mid(t.Text, 1, t.SelectionStart)
            Dim Index As Integer = TmpStr.LastIndexOf("@")
            Dim CA As Char() = TmpStr.ToCharArray()
            For I As Integer = Index + 1 To CA.Length - 1
                If CA(I) = " " Then Exit Sub
                User &= CA(I)
            Next

            'If it's already typed out, don't bother auto-completing
            If Not GeneralAccountDataStrList.Contains(User) Then
                'Loop through the list of string and find one that resembles what we've typed so far
                For I As Integer = 0 To GeneralAccountDataStrList.Count - 1
                    If GeneralAccountDataStrList(I).Contains(User) And User.Length > 0 Then
                        'Here we get the portion of the string that will be added and highlighted
                        Dim TxtAdd As String = Replace(GeneralAccountDataStrList(I), User, "", 1, 1)
                        Dim Start As Integer = t.SelectionStart
                        'Insert the string at the current caret location
                        t.Text = t.Text.Insert(Start, TxtAdd)
                        t.SelectionStart = Start
                        'Make sure we select the suggested text so the user can easily replace/remove it
                        t.SelectionLength = TxtAdd.Length
                        Exit For
                    End If
                Next
            End If
        End If
    End If
End Sub

Private Sub txtWO_Msg_TextBoxControl_PreviewKeyDown(sender As Object, e As PreviewKeyDownEventArgs)
    Dim t As TextBox = TryCast(sender, TextBox)

    If t IsNot Nothing Then

        'If the user pressed Backspace or Delete, we need to cancel the suggestion algorithm
        Msg_BackPressed = e.KeyCode = Keys.Back Or e.KeyCode = Keys.Delete

        'If we pressed tab, accept the suggestion (Pressing enter just submits the entire message)
        If e.KeyCode = Keys.Tab Then
            If t.SelectionLength > 0 Then
                t.SelectionStart += t.SelectionLength
                t.SelectionLength = 0
            End If
        End If
            
    End If
End Sub

 

I've attached a video demonstration of it in action as well.

 

Attached Files:
Brandon
Posted on: 06 May 2020 15:50

Okay, so that works, but it applies to the entire textbox.  I need autocomplete to function from the caret position of the @ symbol.

 

So if I type.  "Hey Ed.  Can you explain more?  Maybe @Chris.Kapp can help."

I would expect the autocomplete to start from where I typed @, and not apply to the entire textbox, but rather the SelectionStart / Caret position.

 

Do you know of a way to accomplish this?

I can create a custom context menu at runtime and create my own Suggestion method for it.  As long as I can get the location of the ChatUI textbox on the screen to accurately position it.

 

I feel like this should already be a feature of a 'Chat' UI and Telerik should really consider adding it.  All social media messaging services offer tagging users in the message at any point in that message.

ADMIN
Dess | Tech Support Engineer, Principal
Posted on: 06 May 2020 12:37

Hello, Brandon, 

The ChatElement.InputTextBox internally uses the standard MS TextBox. In order to add autocomplete items to it, I would suggest you to follow the demonstrated approach in the following thread: https://stackoverflow.com/questions/1357853/autocomplete-textbox-control 

    Sub New() 
        InitializeComponent()

        Me.RadChat1.Author = New Author(My.Resources.bot, "Nancy")

        Me.RadChat1.ChatElement.InputTextBox.TextBoxItem.TextBoxControl.AutoCompleteMode = AutoCompleteMode.Suggest
        Me.RadChat1.ChatElement.InputTextBox.TextBoxItem.TextBoxControl.AutoCompleteSource = AutoCompleteSource.CustomSource

        AddHandler Me.RadChat1.ChatElement.InputTextBox.TextBoxItem.TextBoxControl.TextChanged, AddressOf TextBoxControl_TextChanged

    End Sub

    Private Sub TextBoxControl_TextChanged(sender As Object, e As EventArgs)
        Dim t As TextBox = TryCast(sender, TextBox)

        If t IsNot Nothing Then

            If t.Text.Length >= 1 AndAlso t.Text.StartsWith("@") Then

                Dim collection As AutoCompleteStringCollection = New AutoCompleteStringCollection()
                collection.Add("@Nancy")
                collection.Add("@John")
                Me.RadChat1.ChatElement.InputTextBox.TextBoxItem.TextBoxControl.AutoCompleteCustomSource = collection
            End If
        End If
    End Sub

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.