Custom Autocomplete on Editor

[Marco]

Hello Telerik

I would like to have an editor in a GridView for selecting one business object (DataBase Key, Name, Code (like an EAN CODE) in a collection. As The name is also considered to be an unique Key, the editor is based on a textbox which display the name of a product. The textbox should have a autocomplete feature (suggest with a dropdown) but the suggestion should be based on the whole list of product filtered by the Name or the Code.

The editor is valid only if the text is matching a product name (return the matching DataBase key for the binding) or is empty (return a nullvalue for binding).

What is the best way to reach this objectif ? Should I start from a RadDropDownListEditor, a RadTextBoxControlEditor, a RadTextBoxEditor ?

Thanks for your support

[Dess | Tech Support Engineer, Principal]

Hello Marco,

Thank you for writing. 

RadGridView provides different columns types one of which is GridViewComboBoxColumn. It displays a set of predefined candidate text values in a drop down list and it is typically used to provide a lookup into some set of relatively static values. GridViewComboBoxColumn provides flexible auto-completion options that suggest and append text from choices in the list as the user types. It can be controlled by the GridViewComboBoxColumn.AutoCompleteMode property.

I hope this information helps. Should you have further questions I would be glad to help.

Regards,
Dess
Telerik

[Marco]

Hello Dess,

Thank you for answering.

I have made a custom GridViewComboBoxColum and a Custom AutoCompleteSuggestHelper according the documentation you linked.

 

Friend Class GridViewInstrumentColumn
    Inherits GridViewComboBoxColumn

    Public Overrides Sub InitializeEditor(editor As Telerik.WinControls.UI.IInputEditor)
        MyBase.InitializeEditor(editor)
        Dim AutocompleteEditor = TryCast(editor, RadDropDownListEditor)
        If AutocompleteEditor IsNot Nothing Then
            Dim editorElement As RadDropDownListEditorElement = TryCast(AutocompleteEditor.EditorElement, RadDropDownListEditorElement)
            editorElement.AutoCompleteDataSource = Me.DataSource
            editorElement.AutoCompleteDisplayMember = "Name"
            editorElement.AutoCompleteMode = AutoCompleteMode.Suggest
            editorElement.AutoCompleteSuggest = New InstrumentAutoCompleteSuggestHelper(editorElement)
        End If
    End Sub

    Private Class InstrumentAutoCompleteSuggestHelper
        Inherits AutoCompleteSuggestHelper

        Public Sub New(owner As RadDropDownListElement)
            MyBase.New(owner)
        End Sub

        Protected Overrides Function DefaultFilter(item As Telerik.WinControls.UI.RadListDataItem) As Boolean
            Dim data As CastorModel.Instrument = TryCast(item.DataBoundItem, CastorModel.Instrument)

            If data IsNot Nothing Then
                Return (Not IsNothing(data.Name) AndAlso data.Name.IndexOf(Me.Filter, StringComparison.CurrentCultureIgnoreCase) > -1) OrElse
                    (Not IsNothing(data.Bloomberg_Ticker) AndAlso data.Bloomberg_Ticker.IndexOf(Me.Filter, StringComparison.CurrentCultureIgnoreCase) > -1) OrElse
                    (Not IsNothing(data.ISIN) AndAlso data.ISIN.IndexOf(Me.Filter, StringComparison.CurrentCultureIgnoreCase) > -1)
            Else
                Return MyBase.DefaultFilter(item)
            End If
        End Function
    End Class
End Class

 

It's look the suggestion are well filtred but I have some strange behavior on the editor. The text is mixed with a value of the datasource and my typing.

Any idea how to avoid this ?

 

[Dess | Tech Support Engineer, Principal]

Hello Marco,

Thank you for writing back. 

I have succeeded to replicate the text mixing when typing. However, note that it is redundant to set the DataSource of the RadDropDownListEditorElement because it is already set to the column. When I initialize the custom column like below, the text seems to behave as expected:

Sub New()

    InitializeComponent()

    Dim comboCol As New GridViewInstrumentColumn()
    comboCol.DataSource = Me.CategoriesBindingSource
    comboCol.DisplayMember = "CategoryName"
    comboCol.ValueMember = "CategoryID"
    comboCol.DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDown
    comboCol.AutoCompleteMode = AutoCompleteMode.Suggest
    comboCol.FieldName = "CategoryID"
    comboCol.MinWidth = 300
    Me.RadGridView1.Columns.Add(comboCol)

    Me.RadGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill
End Sub

Friend Class GridViewInstrumentColumn
Inherits GridViewComboBoxColumn
    Public Overrides Sub InitializeEditor(editor As Telerik.WinControls.UI.IInputEditor)
        MyBase.InitializeEditor(editor)
        Dim AutocompleteEditor = TryCast(editor, RadDropDownListEditor)
        If AutocompleteEditor IsNot Nothing Then
            Dim editorElement As RadDropDownListEditorElement = TryCast(AutocompleteEditor.EditorElement, RadDropDownListEditorElement)
            editorElement.AutoCompleteSuggest = New InstrumentAutoCompleteSuggestHelper(editorElement)
        End If
    End Sub

    Private Class InstrumentAutoCompleteSuggestHelper
    Inherits AutoCompleteSuggestHelper
        Public Sub New(owner As RadDropDownListElement)
            MyBase.New(owner)
        End Sub
        Protected Overrides Function DefaultFilter(item As Telerik.WinControls.UI.RadListDataItem) As Boolean
            Dim data As DataRowView = TryCast(item.DataBoundItem, DataRowView)
            If data IsNot Nothing Then
                Return (Not IsNothing(data.Row("CategoryName")) AndAlso _
                data.Row("CategoryName").IndexOf(Me.Filter, StringComparison.CurrentCultureIgnoreCase) > -1)
            Else
                Return MyBase.DefaultFilter(item)
            End If
        End Function
    End Class
End Class

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik

[Marco]

Hello Dess,

When I remove the datasource on the editorElement, the item in the RadListDataItem parameter in the DefaultFilter is not bound anymore. Then I can only access and process the custom filter with the text value. Are you sure that in your sample you don't go on MyBase.DefaultFilter(item) ?

[Dess | Tech Support Engineer, Principal]

Hello Marco,

Thank you for writing back. 

Indeed, in this case, the RadListDataItem is not bound. I have modified the code snippet in a way to access the data source and find the relevant record for the filter functionality without binding the autocomplete items:

Sub New()
    InitializeComponent()
    Dim comboCol As New GridViewInstrumentColumn()
    comboCol.DataSource = Me.CategoriesBindingSource
    comboCol.DisplayMember = "CategoryName"
    comboCol.ValueMember = "CategoryID"
    comboCol.DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDown
    comboCol.AutoCompleteMode = AutoCompleteMode.Suggest
    comboCol.FieldName = "CategoryID"
    comboCol.MinWidth = 300
    Me.RadGridView1.Columns.Add(comboCol)
    Me.RadGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill
    AddHandler Me.RadGridView1.CellEditorInitialized, AddressOf CellEditorInitialized
End Sub

Private Sub CellEditorInitialized(sender As Object, e As GridViewCellEventArgs)
    Dim AutocompleteEditor = TryCast(e.ActiveEditor, RadDropDownListEditor)
    If AutocompleteEditor IsNot Nothing Then
        Dim editorElement As RadDropDownListEditorElement = TryCast(AutocompleteEditor.EditorElement, RadDropDownListEditorElement)
        editorElement.AutoCompleteMode = AutoCompleteMode.Suggest
        editorElement.AutoCompleteSuggest = New InstrumentAutoCompleteSuggestHelper(editorElement, Me.CategoriesBindingSource)
    End If
End Sub

Private Class InstrumentAutoCompleteSuggestHelper
Inherits AutoCompleteSuggestHelper
    Dim ds As DataSet
    Public Sub New(owner As RadDropDownListElement, dataSource As BindingSource)
        MyBase.New(owner)
        ds = dataSource.DataSource
    End Sub
    Protected Overrides Function DefaultFilter(item As Telerik.WinControls.UI.RadListDataItem) As Boolean
        Dim data As DataRow = Nothing
        For Each row As DataRow In ds.Tables(0).Rows
            If row(Me.Owner.ValueMember) = item.Value Then
                data = row
            End If
        Next
        If data IsNot Nothing Then
            Return (Not IsNothing(data("CategoryName")) AndAlso _
            data("CategoryName").IndexOf(Me.Filter, StringComparison.CurrentCultureIgnoreCase) > -1)
        Else
            Return MyBase.DefaultFilter(item)
        End If
    End Function
End Class

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik

[Marco]

Hello Dess

Coming back from holiday. Adding a reference to the datasource and searching the full object from the value member is working fine.

I hope that the extra load for searching the full object won't become a performance issue when the combobox datasource with the "real list" instead of my 10 test items.

Thank you very much for all your support

Marco