Value always null

[Alex]

Hi,

How do you capture the value of the selected auto complete value?

                            <SfAutoComplete ID="CaseId" TValue="string" TItem="Case" Placeholder="Case" Value="@((context as Entry).CaseReference)" DataSource="@CasesResponse.ListOfCases.Cases" HtmlAttributes="@CaseId">

                                <AutoCompleteFieldSettings Value="CaseReference"></AutoCompleteFieldSettings>

                                <AutoCompleteEvents TValue="string" ValueChange="CaseSelected"></AutoCompleteEvents>

                            </SfAutoComplete>

This is my current setup but the value is always Null whatever I select.  Also how do I set the initial selected value?

Thanks,

Alex

[Joseph Christ Nithin Issack]

  

Hi Alex, 

   Greetings from syncfusion. 

  We have checked your requirements,  

Query-1 

You can set a value as selected initially using the @bind-Value property, this is a two way binding property. The value should be assigned to a variable and then the variable should be assigned to the @bind-Value property.  

Query-2 

You can get the value of the selected autocomplete variable using the arguments.Value in the ChangeEventArgs, and also you can get the values from the Variable declared above for binding the selected value. 

   

@page "/" 

 

<SfAutoComplete @ref="autoCompleteObj" ID="CaseId" TValue="string" TItem="Countries" Placeholder="Case" @bind-Value="AutoVal" DataSource="@LocalData"> 

    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings> 

    <AutoCompleteEvents TValue="string" ValueChange="onChange"></AutoCompleteEvents> 

</SfAutoComplete> 

 

@code { 

 

    public string AutoVal = "Canada"; 

 

    public string dialogContent; 

 

    public class Countries 

    { 

        public string Name { get; set; } 

 

        public string Code { get; set; } 

    } 

 

    List<Countries> LocalData = new List<Countries> 

{ 

 

        new Countries() { Name = "Australia", Code = "AU" }, 

        new Countries() { Name = "Bermuda", Code = "BM" }, 

        new Countries() { Name = "Canada", Code = "CA" }, 

        new Countries() { Name = "Cameroon", Code = "CM" }, 

        new Countries() { Name = "Denmark", Code = "DK" }, 

        new Countries() { Name = "France", Code = "FR" }, 

        new Countries() { Name = "Finland", Code = "FI" }, 

        new Countries() { Name = "Germany", Code = "DE" }, 

        new Countries() { Name = "Greenland", Code = "GL" }, 

        new Countries() { Name = "Hong Kong", Code = "HK" }, 

        new Countries() { Name = "India", Code = "IN" }, 

        new Countries() { Name = "Italy", Code = "IT" }, 

        new Countries() { Name = "Japan", Code = "JP" }, 

        new Countries() { Name = "Mexico", Code = "MX" }, 

        new Countries() { Name = "Norway", Code = "NO" }, 

        new Countries() { Name = "Poland", Code = "PL" }, 

        new Countries() { Name = "Switzerland", Code = "CH" }, 

        new Countries() { Name = "United Kingdom", Code = "GB" }, 

        new Countries() { Name = "United States", Code = "US" }, 

    }; 

    private void onChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args) 

    { 

        var DropVal = args.Value; 

        var value = AutoVal; 

    } 

 

    public void closeDialog() 

    { 

        dialogObj.Hide(); 

    } 

} 

I have also attached a sample to demonstrate your requirements. Hope this may help you meet your requirements.  

  

SampleBlazorApplication 

  

Thanks, 

Joseph Christ Nithin I 

[Alex]

Hi,

Unfortunately, this doesn't seem to work.  The code doesn't compile (@ref="autoCompleteObj" doesn't exist.

Also, you've created a different scenario to mine - the bind value needs to use the context e.g @((context as Entry) rather than a separate value.  I've tried to apply what you've provided but it doesn't help.

Can you try to match my scenario?

Thanks,

Alex

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Alex,

Thanks for your update.

We suspect that the code does not compile due to ref is not initialized. So we suggest you to check after initializing the ref variable as like below.


 

 public SfAutoComplete<string,Countries> autoCompleteObj; 

Can you please confirm that you used Autocomplete inside Datagrid?  If so, please provide the control rendering code along with the grid component.

Similarly, kindly share the exact scenario where you need to capture the Autocomplete value (Say in button click). Thereby we can provide you the better solution.

Thanks,
Jeyanth.