January 2016 - Posts

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

ASP.NET Core Bootstrap - New Controls (v18.1)

With our latest release, we have introduced several new controls for the DevExpress ASP.NET Bootstrap controls for ASP.NET Core.

These controls are fantastic because they support Bootstrap out-of-the-box and can be run from multiple platforms (MacOS, Linux, & Windows)! Let's take a look.

New ASP.NET Core Bootstrap CardView Control

ASP.NET Core Bootstrap CardView Control

v18.1 ships with our new ASP.NET Card View control for Bootstrap Core. Its features include:

ASP.NET Core Bootstrap CardView Control

Demo

New ASP.NET Core Bootstrap Scheduler Control

v18.1 ships with our new ASP.NET Bootstrap Scheduler control. Its features include:

ASP.NET Core Bootstrap Scheduler Control | DevExpress

Demo

New ASP.NET Core Bootstrap FormLayout Control

Our new Bootstrap ASP.NET Core Form Layout Control allows you to eliminate the restrictions and time consuming limits associated with pixel-based form design.

The Form Layout control supports data binding. You simply bind the Form Layout control to a data source and specify which fields are to be displayed. It is also adaptive, which it makes it possible to use on any device:

ASP.NET Core Bootstrap FormLayout Control | DevExpress

Demo

New ASP.NET Core Bootstrap Sparkline Control

The DevExpress Bootstrap Sparkline control allows you to display a single series chart within containers such as our Grid control. Its features include:

Demo

ASP.NET Core Bootstrap Data Editors

ASP.NET Core Bootstrap Upload Control

The DevExpress Bootstrap Upload Control allows end-users to upload files to the server via the browser. End-users can select a file by invoking the standard Open File dialog or by dragging the file to the Upload control.

Demo

ASP.NET Core Bootstrap TagBox

Our Bootstrap Tag Box control allows users to select values from a drop-down list or to enter them manually.

ASP.NET Core Bootstrap TagBox | DevExpress

Demo

ASP.NET Core Bootstrap Time Editor

The DevExpress Bootstrap Time Edit control allows you to display and edit date-time values. End-users can modify values by typing directly into the edit box or clicking spin buttons to increment or decrement months, days, hours, minutes or seconds.

ASP.NET Core Bootstrap Time Editor | DevExpress

Demo

Navigation

New ASP.NET Core Bootstrap Toolbar

The ASP.NET Core Bootstrap Toolbar Control allows you to supply your web application with a lightweight adaptive toolbar interface. A toolbar is presented as a set of buttons arranged across groups.

Demo

ASP.NET Core Bootstrap Popup Menu

The DevExpress ASP.NET Core Bootstrap Popup Menu is a context sensitive menu that can be associated with a control on a web page.

Demo

Like it?

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


Email: mharry@devexpress.com

Twitter: @mehulharry

ASP.NET Bootstrap Core - CLI Templates for ASP.NET Core

The .NET Core command line interface (CLI) allows you to create new projects directly from the console.

We're introducing a set of CLI templates that you can use to create starter cross-platform projects with DevExpress ASP.NET Bootstrap and Dashboard Controls.

This means that you can create ASP.NET Core projects with DevExpress controls on your MacOS, Linux, or Windows consoles!

Install DevExpress CLI templates

Get started by first installing the DevExpress CLI templates. Type the following command in your console:

dotnet new -i "DevExpress.DotNet.Web.ProjectTemplates::\*"

When the template installation command is finished, it will display a list of installed templates on your machine:

You can also run the dotnet new --list command to see this list.

Create new projects

You are now ready to create an ASP.NET Core project with DevExpress controls. Since ASP.NET Core projects mainly use packages, you'll need to use our NuGet packages which are available via the DevExpress NuGet portal.

To get your NuGet feed, please refer to the https://nuget.devexpress.com/#feed-url page.

Note, our templates have one required parameter - feed-{url} (the refers to your personal DevExpress NuGet feed).

You'll need to specify this parameter for creating new projects. For example, if you want create a new project that uses the DevExpress Bootstrap Controls for ASP.NET Core then use the following command:

dotnet new dx.bootstrap -nuget-feed https://nuget.devexpress.com/{auth_key}/api

To create a project with our dashboard:

dotnet new dx.dashboard -nuget-feed https://nuget.devexpress.com/{auth_key}/api

Use -h flag to get a full list of the different parameters on our new CLI commands:

To see list of available functionality that manage of template parameters, use the -h flag:

dotnet new dx.bootstrap -h
 
dotnet new dx.dashboard -h

Take a look at this video that shows our CLI templates in action:

Learn more

Our new DevExpress CLI templates support ASP.NET Core v2.0 and higher.

Learn more about Microsoft ASP.NET Core CLI by following this getting started guide.

Give Us Your Feedback

What do you love about working with ASP.NET Core CLI templates? Drop me a line below.

Thanks!


Email: mharry@devexpress.com

Twitter: @mehulharry

ASP.NET & MVC - Rich Editor Control Enhancements (v18.1)

The DevExpress ASP.NET RichEditor is getting some useful end-user enhancements for the v18.1 release. Many of these features below came as a direct result of your (customer) feedback, so thank you. The features are available for both ASP.NET WebForms and MVC versions of the RichEdit too. Let's take a look...

Table of Contents

With this release, we've added support for interactive table of contents. End-users can now move to a specific position within a document instantly. Several types of tables are supported:

  • Table of Contents
  • Table of Figures
  • Table of Tables
  • Table of Equations

You can add/update tables and mark their entries using the Rich Editor's Ribbon UI. Our new API offers numerous options to manage interactive tables.

Test drive the online demo then take a look at the documentation to learn more.

AutoCorrect

Our ASP.NET Rich Text Editor also ships with an AutoCorrect feature that helps you to fix capitalization errors, create numeric lists, hyperlinks and emails, as well as automatically insert symbols and other pieces of text.

You can enable the built-in AutoCorrect feature using the following server-side properties:

  • CorrectTwoInitialCapitals - specifies whether the control should correct words that start with two capital letters by changing the second letter to lowercase
  • DetectUrls - specifies whether the control should detect URI strings and format them as hyperlinks
  • EnableAutomaticNumbering - specifies whether the control should automatically start numbered or bulleted lists when the specific symbols are typed
  • ReplaceTextAsYouType - specifies whether the control should search a replacement for the typed string in the AutoCorrectReplaceInfoCollection collection

Try out the online demo and learn more by reading documentation.

Table AutoFit

A Table in the RichEdit control can now automatically resize columns to fit to its content width or extend to the width of the document window:

Input Method Editor Support (IME)

We've also added support for your end-users to use an Input Method Editor (IME). An IME allows you to use a Latin-based keyboard to enter Japanese, Chinese, Korean, and Tigrinya symbols. The IME is enabled when an end-user switches the desktop key input to a supported language:

Stateless Mode

With our new stateless option, you can use the DevExpress ASP.NET RichEdit control in scalable environments (cloud, web farms, etc). Learn more about this new feature by reading this blog post.

Give Us Your Feedback

Are you excited by the DevExpress ASP.NET RichEdit's new features? Drop me a line below.

Thanks!


Email: mharry@devexpress.com

Twitter: @mehulharry

More Posts