1. Home
  2. Forum
  3. Blazor
  4. ListView not showing

ListView not showing

Hello,

I am trying out the Syncfusion Blazor components. When i go to add the ListView it does not show and looking at the DOM the element has the class "e-blazor-hidden"
I am  using the latest Blazor and .net core as well as the 17.4.51 version of Syncfusion Blazor.

In the _hosts.cshtml <HEAD> i have the following:
    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.4.51/bootstrap4.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/ej2/17.4.51/dist/ej2.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/17.4.51/dist/ejs.interop.min.js"></script>

In the _Imports.razor i have the following:
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Lists

In my Index.cshtml i have this:

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

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

    class DataModel
    {
        public string Text { get; set; }
        public string Id { get; set; }
    }

}

Anyone able to point me in the right direction?

Thanks

Atle


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

Hi Atle,  
 
Greetings from Syncfusion support. 
 
We have checked your reported problem and it is a known issue. We have already resolved it at our end. This fix will be included in our first weekly patch release which is expected to be released on Wednesday (4/3/2020).  
 
In the mean while, you can render the ListView in below case also. Refer the code snippet. 
@using Syncfusion.EJ2.Blazor.Lists 
<EjsListView DataSource="@Data"> 
    <ListViewFieldSettings Id="Id" Text="Text"></ListViewFieldSettings> 
</EjsListView> 
 
@code 
{  
    List<DataModel> Data = new List<DataModel>() 
       { 
            new DataModel { Text = "ArtWork", Id = "list-01" }, 
            new DataModel { Text = "Abstract", Id = "list-02" }, 
            new DataModel { Text = "Modern Painting", Id = "list-03" }, 
            new DataModel { Text = "Ceramics", Id = "list-04" }, 
            new DataModel { Text = "Animation Art", Id = "list-05" }, 
            new DataModel { Text = "Oil Painting", Id = "list-06" } 
    }; 
 
    class DataModel 
    { 
        public string Text { get; set; } 
        public string Id { get; set; } 
    } 
} 
 
For your reference, we have prepared a sample. 
 
To more about the ListView component. Refer the below link. 
 
 
 
Please let us know, if you need any further assistance. 
 
 
Regards, 
Sowmiya.P 


BV Bob Vale March 2, 2020 09:31 PM UTC

I believe I may have tracked down the issue and reported it myself before I saw this.

The bug is in GetElementType() Function.  It doesn't understand arrays and using a list<T> instead solves it.


SP Sowmiya Padmanaban Syncfusion Team March 4, 2020 06:24 AM UTC

Hi Atle,  
 
We are glad to announce that Patch Release (v17.4.54) is rolled out successfully. In this release we have included a fix for “ListView not rendered using array”. To access this fix we suggest you to update the package to the latest version (v17.4.54). 
 
Refer the below sample link. 
 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Regards,  
Sowmiya.P 


Loader.
Up arrow icon