Empty template

Your solution  ListView Display Message when empty does not resolve CustomDataAdapter.

Would you please add EmptyTemplate to the ListView?


<SfListView @ref="_scheduleList" TValue="Schedule" Query="Query" CssClass="e-list-template" Width="100%" SortOrder="Syncfusion.Blazor.Lists.SortOrder.Descending">

    <SfDataManager AdaptorInstance="@typeof(ScheduleDataAdapter)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

    <ListViewEvents TValue="Schedule" Clicked="@OnScheduleClicked" />

    <ListViewFieldSettings TValue="Schedule" Id="Id" Text="Subject"></ListViewFieldSettings>

    <ListViewTemplates TValue="Schedule">

        <Template>

            <ScheduleCard Content="@(context as Schedule)" TimeZoneId="@TimeZoneId" />

        </Template>

        <EmptyTemplate>

            <span>List is empty.</span>

        </EmptyTemplate>

    </ListViewTemplates>

</SfListView>


1 Reply

SJ Saravanan Jayavel Syncfusion Team June 10, 2025 05:44 AM UTC

Hi Yongkee Cho,


Thank you for reaching out.


We understand that you'd like to display a message when the ListView has no data. While the Syncfusion Blazor ListView component currently doesn't have built-in support for an EmptyTemplate property, we suggest a simple workaround using the OnActionComplete event.


You can check the Count property within this event and display a message like “No records found” when the data source is empty. Here's a quick example:


Refer the code snippet below.


@if (msg == 0)

{

    <div>No records found</div>

}

 

<SfListView HeaderTitle="Products" ShowHeader="true" TValue="Data" Query="@query">

    <ListViewEvents TValue="Data" OnActionComplete="complete"></ListViewEvents>

    <ListViewFieldSettings TValue="Data" Id="ProductID" Text="ProductName"></ListViewFieldSettings>

    <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>

</SfListView>

 

@code {

    public double msg;

 

    public static List<string> column = new List<string>()

    {

        "ProductID","ProductName"

    };

    Query query = new Query().From("Products").Select(column).Take(6);

    public class Data

    {

        public string ProductID { get; set; }

        public string ProductName { get; set; }

    }

 

   public void complete(ActionEventsArgs args)

    {

        msg = args.Count;

    }

}


For your reference we attached a sample.

Sample : Attached as a zip file.


Checkout the sample and let us know if you need any further assistance.

Regards,

Saravanan J


Attachment: ListView174585413_258fb5d9.zip

Loader.
Up arrow icon