1. Home
  2. Forum
  3. Blazor
  4. AutoComplete (inside Grid) bound to object results in a JsonException when trying add a row

AutoComplete (inside Grid) bound to object results in a JsonException when trying add a row

When using an AutoComplete control inside a Grid columns edit template it will throw the error below when you click the Add button to add a new row. 

Error:

System.Text.Json.JsonException: 'A' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.


Repro code:

@page "/Test"

<h3>Test</h3>

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" TValue="Order">
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog"></GridEditSettings>
    <GridColumns>
        <GridColumn Field="Name" HeaderText="Name" Width="150"></GridColumn>
        <GridColumn Field="Country.Name" HeaderText="Country" Width="150">
            <EditTemplate>
                <SfAutoComplete TItem="Country" TValue="Country" ID="Id" @bind-value="@((context as Order).Country)" DataSource="Countries">
                    <AutoCompleteFieldSettings Text="Name" Value="Code"></AutoCompleteFieldSettings>
                </SfAutoComplete>
            </EditTemplate>
        </GridColumn>
    </GridColumns>
</SfGrid>

@code {

    private Country selectedCountry { get; set; }

    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    public static List<Country> Countries = new List<Country>
    {
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" }
    };

    public class Order
    {
        public string Name { get; set; }
        public Country Country { get; set; }
    }

    public List<Order> Orders = new List<Order>()
    {
        new Order() { Name = "First", Country = Countries[0] },
        new Order() { Name = "Second", Country = Countries[1] },
        new Order() { Name = "Third", Country = Countries[2] }
    };

    protected override void OnInitialized() => selectedCountry = Countries[1];
}

Repro steps:

  1. Add a page to a blazor server side project
  2. Run the project and navigate to the page
  3. Click the "Add" button on the Grid
  4. The error will be thrown


3 Replies 1 reply marked as answer
VJ Vinitha Jeyakumar Syncfusion Team May 13, 2022 12:37 PM UTC

Hi Chris,


Your reported issue occurs because of inappropriate value assigned to the Tvalue property and in the Bind-Value property. please check the below code for modified sample,

Code snippet:
<SfGrid DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" TValue="Order">
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog"></GridEditSettings>
    <GridColumns>
        <GridColumn Field="Name" HeaderText="Name" Width="150"></GridColumn>
        <GridColumn Field="Country.Name" HeaderText="Country" Width="150">
            <EditTemplate>
                <SfAutoComplete TItem="Country" TValue="string" ID="Id" @bind-value="@((context as Order).Country.Name)" DataSource="@Countries">
                    <AutoCompleteFieldSettings Text="Name" Value="Name"></AutoCompleteFieldSettings>
                </SfAutoComplete>
            </EditTemplate>
        </GridColumn>
    </GridColumns>
</SfGrid>

@code {
   
    private Country selectedCountry { get; set; }

    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    public static List<Country> Countries = new List<Country>
    {
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" }
    };

    public class Order
    {
        public string Name { get; set; }
        public Country Country { get; set; }
    }

    public List<Order> Orders = new List<Order>()
    {
        new Order() { Name = "First", Country = Countries[0] },
        new Order() { Name = "Second", Country = Countries[1] },
        new Order() { Name = "Third", Country = Countries[2] }
    };

    protected override void OnInitialized() => selectedCountry = Countries[1];
}

Regards,
Vinitha

CJ Chris Johnson May 13, 2022 03:22 PM UTC

Vinatha,

This is not correct.  I want to bind the Country object that is selected to Order.Country so that I get the correct country object set on the Order.

You "fixed" a bug recently to enable this:

Unhandled exception throws while using object value to @bind-value property in Blazor | Feedback Portal (syncfusion.com)

This works when the autocomplete is NOT inside a Grid.  But it is broken when the autocomplete is used inside a Grid.

Thanks,



VJ Vinitha Jeyakumar Syncfusion Team May 18, 2022 06:53 AM UTC

Hi Chris,


We have modified the shared code snippet to resolve the reported issue. please check the code below,

Code snippet:
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns

<SfGrid DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" TValue="Order">
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog"></GridEditSettings>
    <GridColumns>
        <GridColumn Field="Name" HeaderText="Name" Width="150"></GridColumn>
        <GridColumn Field="Country.Name" HeaderText="Country" Width="150">
            <EditTemplate>
                @{
                    if (((context as Order).Country?.Code) == null)

                    {
                       (context as Order).Country = null;
                    }
                  }
                    <SfAutoComplete TItem="Country" TValue="Country" ID="Id" @bind-value="@((context as Order).Country)" DataSource="Countries">
                   <AutoCompleteFieldSettings Text="Name" Value="Code"></AutoCompleteFieldSettings>
                </SfAutoComplete>
               </EditTemplate>
        </GridColumn>
    </GridColumns>
</SfGrid>
@code {
    private Country selectedCountry { get; set; }
    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
    public static List<Country> Countries = new List<Country>
    {
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" }
    };
    public class Order
    {
        public string Name { get; set; }
        public Country Country { get; set; }
    }
    public List<Order> Orders = new List<Order>()
    {
        new Order() { Name = "First", Country = Countries[0] },
        new Order() { Name = "Second", Country = Countries[1] },
        new Order() { Name = "Third", Country = Countries[2] }
    };
    protected override void OnInitialized() => selectedCountry = Countries[1];
}

Please let us know if it resolves your reported issue.

Regards,
Vinitha

Marked as answer
Loader.
Up arrow icon