TelerikListView not showing when datasource is null

Question

Hi all,
I am working on a .net core project in with blazor.
I am facing a issue in loading TelerikListView. When datasource is null, TelerikListView not displaying. There are so many controls like dropdown, textbox, radio buttion are there inside this. I have assigned a IEnumerable class to this Listview. When it has data, the Listview is displaying thus all controls also.
The inside controls value are binding from another datasource. Pls help me to solve this issue

Brahma Prakash Shukla · Answer

Based on your updated explanation, it appears that the issue lies in the way you are handling the model and changemodel objects. Since the ListView is not displaying when the model is null, we need to ensure that the data source for the ListView is correctly populated in both cases: when the model has data (during update) and when it's null (during insert).
To achieve this, you can follow these steps:
Separate IEnumerable for ListView: Instead of using the same IEnumerable for both the ListView and the changemodel variable, create a separate variable specifically for the ListView's data source. This will prevent any conflicts during the insert process.
public IEnumerable Changemodel { get; set; } = new List ();
public IEnumerable ListViewData { get; set; } = new List ();
Fetch Data for ListView: When loading the ListView, populate the ListViewData with the data you want to display in the ListView. You can either use the Changemodel directly or apply any filtering or transformation you need for displaying the data in the ListView.
// Fetch data for ListView, you can use the same data or apply filtering based on your requirements.
ListViewData = Changemodel;
Bind ListView Data: In the Razor markup, bind the ListViewData to the Data parameter of the TelerikListView.
Handle Null Model during Insert: In the insert process, when the model is null, make sure to create a new instance of ChangeModel and add it to the Changemodel collection. This way, you have an item to display in the ListView.
// For insert, handle null model by adding a new instance to the Changemodel collection.
model = await PlanningService.GetFormAsync(0); // in case id is zero, getting null model
if (model == null)
{
ChangeModel newModel = new ChangeModel(); // Create a new instance of ChangeModel
Changemodel = new List { newModel }; // Add it to the collection
}
else
{
Changemodel = new List { model };
}
// Set the ListViewData to the updated Changemodel.
ListViewData = Changemodel;
By following these steps, you should be able to display the ListView with the newly added item during the insert process when the model is null. Additionally, you can handle updates normally, as you are doing with model = await Planning.GetFormAsync(51); .

Bineesh Viswanath · Answer

Brahma Prakash Shukla,
Thank  you for valuable suggestions
I found most of the cause for the issue. I am using same class object for both insert and update process.
public IEnumerable Changemodel { get; set; } = new List ();
above is the object i am passing to data parameter of listview. during update process, all going normally since the object has data
public TelerikListView InspectionListView { get; set; }
above one i passing to the ref parameter of blazor page.
below is the code using for insert purpose
first, I calling one method i using for update process to get id based data.
1) model = await Planning.GetFormAsync(51);// if i pass id data fetched to model object and form showing
2) changemodel = Changemodel.FirstOrDefault();
point 1 and 2 working fine. below is the code i want to make it work. since the model is null, listview not displaying
model = await PlanningService.GetFormAsync(0);// in case id is zero, getting null model
changemodel = Changemodel.FirstOrDefault();

Brahma Prakash Shukla · Answer

In your Blazor project, if the Telerik ListView component is not displaying when the data source is null, you can try the following approach to handle this issue.
First, ensure that you have the necessary Telerik UI for Blazor dependencies installed in your project. You can use the Telerik NuGet packages and include the required CSS and JS files.
To handle the scenario where the data source is null and the Telerik ListView is not displaying, you can use conditional rendering in your Blazor component. Here's an example:
@if (Contractors != null)
{
}
else
{
No data available.
}
In this example, the @if directive checks if the Contractors data source is null. If it's not null, the Telerik ListView component with its associated controls and bindings will be rendered. Otherwise, a simple message or placeholder can be displayed to indicate that there is no data available.
Make sure to adjust the code based on your specific implementation, including the property names, data sources, and control bindings.
By using conditional rendering, you can control when the Telerik ListView component should be displayed based on the availability of data in the data source.