Search results

Virtualization in ASP.NET Core ListView control

20 Apr 2021 / 2 minutes to read

UI virtualization loads only viewable list items in a view port, which will improve the ListView performance while loading a large number of data.

Getting started

UI virtualization can be enabled in the ListView by setting the enableVirtualization property to true.

It has two types of scrollers as follows:

Window scroll: This scroller is used in the ListView by default.

Container scroll: This scroller is used, when the height property of the ListView is set.

tagHelper
ListController.cs
Copied to clipboard
<ejs-listview id="ui-list" dataSource="ViewBag.listData" enableVirtualization="true" height="500" >
    </ejs-listview>

<style>
    #ui-list {
    display: block;
    max-width: 400px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
    cursor: pointer;
}
</style>
Copied to clipboard
public class ListViewController : Controller
{
    public IActionResult List()
    {
        List<object> listData = new List<object>();
        listData.Add(new { text = "Nancy", id = "0" });
        listData.Add(new { text = "Andrew", id = "1" });
        listData.Add(new { text = "Janet", id = "2" });
        listData.Add(new { text = "Margaret", id = "3" });
        listData.Add(new { text = "Steven", id = "4" });
        listData.Add(new { text = "Laura", id = "5" });
        listData.Add(new { text = "Robert", id = "6" });
        listData.Add(new { text = "Michael", id = "7" });
        listData.Add(new { text = "Albert", id = "8" });
        listData.Add(new { text = "Nolan", id = "9" });


            for (int i = 10; i < 1000; i++)
            {
                int index = new Random().Next(0, 10);
                listData.Add(new
                {
                    text = listData[index].GetType().GetProperty("text").GetValue(listData[index], null).ToString(),
                    id = i.ToString()
                });
            }

        ViewBag.listData = listData;
        return View();
    }
}

Output be like the below.

ASP .NET Core ListView - Virtualization

We can use template property to customize list items in UI virtualization.

tagHelper
ListController.cs
Copied to clipboard
@{ var template = "<div class='list-container'><div id='icon' class=\"${$imgUrl ? \'img\' : $icon }\">" +
           "<span class=\"${$imgUrl ? \'hideUI\' : \'showUI\' }\">" +
           "${icon}</span> <img class=\"${$imgUrl ? \'showUI\' : \'hideUI\' }\" width = 45 height = 45 src=\"${$imgUrl ?  $imgUrl : \' \' }\" />" +
           "</div><div class='text'>${text}</div></div>";
    }
    <ejs-listview id="ui-list" dataSource="ViewBag.listData" enableVirtualization="true" showHeader="true" headerTitle="Contacts" height=500 template=@template >
    </ejs-listview>

<style>
    #ui-list {
    display: block;
    max-width: 400px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
    cursor: pointer;
}

button {
    float: right
}

#icon {
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 500;
    float: left;
    margin-top: 17px;
    margin-right: 35px;
}

img {
    border-radius: 50%;
    border: #ddd;
    border: 1px solid rgba(40, 40, 40, 0.12);
}

.R {
    background: purple;
}

.M {
    background: pink;
}

.A {
    background: green;
}

.S {
    background: lightskyblue;
}

.J {
    background: orange;
}

.N {
    background: blue;
}

#ui-list .e-list-item {
    height: 80px;
    border: #ddd;
    border: 1px solid rgba(184, 184, 184, 0.12);
}

.list-container {
    width: inherit;
    height: 100%;

}

.showUI {
    display: inline;
}

.hideUI {
    display: none;
}

.content {
    height: 100%;
    float: left;
}

.name {
    height: 100%;
    font-size: 20px;
    font-weight: 600;
    line-height: 78px;
}
</style>
Copied to clipboard
public class ListViewController : Controller
{
    public IActionResult List()
    {
        List<object> listData = new List<object>();
        listData.Add(new { text = "Nancy", imgUrl = "", icon = "N", id = "0" });
        listData.Add(new { text = "Andrew", imgUrl = "", icon = "A", id = "1" });
        listData.Add(new { text = "Janet", imgUrl = "", icon = "J", id = "2" });
        listData.Add(new { text = "Margaret", icon = "", imgUrl = "./margaret.png", id = "3" });
        listData.Add(new { text = "Steven", imgUrl = "", icon = "S", id = "4" });
        listData.Add(new { text = "Laura", icon = "", imgUrl = "./images/laura.png", id = "5" });
        listData.Add(new { text = "Robert", imgUrl = "", icon = "R", id = "6" });
        listData.Add(new { text = "Michael", imgUrl = "", icon = "M", id = "7" });
        listData.Add(new { text = "Albert", icon = "", imgUrl = "./images/albert.png", id = "8" });
        listData.Add(new { text = "Nolan", imgUrl = "", icon = "N", id = "9" });


            for (int i = 10; i < 1000; i++)
            {
                int index = new Random().Next(0, 10);
                listData.Add(new
                {
                    text = listData[index].GetType().GetProperty("text").GetValue(listData[index], null).ToString(),
                    icon = listData[index].GetType().GetProperty("icon").GetValue(listData[index], null).ToString(),
                    imgUrl = listData[index].GetType().GetProperty("imgUrl").GetValue(listData[index], null).ToString(),
                    id = i.ToString()
                });
            }

        ViewBag.listData = listData;
        return View();
    }
}

Output be like the below.

ASP .NET Core ListView - Virtualization Template

Conditional rendering

The following conditional rendering support is provided for the template and groupTemplate.

Name Syntax
conditional class <div class="${ $id % 2 === 0 ? 'even-list' : 'odd-list'}"></div>
conditional attribute <div id="${ $id % 2 === 0 ? 'even-list' : 'odd-list'}"></div>
conditional text content <div>${ $id % 2 === 0 ? 'even-list' : 'odd-list'}</div>

In the following sample, the light blue is applied for the even list and light coral is applied for the odd list based on the conditional class.

tagHelper
ListController.cs
Copied to clipboard
@{ var template = "<div id='list-container' class=\"${ $id % 2 === 0 ? \'even-list\' : \'odd-list\' }\" > ${text} </div>"; }

    <ejs-listview id="ui-list" dataSource="ViewBag.listData" enableVirtualization="true" height=500 template=@template >
    </ejs-listview>

<style>
     #ui-list {
    display: block;
    max-width: 400px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
    cursor: pointer;
}

#list-container{
    height: inherit;
    width: inherit;
    padding-left: 30px;
}

#ui-list .e-list-item{
    padding: 0;
}

#ui-list .even-list{
    background-color: #cfd8dc;
}

#ui-list .odd-list{
    background-color: #eceff1;
}
</style>
Copied to clipboard
public class ListViewController : Controller
{
    public IActionResult List()
    {
        List<object> listData = new List<object>();
        listData.Add(new { text  = "Nancy", id = "0" });
        listData.Add(new { text  = "Andrew", id = "1" });
        listData.Add(new { text  = "Janet", id = "2" });
        listData.Add(new { text  = "Margaret", id = "3" });
        listData.Add(new { text  = "Steven", id = "4" });
        listData.Add(new { text = "Laura", id = "5" });
        listData.Add(new { text = "Robert", id = "6" });
        listData.Add(new { text = "Michael", id = "7" });
        listData.Add(new { text = "Albert", id = "8" });
        listData.Add(new { text = "Nolan", id = "9" });


            for (int i = 10; i < 1000; i++)
            {
                int index = new Random().Next(0, 10);
                listData.Add(new
                {
                    text = listData[index].GetType().GetProperty("text").GetValue(listData[index], null).ToString(),
                    id = i.ToString()
                });
            }

        ViewBag.listData = listData;
        return View();
    }
}

Output be like the below.

ASP .NET Core ListView - Virtualization Conditional