1. Home
  2. Forum
  3. Blazor
  4. Binding not working

Binding not working

In trying to bind to a ListView, I have verified that the example with the DataModel works fine. I have also verified that I can rename the type or properties without issue. However, if I try to use a class that is defined outside of the component, then the Text field (in my case, the property is named `Name`) refuses to bind.

So something like:

@using Something.Web.Models
@using Syncfusion.EJ2.Blazor.Lists

<EjsListView DataSource="@Data">
    <ListViewFieldSettings Id="Id" Text="Name"></ListViewFieldSettings>
</EjsListView>


@code {
    private SomeModel[] Data =
         {
            new SomeModel { Name = "ArtWork", Id = "list-01" },
            new SomeModel { Name = "Abstract", Id = "list-02" },
            new SomeModel { Name = "Modern Painting", Id = "list-03" },
            new SomeModel { Name = "Ceramics", Id = "list-04" },
            new SomeModel { Name = "Animation Art", Id = "list-05" },
            new SomeModel { Name = "Oil Painting", Id = "list-06" }
    };
}

binds Id, but doesn't bind the Text/Name.



I also tried specifying `TValue` (as below), but I get the same result.

<EjsListView DataSource="@Data" TValue="SomeModel">
    <ListViewFieldSettings Id="Id" Text="Name"></ListViewFieldSettings>
</EjsListView>
 
How can I get this to bind correctly?

3 Replies
SP Sowmiya Padmanaban Syncfusion Team March 18, 2020 12:06 PM UTC

Hi Dan,  
 
Greetings from Syncfusion support. 
 
We have checked your reported query and unable to reproduce it. We suspect that the reported issue occurs due to the fields property is not properly mapped in your application. 
 
Refer the below code snippet. 
 
<EjsListView DataSource="@Data"> 
    <ListViewFieldSettings Id="Id" Text="Name"></ListViewFieldSettings> 
</EjsListView> 
 
 
@code { 
    private SomeModel[] Data = 
         { 
            new SomeModel { Name = "ArtWork", Id = "list-01" }, 
            new SomeModel { Name = "Abstract", Id = "list-02" }, 
            new SomeModel { Name = "Modern Painting", Id = "list-03" }, 
            new SomeModel { Name = "Ceramics", Id = "list-04" }, 
            new SomeModel { Name = "Animation Art", Id = "list-05" }, 
            new SomeModel { Name = "Oil Painting", Id = "list-06" } 
    }; 
} 
 
Class.cs file 
 
   public class SomeModel 
    { 
        public string Name { get; set; } 
        public string Id { get; set; } 
         
    } 
 
For your reference, we have prepared a sample. 
 
 
If the issue still persist, then please share the additional details regarding your requirement. It will be helpful for us to resolve your issue at earlier. 
 
1.      Code snippet for class declaration. 
 
2.      If possible, reproduce the issue in attached sample. 
 
Refer the below links for ListView component. 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


DA Dan March 18, 2020 05:29 PM UTC

OK, I got it. The external type I was using was decorated with `JsonPropertyAttribute` and changed the field name case.

        [JsonProperty("name", Required = Required.AllowNull)]
        public string Name { get; set; }

I'm not sure I agree with this behavior, since in my mind, I am not using JSON, I am using C#. And I feel like the following should work:

<EjsListView DataSource="@Data">
    <ListViewFieldSettings Id="nameof(SomeObject.Id)" Text="nameof(SomeObject.Name)"></ListViewFieldSettings>
</EjsListView>


Attachment: BlazorApp12013686533_(2)_dc9d7f03.zip

SP Sowmiya Padmanaban Syncfusion Team March 19, 2020 09:05 AM UTC

Hi Dan, 
 
We have checked your reported problem that you want to use C# operator instead of  JSON property. Yes, you can use the C# nameof() operator. Refer the below code snippet. 
 
@using Syncfusion.EJ2.Blazor.Lists 
 
<EjsListView DataSource="@Data"> 
    <ListViewFieldSettings Id="@id" Text="@text"></ListViewFieldSettings> 
</EjsListView> 
 
 
@code { 
    private SomeModel[] Data = 
         { 
            new SomeModel { Name = "ArtWork", Id = "list-01" }, 
            new SomeModel { Name = "Abstract", Id = "list-02" }, 
            new SomeModel { Name = "Modern Painting", Id = "list-03" }, 
            new SomeModel { Name = "Ceramics", Id = "list-04" }, 
            new SomeModel { Name = "Animation Art", Id = "list-05" }, 
            new SomeModel { Name = "Oil Painting", Id = "list-06" } 
    }; 
     public string text = nameof(SomeModel.Name); 
     public string id = nameof(SomeModel.Id); 
} 
   
    public class SomeModel 
    {       
        public string Name { get; set; } 
        public string Id { get; set; }         
    } 
 
Refer the sample link below. 
 
Please let us know, if you have any concerns. 
 
Regards,  
Sowmiya.P 


Loader.
Up arrow icon