DevExpress ASP.NET, MVC, Bootstrap, & Core Editors - Performance Improvements & Custom Filtering (v18.1)

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:

  1. Create your own filter algorithm and override the default filter in either the client or server modes
  2. Implement custom highlighting logic
  3. Implement server-side custom filtering via Filter Expression using the Criteria Operator syntax
  4. Implement client-side custom filtering via custom code in the event handler (processing each item’s visibility separately)
  5. 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 :

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

No Comments

Please login or register to post comments.