Demos About Radzen
Search Results for

    Show / Hide Table of Contents

    DataList component

    This article demonstrates how to use the DataList component.

    Data-binding

    To display data in DataList component you need to set collection of items (IEnumerable<>) to Data property. DataGrid component can perform server-side paging when bound to IQueryable or using LoadData event.

    Populate data when initialized

    @inject NorthwindContext dbContext
    
    <RadzenDataList WrapItems="true" AllowPaging="true" Data="@orders" TItem="Order">
        <Template Context="order">
            <div>Company:</div>
            <b>@order.Customer?.CompanyName</b>
        </Template>
    </RadzenDataList>
    
    @code {
        IEnumerable<Order> orders;
    
        protected override void OnInitialized()
        {
            orders = dbContext.Orders.Include("Customer").Include("Employee").ToList();
        }
    }
    

    Populate data on demand using LoadData event.

    @using System.Linq.Dynamic.Core
    @inject NorthwindContext dbContext
    
    <RadzenDataList WrapItems="true" AllowPaging="true" Data="@orders" Count="@count" TItem="Order" LoadData="@LoadData">
        <Template Context="order">
            <div>Company:</div>
            <b>@order.Customer?.CompanyName</b>
        </Template>
    </RadzenDataList>
    
    @code {
        IEnumerable<Customer> customers;
        int count;
    
        void LoadData(LoadDataArgs args)
        {
            // This demo is using https://dynamic-linq.net
            var query = dbContext.Customers.AsQueryable();
    
            count = query.Count();
    
            // Perform paging via Skip and Take.
            customers = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();
        }
    }
    

    Boost your Blazor development with Radzen

    Radzen is a desktop tool that gives you the power to create line of business applications. Build and launch Blazor apps visually, while we generate clean code for you.

    Learn More

    Download Radzen
    Download Radzen
    In This Article
    Back to top Radzen Blazor Components, © 2018-2022 Radzen. Source Code licensed under MIT