Use autofill in conjunction with composite custom filter

[Dietfrid Mali]

Right now, SfComboBox' autofill doesn't seem to work properly with custom filter queries which are filtering accross several data fields in the data source. See my ticket here: https://support.syncfusion.com/support/tickets/367803 

Unfortunately, the support given in that ticket so far seemed lacking. So I am asking here.

[Sureshkumar P]

Hi Dietfrid, 

 

We have updated the response for your requirement in the mentioned incident #367803. Please follow the incident for the further assistance. 

 

Regards, 

Sureshkumar P 

[Todd Konesky]

Hi,

I am experiencing the same issue with version 20.2.0.46. Is there any updated news, fix or workaround for this?

Thanks,

Todd

[Sureshkumar P]

Hi Todd,

Please explain your exact requirement for our component. In this ticket we have provided the custom sample based on the previous requirements and that custom requirement is not a bug from our end. so please share your exact requirement with any image or video demonstration, these details will help us to provide an exact solution as earlier as possible.

Regards,

Sureshkumar P

[Todd Konesky]

Hi,

I have attached a sample project that demonstrates the issue I'm having when implementing custom filtering and the Autofill functionality does not work.

When running the example, click on the ComboBox Filter link. It will take you to the combobox-filter page.

Hopefully this example is enough to explain and demonstrate the issue.

Thanks,
Todd

Attachment: ComboBoxFiltering_e601eb46.zip

[Sureshkumar P]

Todd,

We cannot achieve the autofill feature in the filtertype as contains and endswith. Because in this case, we cannot combine the full text with the autofill feature. So, we suggest you use filtertype as startswith to achieve the autofill feature.

Regards,

Sureshkumar P

[Todd Konesky]

Hi,

I don't want a standard startswith filter. I need to do my own custom filtering. Are you saying that the Autofill functionality will not work at all when doing custom filtering?

Is there a way for me to auto-select the 1st item in the filtered list either using JavaScript or backend C# code?

Thanks,

Todd

[Sureshkumar P]

Hi Todd,

We cannot achieve your requirement from the server side. so, we have modified prepared the sample with client-side using JSIntrop.

Find the sample code here:

@inject IJSRuntime JS

 

<SfComboBox @ref="autoObj" ID="autocomplete" @onkeydown="KeyDownEvent" AllowFiltering="true" @bind-Value="comboval" TValue="string" TItem="Games" Placeholder="e.g. Australia" DataSource="@LocalData">

 

    <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings>

 

    <ComboBoxEvents Filtering="@OnFiltering" Closed="PopupClosed" TValue="string" TItem="Games" OnActionComplete="ActionComplete"></ComboBoxEvents>

 

</SfComboBox>

@code {

 

    SfComboBox<string, Games> autoObj;

 

    public Query query;

 

    public Query filterQuery = new Query().Take(6);

 

    public string comboval { get; set; }

 

    public string TempVal { get; set; }

 

    public Boolean isFilter { get; set; } = false;

    public Boolean isTab { get; set; } = false;

 

 

    public class Games

    {

        public string ID { get; set; }

        public string Name { get; set; }

        public string Code { get; set; }

        public string Text => string.Format("{0} {1}", Code, Name);

    }

 

    List<Games> LocalData = new List<Games> {

        new Games() { ID= "Game1", Name= "American Football" , Code="01"},

        new Games() { ID= "Game2", Name= "Badminton" , Code="02"},

        new Games() { ID= "Game3", Name= "Basketball" , Code="03"},

        new Games() { ID= "Game4", Name= "Cricket" , Code="04"},

        new Games() { ID= "Game5", Name= "Football" , Code="05"},

        new Games() { ID= "Game6", Name= "Golf" , Code="06"},

        new Games() { ID= "Game7", Name= "Hockey" , Code="07"},

        new Games() { ID= "Game8", Name= "Rugby", Code="08"},

        new Games() { ID= "Game9", Name= "Snooker" , Code="09"},

        new Games() { ID= "Game10", Name= "Tennis", Code="10"}

    };

 

    async void ActionComplete(ActionCompleteEventArgs<Games> args)

    {

        if (isFilter && args.Result.Count() > 0)

        {

            TempVal = args.Result.FirstOrDefault().ID;

            isFilter = false;

            //comboval = TempVal;

            await JS.InvokeAsync<string>("SetSelectionClass", args.Result.FirstOrDefault().ID);

        }

    }

    void KeyDownEvent(KeyboardEventArgs args)

    {

        if(args.Key == "Tab")

        {

            isTab = true;

        }

 

    }

    void PopupClosed(ClosedEventArgs args)

    {

        if (isTab)

        {

            comboval = TempVal;

            isTab = false;

        }

    }

 

 

    public async Task OnFiltering(FilteringEventArgs e)

 

    {

        e.PreventDefaultAction = true;

        WhereFilter nameFilter = new WhereFilter()

            {

                Field = "Name",

                value = e.Text,

                Operator = "startswith",

                IgnoreCase = true

            };

        WhereFilter codeFilter = new WhereFilter()

            {

                Field = "Code",

                value = e.Text,

                Operator = "startswith",

                IgnoreCase = true

            };

        query = new Query().Where(nameFilter.Or(codeFilter));

        isFilter = true;

        await this.autoObj.Filter(LocalData, query);

    }

}

 

[AddSelected.js]

function SetSelectionClass(id) {

    var elementID = id;

    setTimeout((id) => {

        var firstElement = document.querySelector('[data-value=' + elementID.toString() + ']');

        firstElement.classList.remove("e-hover");

        firstElement.classList.remove("e-item-focus");

        firstElement.classList.add("e-active");

    }, 500);

};

 

Find the sample in the attachment:

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

Regards,

Sureshkumar P

Attachment: DDL_9a2c3309.zip

[Todd Konesky]

Thank you for the working example. I have implemented this in my project and it works great. The only thing that I found is that it does not work if AllowCustom is set to false.

Regards,

Todd

[Sureshkumar P]

Hi Todd,

We have validated the reported requirement in our previously attached sample, and we cannot replicate the reported issue on our end. we have attached the validated sample in the attachment.

If still, you have faced the same issue, then please replicate the reported issue on our attached sample and revert us with detailed issue replication steps. These details will help us to provide an exact solution as earlier as possible.

Regards,

Sureshkumar P

Attachment: DDL_b092d5f9.zip

[Todd Konesky]

Hi,

I downloaded and ran your example and I do experience the same issue. If you type in the letter g, "06 Golf" appears in the list and is highlighted, but when you press the Tab button, then "06 Golf" does not appear in the input box of the ComboBox; it only shows "e.g. Australia".

I have demonstrated this in the attached video.

Regards,

Todd

Attachment: Syncfusion_Clip_DDL_37b9f401.zip

[Sureshkumar P]

Hi Todd,

We modified the component value as a custom value inside the popup close event as part of the workaround we provided. Which is the reason the component properly updated the first highlighted value. Therefore, the workaround approach is ineffective in the scenario where the allowCustom property value is false. To fulfill your requirement, we recommend keeping the allowcustom property value set to true.

Kindly update us on the specifics if you are having trouble keeping the allowcustom attribute set to true. We will check them and get back to you as soon as we can with a precise solution.

Regards,

Sureshkumar P

[Todd Konesky]

My scenario will work with keeping AllowCustom set to true. Thanks again for your help and solution to my problem.

Regards,

Todd

[Sureshkumar P]

Todd,

Thanks for your update.

Regards,

Sureshkumar P