Inherit autocomplete and configure it by csharp

[Alberto]

Hello everyone,

I would like to inherit the Autocomplete control but I don't know how to configure it. What I did was to create a class that inherits from SfAutocomplete and to add my methods, but at the same time I would also like to set the DataManager and the Text and Value fields.

This is what I did:

public class ZBrowse<TItem> : SfAutoComplete<string, TItem>
    {
        [Parameter]
        public CharacterCasing CharacterCasing
        {
            get => characterCasing;
            set
            {
                characterCasing = value;
                CssClass ??= "";
                CssClass += value switch
                {
                    CharacterCasing.Upper => "text-upper",
                    CharacterCasing.Lower => "text-lower",
                    _ => ""
                };
            }
        }


        [Parameter] public string? DisplayMember { get; set; }
        [Parameter] public string? ValueMember { get; set; }


        private CharacterCasing characterCasing;


        protected override void OnInitialized()
        {
            ShowClearButton = true;
            AllowCustom = false;
            MinLength = 0;
            FilterType = FilterType.StartsWith;


            Query ??= new();
            if (!string.IsNullOrWhiteSpace(Value))
            {
                Query = Query.Where("IdBase", "==", Value);
            }


            DataManager = new MyDataManager();


            base.OnInitialized();
        }


        protected override void BuildRenderTree(RenderTreeBuilder __builder)
        {
            base.BuildRenderTree(__builder);


            __builder.AddContent(0, fragment =>
            {
                fragment.OpenComponent<AutoCompleteFieldSettings>(0);


                if (!string.IsNullOrWhiteSpace(DisplayMember))
                    fragment.AddAttribute(1, "Text", DisplayMember);


                if (!string.IsNullOrWhiteSpace(ValueMember))
                    fragment.AddAttribute(2, "Value", ValueMember);


                fragment.CloseComponent();
            });
        }
    }

I would like to get the equivalent of this

<SfAutoComplete TValue="string" TItem="CittaVM" ShowClearButton=true AllowCustom=false                       MinLength=3 FilterType=Syncfusion.Blazor.DropDowns.FilterType.StartsWith
                                            CssClass="text-uppercase" @bind-Value="cliente.IdLuogoNascita">


                                    <MyDataManager Url="api/gestione/citta" />
                                    <AutoCompleteFieldSettings Value="IdBase" Text="Denominazione" />

                                </SfAutoComplete>

[Vinitha Jeyakumar]

Hi Alberto,

Currently, we are validating your reported query. we will update you the further details in two business days on or before 25^th January 2022.

Regards,

Vinitha

[Sureshkumar P]

Hi Alberto, 

 

In our autocomplete component rendering as custom component by below code example with datamanager component. 

 

[Customtextbox.razor] 

 

<SfAutoComplete TValue="TVal" TItem="TItemss" Placeholder="Select a name" Query="@QueryValue" Value="@Value" ValueChanged="ValueChanged" ValueExpression="@ValueExpression"> 

    <SfDataManager Url="@DatURL" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager> 

    <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings> 

</SfAutoComplete> 

 

@code 

{ 

    [Parameter] 

 

    public TVal Value { get; set; } 

 

    [Parameter] 

    public Expression<Func<TVal>> ValueExpression { get; set; } 

 

    [Parameter] 

    public EventCallback<TVal> ValueChanged { get; set; } 

 

    [Parameter] 

    public string DatURL { get; set; } 

     

    public Query QueryValue = new Query().Select(new List<string> { "CustomerID" }).Take(6).RequiresCount(); 

 

    public class OrderDetails 

    { 

        public int? OrderID { get; set; } 

        public string CustomerID { get; set; } 

        public int? EmployeeID { get; set; } 

        public double? Freight { get; set; } 

        public string ShipCity { get; set; } 

        public bool Verified { get; set; } 

        public DateTime? OrderDate { get; set; } 

        public string ShipName { get; set; } 

        public string ShipCountry { get; set; } 

        public DateTime? ShippedDate { get; set; } 

        public string ShipAddress { get; set; } 

    } 

 

} 

 

 

[index.razor] 

 

<CustomTextbox TVal="string" TItemss="OrderDetails" DatURL="@Country" Value="@NameCustom"> 

</CustomTextbox> 

 

 

 

@code { 

    public class OrderDetails 

    { 

        public int? OrderID { get; set; } 

        public string CustomerID { get; set; } 

        public int? EmployeeID { get; set; } 

        public double? Freight { get; set; } 

        public string ShipCity { get; set; } 

        public bool Verified { get; set; } 

        public DateTime? OrderDate { get; set; } 

        public string ShipName { get; set; } 

        public string ShipCountry { get; set; } 

        public DateTime? ShippedDate { get; set; } 

        public string ShipAddress { get; set; } 

    } 

    public  string NameCustom {get;set;} 

    public string Country { get; set; } = "https://ej2services.syncfusion.com/production/web-services/api/Orders"; 

} 

 

 

Regards, 

Sureshkumar P 

[Alberto]

Perfect, the indicated solution solves the problem. Many thanks

[Ranjani Prabakaran]

Hi Alberto, 

That’s great. Please contact us incase if you need any further assistance. 

Regards, 

Ranjani