We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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