Search Description and Value

[David]

I have a requirment where i must allow the user to search the code and the name of the item , I was going to use a keyvalue pair and let the control search both fields but how do i allow it to do it for example for picking list i am using the following an a Picker list control.

However I want to be able to search both the code and name in the autocomplete view can you tell me how to achieve that.

 

Say My Class has BomItems

 

Property string Code {get;set;}

Property string Name {get;set}

Code=GYNA
Name=Back Joint

 

So if the user where to type in GYNA or Back Joint it would make the code be GYNA of that list

 

01.warehouses = await database.GetWarehousesFromSage();
02.     if (!warehouses.IsNullOrEmpty())
03.     {
04.         viewModel.Warehouses = warehouses.ToObservableCollection();
05.         foreach(var warehouse in warehouses)
06.         {
07.             if (warehouse.Description =="")
08.                 warehouse.Description = warehouse.Name;
09.
10.
11.             PickerItems.Add(warehouse.WarehouseID.ToString(), warehouse.Description);
12.
13.         }
14.         pickWarehouse.ItemsSource = PickerItemList;
15.     }

 

 

 

 

[Yana]

Hello David,

With RadAutoCompleteView control you can create a custom filtering behavior where to define specific filtering logic - for example to search through more properties of the business object.  Please go through the following documentation topic where the approach is described in details:
AutoCompleteView Filtering.

Give it a try and if you have any additional questions, let me know.

Regards,
Yana
Progress Telerik

[David]

I understand the code but the documentation is missing the point on how do i hook up the to the xaml in the example xaml it doesn't reference the CustomAutoCompleteViewFilter at all may i ask how do I achieve that.

 

public class CustomAutoCompleteViewFilter : IAutoCompleteFilter
{
    public bool Filter(object item, string searchText, CompletionMode completionMode)
    {
        Person person = (Person)item;
        string lowerFirstName = person.FirstName.ToLower();
        string lowerLastName = person.LastName.ToLower();
        string lowerSearchText = searchText.ToLower();
        return lowerFirstName.Contains(lowerSearchText) || lowerLastName.Contains(lowerSearchText);
    }
}
Finally, use the

[Yana]

Hello David,

In the CustomFilteringViewModel class there is a Filter property of type CustomAutoCompleteViewFilter  (the class that you've pointed out):

public class CustomFilteringViewModel
{
    public CustomFilteringViewModel()
    {
        this.Source = new ObservableCollection<Person>()
        {
           ...
        };

        this.Filter = new CustomAutoCompleteViewFilter();
    }

    public ObservableCollection<Person> Source { get; set; }

    public CustomAutoCompleteViewFilter Filter { get; set; }
}

Then, the AutoCompleteView's Filter property is bound to that property of the ViewModel:

<telerikInput:RadAutoCompleteView x:Name="аutoCompleteView"
                          Filter="{Binding Filter}"
                          TextSearchPath="FirstName"
                          ItemsSource="{Binding Source}"
                          Watermark="Search here..."
                          SuggestionViewHeight="300">

which actually replaces the default filter behavior with the custom one.

Let me know if any additional questions arise.

Regards,
Yana
Progress Telerik

[David]

Hi I have my filter in but it is not firing its allowing me to search the code ok ie Reference but its not allowing me to search the description  field. Its showing up ok but i think what is happening is that TextSearchPath is overidding it in this verison i am using which is the last version available on my account.

 

01./// <summary>
02./// Class CustomAutoCompleteViewFilter.
03./// Implements the <see cref="Telerik.XamarinForms.Input.AutoComplete.IAutoCompleteFilter" />
04./// </summary>
05./// <seealso cref="Telerik.XamarinForms.Input.AutoComplete.IAutoCompleteFilter" />
06.public class CustomAutoCompleteViewFilter : IAutoCompleteFilter
07.{
08.    /// <summary>
09.    /// Filters the specified item.
10.    /// </summary>
11.    /// <param name="item">The item.</param>
12.    /// <param name="searchText">The search text.</param>
13.    /// <param name="completionMode">The completion mode.</param>
14.    /// <returns><c>true</c> if XXXX, <c>false</c> otherwise.</returns>
15.    public bool Filter(object item, string searchText, CompletionMode completionMode)
16.    {
17.        StockAutoCompleteInfo stock = (StockAutoCompleteInfo)item;
18.        string lowerReference = stock.Code.ToLower();
19.        string lowerDescription = stock.Description.ToLower();
20.        string lowerSearchText = searchText.ToLower();
21.        return lowerReference.Contains(lowerSearchText) || lowerDescription.Contains(lowerSearchText);
22.    }
23.}
24.}

 

 

<telerikInput:RadAutoCompleteView x:Name="txtCode" SuggestionViewHeight="300" Filter="{Binding Filter}"  CompletionMode="StartsWith"   TextSearchPath="Reference"  Watermark="Search for Bom here...">
    <telerikInput:RadAutoCompleteView.SuggestionItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Vertical">
                    <Label Text="{Binding Reference}"/>
                    <Label Text="{Binding Description}"/>
                    <BoxView BackgroundColor="Black" HeightRequest="1"  HorizontalOptions="StartAndExpand"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </telerikInput:RadAutoCompleteView.SuggestionItemTemplate>
</telerikInput:RadAutoCompleteView>
<telerikInput:RadButton x:Name="btnFindBom"  BackgroundColor="#343C41" TextColor="White"  Clicked="BtnGetBomInfo_Clicked"  Text="Find Bom"></telerikInput:RadButton>

[David]

Another thing is that even though I am getting the message displayed I am not able to debug the Filter method to see what the item contains to see if their is an issue their my xamrain wont debug into that here is a short jinq video to  explain.

 

https://www.screencast.com/t/vI0u0iwhs

 

 

[Yana]

Hi David,

Thank you for providing the screencast.

It seems the custom filter behavior is not applied to the AutoCompleteView.  Please check whether you have a property of type CustomAutoCompleteViewFilter added to the ViewModel class and that it is properly defined:

 this.Filter = new CustomAutoCompleteViewFilter();

I have attached a sample app based on the provided code to show you how this would work.

I hope this would be of help.

Regards, Yana
Progress Telerik

[David]

Yes that is what I have on my class constructor

As you can see i have no probelm showing items in the auto complete it just will refuse to search description field

I

 

private async void BindAutoComplete()
    {

        var SourceT = await restServices.GetBomAutoCompleteInfo();

        Source = SourceT.ToObservableCollection();

        txtCode.ItemsSource = Source.ToObservableCollection();



    }

}
/// <summary>
/// Gets or sets the filter.
/// </summary>
/// <value>The filter.</value>
public CustomAutoCompleteViewFilter Filter { get; set; }

 

<telerikInput:RadAutoCompleteView x:Name="txtCode" SuggestionViewHeight="300" Filter="{Binding Filter}"  CompletionMode="StartsWith"   TextSearchPath="Reference"  Watermark="Search for Bom here...">
    <telerikInput:RadAutoCompleteView.SuggestionItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Vertical">
                    <Label Text="{Binding Reference}"/>
                    <Label Text="{Binding Description}"/>
                    <BoxView BackgroundColor="Black" HeightRequest="1"  HorizontalOptions="StartAndExpand"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </telerikInput:RadAutoCompleteView.SuggestionItemTemplate>
</telerikInput:RadAutoCompleteView>
<telerikInput:RadButton x:Name="btnFindBom"  BackgroundColor="#343C41" TextColor="White"  Clicked="BtnGetBomInfo_Clicked"  Text="Find Bom"></telerikInput:RadButton>

public ScanListBom()
    {
        InitializeComponent();
        settingsFuel.LoadSettings();
        BindAutoComplete();
        Filter = new CustomAutoCompleteViewFilter();



    }

[Yana]

Hello David,

That's strange - I have tested this again and the filter is searching in both properties.  I've attached a short video to show you how the sample app behaves on my side.

Currently I am clueless what could be the reason for the erroneous behavior you've come across, so may I ask you to try to isolate it in a runnable sample and send it over. You'd need to open a support ticket and attach it there.

Thanks in advance.

Regards, Yana
Progress Telerik

[David]

The main difference that I can see is 

Which I call on my constructor it should still work at this method binding as i can see all the items in the source context.

[code]  /// <summary>
        /// Gets or sets the source.
        /// </summary>
        /// <value>The source.</value>
        public ObservableCollection<BomAutoCompleteInfo> Source { get; set; }
        /// <summary>
        /// Binds the automatic complete.
        /// </summary>
        private async void BindAutoComplete()
        {

            var SourceT = await restServices.GetBomAutoCompleteInfo();

            Source = SourceT.ToObservableCollection();

            txtCode.ItemsSource = Source.ToObservableCollection();



        }

 

[/code]

[David]

Please see short video

I am searching for anae which it finds but if i expand my search to include anaesth it does not find the same record.

 

https://streamable.com/rvi0t

[Yana]

Hello David,

Thank you for sending the video - indeed, the custom filter is not executed for some reason.

I noticed in the provided snippet the Filter is defined inside the ScanListBom class - is this the ViewModel class? Please note that you'd need to either set BindingContext (to the ScalListBom class), so that the binding to work or directly apply the Filter property of the AutoCompleteView control without binding:

 txtCode.Filter = new CustomAutoCompleteViewFilter();

Please give this a try and let me know how it goes.

Regards,
Yana
Progress Telerik

[David]

Thanks that appears to have got the filter to fire i am testing now and will let u no even though I am seaching the description it will still bring back the code i hope.