Customize Each List Item’s Text in ListView Control

4 Mar 20254 minutes to read

To customize the text of each list item in the ListView control, you can make use of the HtmlAttributes property. This property allows you to specify HTML attributes and styles for individual items within the list, enabling you to create visually appealing and interactive lists tailored to your requirements.

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists

<div class="control-section">
    <div id="flat-list">
        <h4>Flat List</h4>
        <ejs-listview enable="true" id="listview" dataSource="@ViewBag.dataSource" cssClass="custom">
        </ejs-listview>
    </div>
</div>


<style>
    .custom.e-listview .e-list-item.e-high .e-text-content{
        color: red;
    }

    .custom.e-listview .e-list-item.e-moderate .e-text-content {
        color: yellow;
    }

    .custom.e-listview .e-list-item.e-normal .e-text-content {
        color: black;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ListViewController : Controller
    {
        public IActionResult list()
        {   
            List<object> data = new List<object>();
            data.Add(new { text = "Hennessey Venom", id = "list-01", htmlAttributes = new Dictionary<string, object>() { { "class", "e-high" } } });
            data.Add(new { text = "Bugatti Chiron", id = "list-02", htmlAttributes = new Dictionary<string, object>() { { "class", "e-moderate" } } });
            data.Add(new { text = "Bugatti Veyron Super Sport", id = "list-03", htmlAttributes = new Dictionary<string, object>() { { "class", "e-normal" } } });
            data.Add(new { text = "SSC Ultimate Aero", id = "list-04", htmlAttributes = new Dictionary<string, object>() { { "class", "e-moderate" } } });
            data.Add(new { text = "Koenigsegg CCR", id = "list-05", htmlAttributes = new Dictionary<string, object>() { { "class", "e-normal" } } });
            data.Add(new { text = "McLaren F1", id = "list-06", htmlAttributes = new Dictionary<string, object>() { { "class", "e-high" } } });
            data.Add(new { text = "Aston Martin One- 77", id = "list-07", htmlAttributes = new Dictionary<string, object>() { { "class", "e-moderate" } } });
            ViewBag.dataSource = data;
            return View();
        }       
    }
}