1. Home
  2. Forum
  3. Blazor
  4. Issue with Checkbox ListView on Page Load

Issue with Checkbox ListView on Page Load

Right when the page is loaded I get the error attached on this post. It's supposed to show a list of documents the user can select. The ListView still shows up, but it's not populated and the session disconnects. I've tried removing different parts of the ListView code shown below to see if that would help, but no matter what I remove it still seems to happen. The error attached is an ArgumentOutOfRange Exception. There are about 60 available documents if that matters. ID is a GUID, DocumentTypeName is a string, and IsChecked is a bool.

<EjsListView DataSource="@dpvm.Documents" ShowCheckBox="true" ModelType="@listVM">
     <ListViewEvents TValue="@...ViewModels.AvailableDocuments" Selected="@SelectItem"></ListViewEvents>
     <ListViewFieldSettings Id="Id" Text="DocumentTypeName" IsChecked="IsChecked"></ListViewFieldSettings>
</EjsListView>

TValue has the ellipsis to hide some sensitive info. listVM just gets newed up at the beginning and is the same type of object as TValue, and DataSource is a List<AvailableDocuments> so all of the types seem right, and removing the ListViewEvents or the ListViewFieldSettings in part or whole doesn't seem to help. Any input is greatly appreciated!

Attachment: errorMessage_834a8231.7z

3 Replies
MR Mohan Ravi Syncfusion Team August 27, 2019 10:34 AM UTC

 Hello there, 

Thanks for using Syncfusion products. 

We have applied all the things you mentioned in your query, but we are unable to reproduce your reported issue, Listview was populated successfully. I have attached my sample at last. 

A side note about “ModelType” property, there is no necessary to use it if you are not using Templates. 

As you have also mentioned server disconnects, it could be due to SignalR communication exception. But this exception will not be thrown in the console instead it will be in aspcore server logs. 

In Server Side Blazor projects, if we are using large amount of data to render items or in general, we need to add the below configuration in startup.cs file to avoid the below exception. 

Exception: 
fail: Microsoft.AspNetCore.SignalR.HubConnectionHandler[2] 
      Error when processing requests. 
System.IO.InvalidDataException: The maximum message size of 32768B was exceeded.  
The message size can be configured in AddHubOptions. 

Configuration: 
services.AddServerSideBlazor(); 
services.AddServerSideBlazor().AddHubOptions(o => 
{ 
                o.MaximumReceiveMessageSize = 102400000; 
}); 

Also, please make sure you are using latest version (v17.2.46) in all the distribution with dotnet SDK 3.0 Preview 8. 


<script src="https://cdn.syncfusion.com/ej2/17.2.46/dist/ej2.min.js"></script> 
 
<script src="https://cdn.syncfusion.com/ej2/17.2.46/dist/ejs.interop.min.js"></script> 
 
<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.2.46/material.css"> 

If nothing works, please modify or attach a minimum reproducible sample to help you better. 


Regards, 
Mohan 


IT ITninja August 27, 2019 06:00 PM UTC

Okay so I've narrowed it down a bit. It's due to the list of objects that I'm getting the Argument Out Of Range exception. I've made a list of strings with the document names and nothing else, and the list populates without error; however, whenever I introduce a list of POCOs (the poco has about 15 properties, including a Guid, a string for a name, and a bool for the IsChecked property of the list view) the whole thing fails and the list does not populate. None of my POCO properties are read-only, but it's something to do with using a list of POCOs vs a list of strings. Thanks again!

MR Mohan Ravi Syncfusion Team August 28, 2019 09:52 AM UTC

Hello there, 

Thanks for the update. 

I have tested the Listview in the MVVM data-model pattern by providing the data to the component via ViewModel and Model like below. 
  
[Listview.razor] 
@using ListviewCheckboxEx.ViewModels 
@using Data 
 
<EjsListView DataSource="@ViewModel.ListviewItems" 
             ShowCheckBox="true" 
             ShowHeader="true" 
             HeaderTitle="Listview header" 
             Height="300"> 
    <ListViewFieldSettings Id="Id" 
                           Text="DocumentTypeName" 
                           IsChecked="IsChecked"> 
    </ListViewFieldSettings> 
    <ListViewEvents TValue="ListviewItemModel" 
                    Selected="@(e => SelectedItem.InvokeAsync(e.Data))"> 
    </ListViewEvents> 
</EjsListView> 
 
@functions { 
    [Parameter] 
    public IListDataViewModel ViewModel { get; set; } 
 
    [Parameter] 
    public EventCallback<ListviewItemModel> SelectedItem { get; set; } 
} 

  
Like you mentioned, here the ListviewItemModel is also a POCO and the Listview just rendered fine. I have attached my MVVM pattern Listview project in a most simplified manner.  

Could you please check this sample against your project or provide us a simple reproducible sample or steps to reproduce exception to help you better. 


Regards, 
Mohan 


Loader.
Up arrow icon