May 2013 - Posts

ASP.NET Core Bootstrap - GridView Control Enhancements (v18.1)

With the v18.1 release, we've added several major features to the DevExpress Bootstrap GridView control for ASP.NET Core. Let's take a look.

Server Mode - Binding to Large Datasets

The Bootstrap Grid View control now supports data binding in server mode. In this mode, the Grid View loads only the minimum amount of data required for display purposes and delegates all data processing (such as grouping and sorting) to the database server.

Demo

Batch Editing

Our ASP.NET Core Bootstrap Grid View control supports data editing in batch mode. Batch modifications allow you to eliminate unnecessary server updates (visual, re-sorting, selection updates, etc.) and speed up grid performance. You update the grid once, after all necessary changes have been made on a client.

ASP.NET Core Bootstrap GridView - Batch Editing | DevExpress

Demo

Bands

With this release, our Bootstrap Grid View control supports column header and data cell bands.

  • Column Header bands allow yo to arrange column headers across multiple rows.
  • Data cell bands allow you to create banded data row layouts allowing cells to occupy multiple rows.

Demo

Cell Merging

Much like Microsoft Excel, the Grid's cell merging option allows you to improve usability by avoiding the duplication of common information. Neighboring data cells across different rows can be merged whenever they display matching values.

Demo

Column Resizing

End-users can now resize grid columns by dragging a column header's border.

Demo

Merged Column Grouping

Our ASP.NET Bootstrap GridView now includes a 'Merge Column Groups' mode. In this mode, you can merge grouped columns by dragging the appropriate column header(s) to the group panel and arrange them across a line.

ASP.NET Core Bootstrap GridView - Merged Column Grouping | DevExpress

Demo

Header Filter - Instant Find

v18.1 introduces a simple and quick way to find column filter values. The Find Panel allows users to enter a search string and initiate a search against all filter values displayed in the header dropdown.

ASP.NET Core Bootstrap GridView Control - Header Instant Find | DevExpress

Demo

Like it?

We'd love to hear your feedback about the Bootstrap GridView for ASP.NET Core improvements. Drop me a line below, thanks.


Email: mharry@devexpress.com

Twitter: @mehulharry

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

ASP.NET & MVC - Scheduler Enhancements (v18.1)

With our latest release, we have introduced several new features for the DevExpress ASP.NET Scheduler control. These features are available for both the ASP.NET WebForms and ASP.NET MVC versions of the Scheduler.

Standalone Storage Control

The DevExpress ASP.NET Scheduler is a big control that provides several great features and a beautiful user interface (UI). We got some great feedback from you, our customers, who shared with us scenarios of using the Scheduler's features without the UI.

Therefore, we're now providing a new control that helps you to use the Scheduler's functionality without using the Scheduler's UI.

v18.1 ships with a new SchedulerStorageControl. This is a non-visual component that provides nearly the same functionality as our ASP.NET Scheduler. It also allows you to integrate all scheduler-based data operations using third-party web controls.

This stand-alone control allows you to do things like:

  • Display and edit appointments using a custom UI
  • Show reminder notifications without the full scheduler (lighter render)
  • Bind Date Navigator to a Storage Control

The new SchedulerStorageControl also provides a Client-side API to:

  • retrieve the resources data
  • CRUD operations for appointments
  • manage reminders

The Server-side API is the same as the scheduler control.

Demo  Documentation

Resource Navigator - Tokens

Our Resource Navigator ships with a new navigation mode. In this mode, all available resources are displayed as tokens. End-users can display or hide resources by adding or removing corresponding tokens.

This allows your end-users to select individual resources to be displayed in the scheduler view. They can also Search for a resource by name.

This feature is also great for mobile-users to quickly tap on resources they'd like to filter by.

To enable this feature set the ResourceNavigatorProperties.Mode property to "Tokens".

Demo

Date Navigator: New Highlight Modes

Our Date Navigator has added two new modes to highlight dates with appointments. Now there are three highlight modes available in the Scheduler:

  • Bold - date is displayed in bold text
  • Labels - small colored bricks representing appointments
  • Custom - allows you to define custom highlighting logic

Demo

Month View Adaptivity

The Scheduler's Month View now supports an adaptive display mode. All appointments are transformed to a more compact view on smaller screens.

In fact, we've also improved the appointment rendering for small screens. Previously, appointments often were not even shown due to the lack of space. Now with this latest release, we render more compact appointments and date headers.

Give Us Your Feedback

Which ASP.NET Scheduler enhancement is your favorite? Drop me a line below.

Thanks!


Email: mharry@devexpress.com

Twitter: @mehulharry

ASP.NET & MVC - Grid Performance Enhancements (v18.1)

With the v18.1 release, we have improved performance of the DevExpress ASP.NET GridView control's adaptive mode. In fact, these enhancements are available for both ASP.NET WebForms and MVC.

Using new internal algorithms, we've significantly improved the layout recalculation logic of the ASP.NET and MVC Grid View in adaptive mode. The control's client Initialization is now up to 6 to 18 times faster when compared to earlier versions.

Adaptive Mode

The DevExpress ASP.NET & MVC GridView controls allow you to build adaptive or responsive page layouts with ease. The grid can automatically resize or hide grid data when the browser window is resized. The layout behavior can be customized by using the SettingsAdaptivity property.

This feature is great for your end-users who view your website from mobile devices.

Performance

Take a look at this animation to see the difference:

The previous version on the left is much slower to update than the improved current version on the right. Here's


GridView v17.2 GridView v18.1 Performance Efficiency
10 columns / 20 rows 1,668 ms 280 ms 6 times
30 columns / 100 rows 52,936 ms 2,817 ms 18 times

Demos

Test drive the online demos on your devices today:

Thanks!


Email: mharry@devexpress.com

Twitter: @mehulharry

ASP.NET Bootstrap - GridView Enhancements (v18.1)

With our latest release, we introduce several major features for the DevExpress ASP.NET Bootstrap GridView control.

We offer two versions of ASP.NET controls that are built specifically for the Bootstrap framework: ASP.NET WebForms and ASP.NET Core. The features below apply to the ASP.NET WebForms version of our Bootstrap GridView control. Let's take a look.

Bands

Our Bootstrap Grid View control now supports the popular column header and data cell bands feature.

  • Column Header bands allow you to arrange column headers across multiple rows.
  • Data cell bands allow you to create banded data row layouts allowing cells to occupy multiple rows.

ASP.NET Bootstrap GridView Control - Bands

Demo

Cell Merging

Much like Microsoft Excel, the Grid's cell merging option allows you to improve usability by avoiding the duplication of common information. Neighboring data cells across different rows can be merged whenever they display matching values.

You can manage visibility of the Cell merging feature by using the SettingsBehavior.AllowCellMerge and GridViewDataColumnSettings.AllowCellMerge properties.

ASP.NET Bootstrap GridView Control - Cell Merging

Demo

Column Resizing

End-users can now resize grid columns by dragging a column header's border. Take a look at the SettingsResizing property to see the options related to column resizing.

ASP.NET Bootstrap GridView Control - Column Resizing

Demo

Merged Column Grouping

Our ASP.NET Bootstrap GridView now includes a 'Merge Column Groups' mode. In this mode, you can merge grouped columns by dragging the appropriate column header(s) to the group panel and arrange them across a line.

Merged grouping can be controlled by using the SettingsBehavior.MergeGroupsMode property.

ASP.NET Bootstrap GridView - Merged Column Grouping | DevExpress

Demo

Header Filter - Instant Find

v18.1 introduces a simple and quick way to find column filter values. The Find Panel is enabled by default and allows users to enter a search string and initiate a search against all filter values displayed in the header drop-down.

Control the Find Panel's visibility by using the Settings.ShowHeaderFilterListBoxSearchUI and DataColumn.SettingsHeaderFilter.ListBoxSearchUISettings.Visibility properties.

ASP.NET Bootstrap GridView Control - Header Instant Find | DevExpress

Give Us Your Feedback

How are you using the DevExpress ASP.NET Bootstrap GridView control? Drop me a line below.

Thanks!


Email: mharry@devexpress.com

Twitter: @mehulharry

More Posts