September 2013 - Posts

ASP.NET Core Bootstrap - Insert Control Wizard (v18.1)

With the v18.1 release, we've added a helpful wizard for Visual Studio that makes working with the DevExpress ASP.NET Core Bootstrap controls easier. Let's take a look.

Insert DevExpress Bootstrap Core Control

The Insert Bootstrap Core Wizard helps by adding a fully functional DevExpress ASP.NET Core control to your project. It generates the code for you which saves you time. Any of the DevExpress Bootstrap for ASP.NET Core controls can be used.

To invoke the wizard in Visual Studio, right-click the design area of a view and select the 'Insert DevExpress Bootstrap Core Control' option:

Then from the dialog, select and customize the Bootstrap control you'd like to add to your view and click Insert:

Now the wizard will generate the necessary code and insert it into your View at the cursor position.

Take a look at this video that shows how to add a DevExpress Bootstrap Grid for ASP.NET Core using this new wizard:

Like it?

We'd love to hear your feedback about the new 'Insert DevExpress Bootstrap Core Control' wizard. Drop me a line below, thanks.


Twitter: @mehulharry

ASP.NET Core & WebForms Bootstrap - New Scheduler Control (v18.1)

With the v18.1 release, we've added the powerful Scheduler control for both Bootstrap versions of our controls: ASP.NET Core and WebForms.

This new Scheduler controls is packed with several major features, let's take a look.

Various view types

The Bootstrap Scheduler control has several types of view that provide different arrangements and formats for scheduling and viewing appointments:


The DayView enables end-users to schedule and view user events by day.



The AgendaView enables end-users to list appointments by day.


Full Week

The FullWeekView enables end-users to schedule and view user events for the entire week.


Work Week

The WorkWeekView enables end-users to schedule and view user events by the working week (Saturdays and Sundays are not displayed).


Time Line

The TimelineView displays appointments as horizontal bars along the timescales and provides end-users with a clearer overview for scheduling purposes.



The MonthView enables end-users to schedule and view the user events in a month.



The appointments within the current view can be grouped by dates or resources to facilitate an appointments management.

Group by resources

Appointments are grouped by resources.


Group by dates

Appointments are grouped by dates.


No Group by

Appointments with out any grouping.


Edit Form Customization

The Bootstrap Scheduler provides a ViewModel-driven customization API. This allows to remove, replace, or modify existing form parts or add a new UI parts to the edit forms without re-creating the entire form from scratch.

It provides API methods like: GenerateDefaultLayoutElements, InsertBefore, InsertAfter, FindLayoutElement, and more that allow you to modify the existing layout with ease.

For example:

// generates default layout elements to work with
var resourceContainerGroup = dialog.LayoutElements.CreateGroup("resourceContainer", (g) => {
   g.LayoutElements.CreateGroup("resourceGroup", (resourceGroup) => { resourceGroup.LayoutElements.Add(dialog.FindLayoutElement("ResourceIds"));
   // moves existing ResourceIds to the created group
   g.LayoutElements.CreateGroup("resourceDetailGroup", (detailGroup) => {
      detailGroup.LayoutElements.CreateField(m => m.Phone);
      detailGroup.LayoutElements.CreateField(m => m.Photo);
dialog.InsertAfter(resourceContainerGroup, dialog.FindLayoutElement("StatusKey"));// inserts group before existing layout element



Scheduler provides a capability to create reminders. Reminders are used to send alerts at specified time periods before an appointment's start time.

Standalone controls

Some parts of the Bootstrap Scheduler control's UI are available as standalone controls, which can be used side by side with the scheduler control.

Here is the list of standalone controls and check out their demos:

  • BootstrapSchedulerDateNavigator -Demo
  • BootstrapSchedulerResourceNavigator - Demo
  • BootstrapSchedulerViewNavigator - Demo
  • BootstrapSchedulerViewSelector - Demo

Adaptive layout

Last, but not least, the Bootstrap Scheduler provides adaptive features out-of-the-box! That means looks great on desktop and mobile browsers!

Like it?

We'd love to hear your feedback about the new Bootstrap Scheduler control. Drop me a line below, thanks.


Twitter: @mehulharry

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.


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



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.


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.


Column Resizing

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


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


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


Like it?

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


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.


Test drive these improvements online here:


What do you love about these features of the DevExpress ASP.NET List Editor controls? Drop me a line below.



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".


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


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.



Twitter: @mehulharry

More Posts