1. Home
  2. Forum
  3. Blazor
  4. filtering with more than one character

filtering with more than one character

I'm using Blazor server last version and a dropdowlist inside a edittemplate of a grid

<SfDropDownList @ref="ddladdetti" TItem="AddettiDTO" TValue="string" DataSource="@DatiAddettiScelta" @bind-Value="(context as TrapDTO).Tadd_Id" Placeholder="Seleziona un addetto" FilterType="Syncfusion.Blazor.DropDowns.FilterType.StartsWith">

                                    <DropDownListFieldSettings Value="Tadd_Id" Text="addettocompleto"></DropDownListFieldSettings>

</SfDropDownList>

if the list of binding values is something like:

012

064

...

when I type 0, the first value is captured but if I continue typing 6 the second line is not selected

Is there a way to get this result ?

I know that the autocomplete component does this job but it doesn't show a list of option in case you don't remember which text you can type



7 Replies
BC Berly Christopher Syncfusion Team July 19, 2021 12:51 PM UTC

Hi Walter, 
  
Greetings from Syncfusion support. 
  
We have checked the reported issue. By default, the active element will be modified based on the first character entered by keyboard action. If you want to filter the value based on entered text means, we suggest you to enable the filtering feature as mentioned in the below code example. 
  
<SfDropDownList TValue="string" TItem="Countries" Placeholder="e.g. Australia" AllowFiltering="true" DataSource="@Country"  @bind-Value="@ddlValue" FilterType="Syncfusion.Blazor.DropDowns.FilterType.StartsWith"> 
    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 
</SfDropDownList> 
 
@code { 
    public string ddlValue { get; set; } 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
{ 
        new Countries() { Name = "012", Code = "Australia" }, 
        new Countries() { Name = "064", Code = "Bermuda" }, 
    }; 
} 
 
  
Screenshot: 
 
  
  
Regards, 
Berly B.C 


WM Walter Martin July 19, 2021 09:58 PM UTC

Thanks for this suggestion, it works in this way but supposing I need to use only the keyboard, is there any option to open the popup list of options having the cursor automatically in the filter box, as soon as the dropdownlist got a focus ?


BC Berly Christopher Syncfusion Team July 20, 2021 02:29 PM UTC

Hi Walter, 
  
We would like to inform you that, when you focus the DropDownList component with keyboard access then popup will not be opened. If you want to open the popup with keyboard access, we suggest you press the alt+down arrow key. 
  
  
Else, we can call the ShowPopupAsync() method in the Focus event as mentioned below to get rid of the reported issue. 
  
<SfDropDownList @ref="dropObj" TValue="string" TItem="Countries" Placeholder="e.g. Australia" AllowFiltering="true" DataSource="@Country"  @bind-Value="@ddlValue" FilterType="Syncfusion.Blazor.DropDowns.FilterType.StartsWith"> 
    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 
    <DropDownListEvents TValue="string" TItem="Countries" Focus="OnFocus"></DropDownListEvents> 
</SfDropDownList> 
 
@code { 
    SfDropDownList<string, Countries> dropObj; 
    public string ddlValue { get; set; } 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
{ 
        new Countries() { Name = "012", Code = "Australia" }, 
        new Countries() { Name = "064", Code = "Bermuda" }, 
    }; 
    public void OnFocus() 
    { 
        this.dropObj.ShowPopupAsync(); 
    } 
} 
 
  
  
Regards, 
Berly B.C 


WM Walter Martin July 21, 2021 02:12 PM UTC

Many thanks, the second solution is what I was looking for and it works but not completely and I suppose because of missing information in my list of options but I don't understand what.

When I click on TAB key to move the focus in the dropdownlist, the popup appeared but togherter with an error message on bottom. I add here in attachment a printscreen of the dialog box and the error.

The same error occured even before adding your suggestion of the OnFocus event to open the popup, just clicking the ENTER key when the cursor was over the Dropdownlist

Instead if I simply clicked on the Dropdownlist with the mouse to open the popup the error didn't appear


So I think the ENTER key and the TAB key with the onfocus event to open the popup caused the error that seems to be something missing in the list of data available from the error description but using the ENTER or the TAB key to open the popup are not actions to make a choice in the list of options...


                        <GridForeignColumn HeaderText="Addetto" TValue="AddettiDTO" Field=@nameof(TrapDTO.Tadd_Id) ForeignKeyValue="addettocompleto" ForeignDataSource="@SorgenteAddettiCompleta" AutoFit="true">

                            <EditTemplate>

                                <SfDropDownList @ref="ddladdetti" TItem="AddettiDTO" TValue="string" DataSource="@DatiAddettiScelta" @bind-Value="(context as TrapDTO).Tadd_Id" Placeholder="Seleziona un addetto" AllowFiltering="true" FilterType="Syncfusion.Blazor.DropDowns.FilterType.StartsWith">

                                    <DropDownListFieldSettings Value="Tadd_Id" Text="addettocompleto"></DropDownListFieldSettings>

                                    <DropDownListEvents TValue="string" TItem="AddettiDTO" Focus="OnFocus"></DropDownListEvents>

                                </SfDropDownList>

                            </EditTemplate>

                        </GridForeignColumn>



Attachment: Desktop_abd2077e.zip

BC Berly Christopher Syncfusion Team July 22, 2021 07:40 AM UTC

Hi Walter, 
  
Thanks for sharing information to us. 
  
This is already known issue in the Product version 19.2.0.47, and it has been resolved in the latest Syncfusion version 19.2.0.48. So, we suggest you ensure that the application in the latest version and let us know whether the issue is resolved or not.   
  
Also, we suggest you to clear the browser cache and follow the instruction mentioned in the below knowledge base document to clear the NuGet cache. 
  
  
Regards, 
Berly B.C 


WM Walter Martin July 22, 2021 09:01 PM UTC

you're right

my mistake because actually I was not using the latest version 

Now it works perfectly

Thanks



BC Berly Christopher Syncfusion Team July 23, 2021 06:04 AM UTC

Hi Walter, 
  
We are glad to know that the issue is resolved at your end. Please let us know if you need further assistance on this. 
  
Regards, 
Berly B.C 


Loader.
Up arrow icon