[Solved] Can the last page of records be programitacallyn deleted using JavaScript in RadListView?

[SUNIL]

This question relates to ASP.NET RadListView.

I have added records to a RadListView by using the following JavaScript: 

radListView.appendData(data.Data);

 

Everything is done using JavaScript for this RadListView. I now have a new requirement that requires me to remove all the records added during the last appendData call. How would I do this using JavaScript?

The RadListView is template-based and uses the template below.

<LayoutTemplate>
           <div id="items"></div>
           <div id="pagerContainer"></div>
</LayoutTemplate>
<ItemTemplate>
    <div class="recordContainer">
                <div class="subject">#=Subject#</div>
                <div class="message" >#=MessageText#</div>
                <div class="author">#=Author#</div>
    </div>
</ItemTemplate>

 

The way I was going to handle this situation was by keeping track of the number of data items added in the last appendData call. Let's say this number is 20. I would then find the last 20 DOM elements having a class of "recordContainer" and remove those DOM elements. The sample code in jQuery would be as mentioned below, which I haven't tried. However, you might be able to help me figure out a better way to do this, if there is one.

$("div#items div.recordContainer").slice(-20).remove();

[Vasko]

Hi Sunil,

I understand your scenario to remove only the last batch of items appended to your client-side RadListView using appendData, however, there is no built-in RadListView client-side API method dedicated to removing only the most recently appended records. Your idea of tracking the number of added items and removing the corresponding DOM elements is currently the most practical approach for this scenario.

RadListView’s client-side API does not provide a direct method for removing only the last batch of appended items. The available API methods (like set_dataSource([] and dataBind()) clear all items, not just the last batch. If you track the count of items added in the last appendData call, your jQuery code:

$("div#items div.recordContainer").slice(-20).remove();

will successfully remove the last 20 records from the DOM. This is a valid and efficient solution for your requirement.

As an alternative, you could consider maintaining a client-side array that mirrors the data shown in the RadListView. When you append new items, store them in this array. To remove the last batch:

1. Remove the last batch from your array.
2. Clear the RadListView (e.g., set_dataSource([]); dataBind();).
3. Re-append the updated array using appendData.

I hope this information helps you out.

Regards,
Vasko
Progress Telerik

[SUNIL]

If I follow your approach of storing data items in an array, then I could have performance issues with RadListView when appending 1000 data items, and it may also be an issue with storing 1000 data items in an array on the client-side.

The data size is about 15 KB when I receive a page with 40 data items. This equals 20 x 40 x 15 = 12,000 KB, or roughly 12 MB, if I have displayed 20 pages of data items. This seems like a lot of data in an array, but it could be fine considering the minimum RAM of normal laptops is 8 GB and for smartphones it's 4 GB.

[Vasko]

Hello Sunil,

Storing 12 MB in a client-side array is generally acceptable based on all modern browsers and devices (most laptops nowadays have minimum 8 GB RAM and smartphones with 4 GB RAM). As for rendering a large number of DOM elements at once may impact browser performance, especially on lower-end devices. Paging and lazy loading are recommended to keep the UI responsive. Browsers have their own memory management and limits, so it’s always best to test on your target devices and browsers.

For your use case, if you only need to remove the last batch and do not need to keep a synchronized data array, your DOM removal approach is efficient and sufficient. If you plan to support additional features like filtering, sorting, or re-binding, use a client-side array and manage all changes through it, updating the ListView as needed.

Regards,
Vasko
Progress Telerik