With the v18.1 release, we have added two major improvements for all DevExpress ASP.NET list-based controls: ListBox, ComboBox, and TokenBox.
- Improved performance
- Custom filtering
These improvements are available for all ASP.NET platforms: ASP.NET WebForms, MVC, Bootstrap, and ASP.NET Core Bootstrap. Let's take a look.
Performance - Client-Side Mode
Let's start with the problem: several customers reported issues with editors and large data sources. Therefore, binding the ListBox, ComboBox, or TokenBox to a data source with several thousands of records (or more). The performance gets worse when using multiple (large data) editors on the same page.
So I'm happy to report that we've solved these issues and dramatically increased performance. The list edit controls can now be used in client mode, therefore, you don't need to use callbacks (even for large number of items). Take a look at this animation to see the difference:
I've said it before and I'll say it again: I love it when our devs can squeeze out even more performance improvements from our controls.
Faster render
The improved performance of these editors can help speed up your websites. Take a look at these tables to see the difference with and without optimizations:
List Box Initialization
| No. of Items | Time, without optimization | Time, WITH optimization |
| 5,000 | 600 - 700 ms | 130- 180 ms |
| 50,000 | 7 - 8 sec | 700 - 900 ms |
| 500,000 | out of memory exception | 7 - 8 sec |
Combo Box Filtering
| No. of Items | Time, without optimization | Time, WITH optimization |
| 5,000 | 200 - 500 ms | 30- 60 ms |
| 50,000 | 60 sec | 200 - 600 ms |
| 500,000 | browser does not respond | 3 - 7 sec |
This results in lighter web pages that load faster and respond smoother:
Render-size Comparison
| Control | Version 17.2 | Version 18.1 |
| Combo Box (10, 000 items) | ~1 MB | ~350 KB |
| List Box (10, 000 items) | ~940 KB | ~370 KB |
| List Box w/CheckBoxes (10, 000 items) | ~4.2 MB | ~370 KB |
Custom Filtering
These editors also now support custom filtering which allows you to do several new filtering options:
- Create your own filter algorithm and override the default filter in either the client or server modes
- Implement custom highlighting logic
- Implement server-side custom filtering via Filter Expression using the
Criteria Operatorsyntax - Implement client-side custom filtering via custom code in the event handler (processing each item’s visibility separately)
- Added the new client API method which allows you to preset a filter:
SetText(string text, bool applyFilter)
Multi-Column Search
You can now also search by multiple terms and columns. For example, here we match the rows for the terms USA and re for any columns:
Accents & Umlauts Filtering
With the improvements in the customer filtering API, you can now create scenarios like accent/umlaut insensitive search.
This allows you to easily search for items that contain accents or umlauts without you having to enter those special characters. For example, by entering mu, the filter matches both Mu and Mü:
We've created a demo with the CustomFiltering event so you can see how to implement this in your projects.
Code Reuse - FTW
These features will also be included with the embedded list editors in our GridView, CardView, VerticalGrid, and TreeList controls. This code reuse allows the embedded controls to "bubble up" new features to the parent control too.
Demos
Test drive these improvements online here:
Feedback
What do you love about these features of the DevExpress ASP.NET List Editor controls? Drop me a line below.
Thanks!
Email: mharry@devexpress.com
Twitter: @mehulharry