October 2016 - Posts

Bootstrap ASP.NET WebForms - Layout Control Enhancements (v18.1)

Now that the DXperience v18.1 release is available, let's dive into the new features of our Bootstrap Form Layout control.

The DevExpress ASP.NET Bootstrap Form Layout control helps you to build efficient and adaptive form layouts using the Bootstrap grid system.

Layout Groups

Let's start with the new 'Layout Groups' and 'Tabbed Layout Groups'. These Layout Groups serve as containers for Layout Items and allow you to create well organized forms that look great.

Tabbed Login Form

For example, you can easily create a "Login and Register" tabbed form with the Bootstrap Form Layout control. All you need is one tabbed layout group in the control’s Items collection with two layout groups: 'Login' and 'Register'. These groups contain layout items (with editors) to input typical data that's required to login or register for a website. Here's the sample code outline:

<dx:BootstrapFormLayout runat="server" ID="BootstrapFormLayout1">
	<Items>
		<dx:BootstrapTabbedLayoutGroup>
			<Items>
				<dx:BootstrapLayoutGroup Caption="Login">
					<Items>
						...
					</Items>
				</dx:BootstrapLayoutGroup>
				<dx:BootstrapLayoutGroup Caption="Register">
					<Items>
						...
					</Items>
				</dx:BootstrapLayoutGroup>
			</Items>
		</dx:BootstrapTabbedLayoutGroup>
	</Items>
</dx:BootstrapFormLayout>

Adaptive

The Bootstrap Grid system provides classes for different screen sizes. The DevExpress Bootstrap controls help you to leverage these features of the Bootstrap Grid system.

To help you make your layouts more adaptive, some of the layout items support BootstrapLayoutItem.ColSpanXl / ColSpanLg / ColSpanMd / ColSpanSm / ColSpanXs properties. This allows you to define different values depending on the current screen resolution. For example, here the layout changes column count based on the width:

Non-tabbed

Non-tabbed layout groups are useful to visually separate and group a form's sections without using tabs.

Before the v18.1 release, you would need several Form Layout controls to create non-tabbed layout groups. Now, you can add the required groups or another layout group’s Items collection to the control:

<dx:BootstrapFormLayout runat="server" ID="BootstrapFormLayout1">
	<Items>
		<dx:BootstrapLayoutGroup Caption="Registration form">
			<Items>
				<dx:BootstrapLayoutGroup Caption="Authorization Data">
					<Items>
						...
					</Items>
				</dx:BootstrapLayoutGroup>
				<dx:BootstrapLayoutGroup Caption="Personal Data">
					<Items>
						...
					</Items>
				</dx:BootstrapLayoutGroup>
				<dx:BootstrapLayoutItem ColSpanXs="12">
					...
				</dx:BootstrapLayoutItem>
			</Items>
		</dx:BootstrapLayoutGroup>
	</Items>
</dx:BootstrapFormLayout>

Take a look at all of the new features of our Bootstrap Layout control here: ASP.NET Core & WebForms Bootstrap – Layout Control Enhancements (v18.1)

Like it?

We'd love to hear your feedback about the new features of the DevExpress ASP.NET Bootstrap control. Drop me a line below, thanks.


Email: mharry@devexpress.com

Twitter: @mehulharry

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.


Email: mharry@devexpress.com

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:

Day

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

Demo

Agenda

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

Demo

Full Week

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

Demo

Work Week

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

Demo

Time Line

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

Demo

Month

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

Demo

Grouping

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.

Demo

Group by dates

Appointments are grouped by dates.

Demo

No Group by

Appointments with out any grouping.

Demo

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
dialog.GenerateDefaultLayoutElements();
 
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

Demo

Reminders

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.


Email: mharry@devexpress.com

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.

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

More Posts