Using SfTextBoxExt as Datagrid Column?

Hi,

I need Autocompletion in one column of my DataGrid. Tried to implement a SfTextBoxExt using an EditTemplate, but it doesn't work.

The same works ok, if i am using it outside the grid.

Project attached. Any ideas?

thanks,

Helmut


Attachment: DataGridAutoComplete_3aebef82.zip

2 Replies 1 reply marked as answer

DM Dhanasekar Mohanraj Syncfusion Team April 4, 2023 01:32 PM UTC

Hi Helmut Wahrmann,

You can achieve your requirement to “Implement a SfTextBoxExt using an EditTemplate to achieve the AutoComplete option” will be achievable by using the PreviewTextInput event of the SfTextBox as shown below,

XAML:

<syncfusion:GridTemplateColumn HeaderText="Ch Auto" MappingName="ChangedItem">

    <syncfusion:GridTemplateColumn.CellTemplate>

        <DataTemplate>

            <TextBlock Text="{Binding ChangedItem}" />

        </DataTemplate>

    </syncfusion:GridTemplateColumn.CellTemplate>

    <syncfusion:GridTemplateColumn.EditTemplate>

        <DataTemplate>

            <syncfusion:SfTextBoxExt   Name="ChangedItemAto"

                           Text="{Binding ChangedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

                           AutoCompleteSource="{Binding AutoCompleteArtists, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

                           SuggestionMode="Contains"

                           SuggestionBoxPlacement="Bottom"

                           syncfusion:FocusManagerHelper.FocusedElement="True"

                           PreviewTextInput="ChangedItemAto_PreviewTextInput"

                           SelectedItem="{Binding ChangedItem}"

                           MinimumPrefixCharacters="3"

                           AutoCompleteMode="Suggest">

            </syncfusion:SfTextBoxExt>

        </DataTemplate>

    </syncfusion:GridTemplateColumn.EditTemplate>

</syncfusion:GridTemplateColumn>


XAML.cs

private void ChangedItemAto_PreviewTextInput(object sender, TextCompositionEventArgs e)

{

    // Get the filter text from the textbox

    var autoComplete = (SfTextBoxExt)sender;

    var filter = e.Text.Trim();

 

    // Get and set the list of matched values from the underlying property

    if (!string.IsNullOrEmpty(filter))

    {

        var suggestionlist = GetProductsByFilter(filter);

        autoComplete.AutoCompleteSource = suggestionlist;

    }

}

 

private List<string> GetProductsByFilter(string filter)

{

    // Get the list of matched values from the underlying property

    var list = (this.DataContext as ViewModel).AutoCompleteArtists.Where(x => x.ToString().ToLower().Contains(filter.ToLower())).Take(2).ToList();

    return list;

}


Here we have attached the modified sample for your reference please have a look at this.

Regards,

Dhanasekar M.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Attachment: DataGridAutoComplete_743d103d.zip

Marked as answer

HW Helmut Wahrmann April 4, 2023 03:08 PM UTC

Works perfect. thanks for your quick reply


Loader.
Up arrow icon