Scrolling in ASP.NET CORE ListView Control

11 Feb 20258 minutes to read

Scrolling is a technique that allows you to load more items as the user scrolls through a list, providing a seamless and dynamic user experience.

Render the ListView with dataSource, and bind the scroll event. Within the scroll event, you can access information such as the scroll direction, event name and the distance from the scrollbar to the top and bottom ends through the distanceY parameter.

In the given example, new data is seamlessly added while scrolling. When you scrolls to the bottom and the distance scrolled is less than 100 pixels, it dynamically loads a batch of items into the list as long as there are more items to render.

CSHTML

<div class="control-section">
    <div class="grid-container">
        <div>
            <h3>Chat</h3>
            <!-- ListView element -->
            <ejs-listview id="listview" dataSource="initialData" height="320" width="400" cssClass='e-list-template' template="@template" scroll="onListScrolled">
    </ejs-listview>
        </div>
    </div>
</div>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
        align-items: center;
    }

    h3 {
        margin: 0;
    }

    /* Optional: Add styling to headings and divs */
    .grid-container > div {
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 5px;
        background-color: #f4f4f4;
    }

    .e-listview{
        background-color: white;
    }
    </style>
<script>
    function onListScrolled(args) {
        var listObj_1 = document.getElementById('listview').ej2_instances[0];
        var data = listObj_1.dataSource;
        var itemsPerScroll = 5;
        var result = [];        
        if (args.scrollDirection === 'Bottom') {
            if (args.distanceY < 100) {
                if (initialData < data.length) {
                    var startIndex = initialData;
                    var endIndex = Math.min(initialData + itemsPerScroll, data.length);
                    result = data.slice(startIndex, endIndex);
                    listObj_1.addItem(result);
                    initialData = endIndex;
                }
            }
        }
    }
</script>

ListController.cs

public class ListViewController : Controller
{
    public IActionResult List()
    {
        List<object> listdata = new List<object>();
        listdata.Add(new
    {
        text= "Hi Guys, Good morning! \uD83D\uDE0A, I'm very delighted to share with you the news that our team is going to launch a new mobile application",
        positionClass= "right"
    });
    listdata.Add(new
    {
        text= "Oh! That's great \uD83D\uDE42",
        positionClass= "left"
    });
    listdata.Add(new
    {
        text= "That is a good news \uD83D\uDE00",
        positionClass= "right"
    });
    listdata.Add(new
    {
        text="What kind of application we are gonna launch? \uD83E\uDD14",
        positionClass= "left"
    });
    listdata.Add(new
    {
        text= "A kind of 'Emergency Broadcast App' like being able to just invite someone to teams without it impacting how many people have official access",
        positionClass= "right"
    });
    listdata.Add(new
        {
        text= "Who will be the client users for our applications? ",
        positionClass= "left"
        });
    listdata.Add(new
        {
        text= "Is currently the only way to invite someone through 0365? Just wondering down the road how organization would want to handle that with freelancers, like being able to just invite someone to teams without it impacting how many people have official access \uD83D\uDE14",
        positionClass= "right"
        });
    listdata.Add(new
        {
        text= "Yes, however, that feature of inviting someone from outside your organization is planned - expected closer to GA next year \uD83D\uDC4D",
        positionClass= "left",
        });
    listdata.Add(new
        {
        text= "I guess we should switch things over to hear for a while. How long does the trial last? \uD83E\uDD14",
        positionClass= "right",
        });
    listdata.Add(new
        {
        text = "I think the trial is 30 days. \uD83D\uDE03",
        positionClass = "left"
        });
    listdata.Add(new
        {
        text = "Only 0365 only members of your organization. They said that they are listening to customer feedback and hinted that guest users would be brought in down the road \uD83D\uDE09",
        positionClass = "right"
        });
    listdata.Add(new
        {
        text = "Cool thanks! \uD83D\uDC4C",
        positionClass = "left"
        });
        var initialData = listdata.Take(5).ToList();
        ViewBag.dataSource = initialData;
        return View();
    }
}

Output be like the below.