Mehul Harry's DevExpress Blog

Check out these great getting-started tutorial videos for the DevExpress ASP.NET product suite.

Build and deploy in minutes

By watching these videos, you’ll learn the complete basics of how-to:

1. Create a new web project (with layout)
2. Drop a DevExpress ASP.NET control
3. Setup the control from the designer and the source view (Databind, Themes, & more)
4. Deploy the solution

And all of the major DevExpress ASP.NET controls are covered:

You will smile :-)

When you learn how easy it is to get started with DevExpress ASP.NET, you will smile because you’ll be ready to create and deploy fast, beautiful, and powerful ASP.NET web applications.

One of the biggest hurdles in adopting any new user interface technology is during the early phases when you may not be familiar enough with the library to even do the simplest of operations, like configuring the controls or databinding. So, myself, a few devs, and our excellent video production team have created the best set of “Getting started” videos in DevExpress history to help ease you into getting the most of our ASP.NET products.

Try it yourself

First, watch the videos. Then, try it for yourself in your Visual Studio with DevExpress installed. That is the best way to learn.

We’d love to hear your feedback so please let us know. Thanks!

Starting with the first major release for DXperience in 2013, you’ll be able to set null text for the DevExpress ASP.NET Combo box control.

What? What’s this NullText?

NullText is grayed out text inside of an editor that gives your website visitor a hint as to what they should or could input:

ASPx ComboBox NullText

Here’s the DevExpress ASP.NET Combo box control with the Null Text property set to "Start typing here…”:

To use this great little feature, simply set the NullText property on the control:

Or through the source code:

Define NullText

It may seem odd to call this feature Null Text,  instead of Hint Text, Default Text, or something else. But read this definition:

The NullText property value is displayed in the edit box when the editor's edit value is set to null or System.DBNull.Value.

Then you’ll realize:

1. Programmers were involved in this definition.
2. Programmers are never wrong.

Customize the filter row any way you choose with the DevExpress ASP.NET GridView in our first major release of DXperience for 2013.

New Filter Template

The DevExpress ASP.NET GridView has added a new template for the Filter Row. The Filter Row allows your end-users to filter the GridView easily and quickly. For example, in the grid image below, I’ve filtered it to find all the produce that has been discontinued:

Visual Studio Designer Support

When you’re configuring the DevExpress ASP.NET GridView in Visual Studio, you can use the smart tag and select "Edit Templates”. Then you’ll see the list of available templates for editing:

Once you select the “FilterTemplate”, the designer will allow you enter just about anything you want. That’s why ASP.NET Templates are so useful! In the grid below, I’ve added an Image and Text to the Filter Row for the Command Column. But I could enter just about anything else here like another control for filtering.

And the final result is a stunning grid with the exact output that I was looking for:

Source View Support

If you don’t like the designer, you can use the Source View too:

The Most Templates Evah!

The DevExpress ASP.NET GridView is incredibly versatile: it provides the largest set of templates for extending any ASP.NET Grid control.

Take a look for yourself by downloading a free trial: http://www.devexpress.com/Home/Try.xml

Part of 2013.1 Release

The DXperience v2013.1 release will be available to everyone in June 2013 from devexpress.com.

The first release of DXperience for 2013 is almost here! In June, you’ll get to try it in your own development.

And here’s one of the first major features that you’ll encounter in this v13.1 release:

Endless Paging

Endless paging? What's that? Simply put, it's the ability of the Grid or DataView control to automatically load new content as you scroll or page down though the data. Take a look this short YouTube video to learn more:

Mobile Touch Supported

This feature is especially great when you use the DevExpress ASP.NET GridView or DataView through a mobile browser like iPad’s Safari, Microsoft Surface’s IE10, or Google Chrome on Android tablets.

Touch events are supported by most DevExpress ASP.NET control for all 3 of the major vendor’s (Apple, Google, Microsoft) tablet devices.

Examples: Facebook, Twitter

Examples are all over the place on the social network sites: think of Facebook.com, or Twitter, or Pinterest, anywhere where there is a lot of data and you don't want to the halt the user experience by loading it all (even if it were possible or necessary).

Part of 2013.1 Release

June 2013, is when the DXperience v2013.1 release will be available to everyone via devexpress.com.

Use the DevExpress ASP.NET Upload control and you’ll automatically get the ability to upload pictures from your iOS or Android based smartphone. Here’s a walk through of how it work on an iPhone:

Upload using iPhone 5

1. Click browse on this demo and the following popup will be displayed:

2. Select a picture and click the “Upload” button and the file will start uploading to the Web Server:

3. Finally, the image will be displayed using the DevExpress ASP.NET Image control:

This works for iPad and Android devices too. Take a look below for some more screen shots:

Can I upload other types of files?

No because most smart phones don’t give access to their local file system. You could consider using a cloud approach:

1. Have the user upload to a cloud service.
2. Use the DevExpress ASP.NET File Manager control and create your own file system provider.
3. Then the ASP.NET File Manager can upload from the custom provider which interacts with your cloud storage API.

Please note that the File Manager control has an UI which is designed for larger screens like desktop monitors and mobile tablets. It’s not designed for phones.

Try It Now

Try it on your smart device now. Just go to this URL and click ‘browse’, select a picture, and click ‘Upload’:
http://demos.devexpress.com/ASPxperienceDemos/UploadControl/Example.aspx

Upload using iPad

Upload using Android Phone

How does it work?

On mobile devices, the DevExpress ASP.NET UploadControl can only work in the standard upload mode. In this mode, the DevExpress ASP.NET UploadControl uses an invisible file input (tag <input type="file" />) and IFrame elements.

The File input element allows the user to select files from the file system through the browser's open file dialog. And the IFrame element gives an ability to upload files asynchronously. When a file is selected and the user clicks the Upload button, a client instance of the UploadControl sends the current form data (with the selected file) by a postback request to the server through the hidden IFrame. The uploaded file is sent to the server in one request and is cached in its entirety in server memory. When file uploading starts, the client instance of the UploadControl sends AJAX-requests to the server in order to obtain information about the state of the progress. Such requests are made at intervals of one second.

The File input element (hence the UploadControl) is supported by the iOS platform since version 6. The DevExpress ASP.NET UploadControl supports the iOS and Android platforms since version v11.2.

Here’s 3 reasons why you should attend the DevExpress ASP.NET training from expert trainer, Oliver Strum.

1. You will love the course

Listen to what others have said about the course in the past:

Learn the in’s and out’s of the DevExpress ASP.NET product suite.

This class provides a complete in-depth look at the DevExpress DXperience ASP.NET suite of products. It takes you through the process of creating a business application, utilizing a typical combination of components throughout the product range. A high standard of knowledge will be achieved that allows you to write similar business applications on your own, and to fully understand the DevExpress suite of ASP.NET components. Advanced questions are encouraged and will be answered as much as time permits!

This class has 4 extra hours of time scheduled in the evenings, for a total of 2.5 course days!

Dates and Location:
May 23-24 2013 (2 Days)
DevExpress Offices
Los Angeles, CA, USA
Cost:
$1,499
Includes lunch
You are responsible for all travel related and lodging costs

View Course Overview (Syllabus)

2. DevExpress ASP.NET experts ready to help you

Ok, it’s mostly just myself and Oliver. But together, we’re like the wonder-twins. We form a powerful team of knowledge for ASP.NET and DevExpress products.

I can talk with you about DevExpress ASP.NET product plans, any feature ideas, or if you want to pick my brain about a particular issue, then I’d be happy to discuss it.

3. Visit beautiful Southern California

The DevExpress head quarters are located in beautiful Glendale, California. Close to downtown and Hollywood, there’s lots to see, eat and do here.

It’s warm, sunny, and great time to visit Glendale, California. While here, you can visit Hollywood, Disneyland, and a bunch of other fun places.

Register for the DevExpress ASP.NET training now. I hope to see you there.

A powerful way to filter the DevExpress ASP.NET MVC GridView is to use the “Like” operator with wildcards:

How to Enable

1. First, you’ll need to enable AutoFilterRow by setting the Settings.ShowFilterRow to true. The Header Filter (AutoFilterRow) to allow your end-users to filter the individual columns.

2. Then you’ll need to set the columns to support the “Like” filter condition. You can either set it explicitly on the column. This uses the “Like” operator as the default.

3. If you would like to give your end-users a choice then enable the Filter Row Menu using the ShowFilterRowMenu property. And be sure to also set the GridViewDataColumnSettings.ShowFilterRowMenuLikeItem property on the column.

Take a look at this code below which sets up the “Product Name” column to use the like operator:

@Html.DevExpress().GridView(
    settings =>
    {
        settings.Name = "gvFilterRow";
        settings.CallbackRouteValues = new { Controller = "GridView", Action = "FilterRowPartial" };
        settings.Width = Unit.Percentage(100);

        settings.Columns.Add(column => {
            column.FieldName = "ProductName";
            column.Settings.AutoFilterCondition = AutoFilterCondition.Like;
        });
        settings.Columns.Add(column => {
            column.FieldName = "CategoryID";
            column.Caption = "Category";

            column.ColumnType = MVCxGridViewColumnType.ComboBox;
            var comboBoxProperties = column.PropertiesEdit as ComboBoxProperties;
            comboBoxProperties.DataSource = NorthwindDataProvider.GetCategories();
            comboBoxProperties.TextField = "CategoryName";
            comboBoxProperties.ValueField = "CategoryID";
            comboBoxProperties.ValueType = typeof(int);
            comboBoxProperties.DropDownStyle = DropDownStyle.DropDown;
        });
        settings.Columns.Add("QuantityPerUnit");
        settings.Columns.Add("UnitPrice").PropertiesEdit.DisplayFormatString = "c";
        settings.Columns.Add("ReorderLevel");
        settings.Columns.Add("Discontinued", MVCxGridViewColumnType.CheckBox);

        settings.Settings.ShowFilterRow = true;
        settings.Settings.ShowFilterRowMenu = true;
        settings.CommandColumn.Visible = true;
        settings.CommandColumn.ClearFilterButton.Visible = true;
    }).Bind(Model).GetHtml()

This provides your end-users with one of the most powerful GridView filtering options available:

Wildcard Filtering

The Like item allows end-users to create filter expressions with wildcards:

- the '%' symbol - substitutes zero or more characters;
- the '_' symbol - substitutes a single character.

The Like menu item's tooltip displays help text that explains which wildcards are supported:

Represents the LIKE operator that determines whether a specific character string matches a specified pattern or not.

The following wildcard characters are supported:

% matches a string of zero or more characters. For instance:CriteriaOperator.Parse("Name like 'Jo%'") - returns all the objects whose Name begins with 'Jo'.
CriteriaOperator.Parse("Name like '%car%'") - returns all the objects whose Name contains the 'car' substring.

_ matches a single character. For instance:CriteriaOperator.Parse("Name like 'car_'") - returns all the objects whose Name consists of four characters and begins with 'car'.

[ ] identifies a single character within the specified range ([a-c]) or set ([abc]). For instance:CriteriaOperator.Parse("Name like '[A-C]%'") - returns all the objects whose Name begins with 'A', 'B' or 'C'.

[ ^ ] excludes a single character not within the specified range ([^a-c]) or set ([^abc]). For instance:CriteriaOperator.Parse("Name like 're[^de]%'") - returns all the objects whose Name begins with 're', and where the following letter is not 'd' or 'e'.

See Criteria Language Syntax to learn more.

Have you noticed that many popular sites like Microsoft.com, Apple.com, DevExpress.com, and others are now using a big banner image in the center of their front page?

That large banner image in the middle is called a “Hero graphic”. And it’s very useful to present to your website visitors important information:

The hero graphic is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site's most important content. A hero graphic often consists of image and text, can be static or dynamic (e.g. a rotating list of images and/or topics).

The content presented varies with the purpose of the site: it can be relevant news about the site, specific site-links, or - in the case of e-commerce - the best-selling or strategically placed products or services. –Wikipedia

Video: DevExpress ASP.NET Image Slider

I introduced you to the DevExpress ASP.NET Image Slider control in December 2012 release. Now, I’d like to show you how you can use the DevExpress ASP.NET ImageSlider control as a hero graphic with rotating images.

Check out my “Enhance Your Website Easily with the ASP.NET Image Slider” webinar to learn how easy it is to use the DevExpress ASP.NET ImageSlider to enhance your website:

Watch the video, then let me know how you’ve used the DevExpress ASP.NET ImageSlider control in your website?

A powerful way to filter the DevExpress ASP.NET GridView is to use the “Like” operator with wildcards. This feature has been updated and now available in the latest DXperience v2012.2 release.

Powerful Grid Filtering

Check out this animation that shows how to use many of the powerful filtering commands with the “Like” operator with wildcards:

How to Enable

1. First, you’ll need to enable AutoFilterRow by setting the Settings.ShowFilterRow to true. The Header Filter (AutoFilterRow) to allow your end-users to filter the individual columns.

2. Then you’ll need to set the columns to support the “Like” filter condition. You can either set it explicitly on the column like this:

<dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="1" >
    <Settings AutoFilterCondition="Like" />
</dx:GridViewDataTextColumn>

This uses the “Like” operator as the default.

3. If you would like to give your end-users a choice then enable the Filter Row Menu using the ASPxGridView.ShowFilterRowMenu property. And be sure to also set the GridViewDataColumnSettings.ShowFilterRowMenuLikeItem property on the column too:

<dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="1" >
    <Settings AutoFilterCondition="Like" ShowFilterRowMenuLikeItem="True" />
</dx:GridViewDataTextColumn>

This provides your end-users with one of the most powerful GridView filtering options available:

Wildcard Filtering

The Like item allows end-users to create filter expressions with wildcards:

- the '%' symbol - substitutes zero or more characters;
- the '_' symbol - substitutes a single character.

The Like menu item's tooltip displays help text that explains which wildcards are supported:

Represents the LIKE operator that determines whether a specific character string matches a specified pattern or not.

The following wildcard characters are supported:

% matches a string of zero or more characters. For instance:CriteriaOperator.Parse("Name like 'Jo%'") - returns all the objects whose Name begins with 'Jo'.
CriteriaOperator.Parse("Name like '%car%'") - returns all the objects whose Name contains the 'car' substring.

_ matches a single character. For instance:CriteriaOperator.Parse("Name like 'car_'") - returns all the objects whose Name consists of four characters and begins with 'car'.

[ ] identifies a single character within the specified range ([a-c]) or set ([abc]). For instance:CriteriaOperator.Parse("Name like '[A-C]%'") - returns all the objects whose Name begins with 'A', 'B' or 'C'.

[ ^ ] excludes a single character not within the specified range ([^a-c]) or set ([^abc]). For instance:CriteriaOperator.Parse("Name like 're[^de]%'") - returns all the objects whose Name begins with 're', and where the following letter is not 'd' or 'e'.

See Criteria Language Syntax to learn more.

Learn more

The DevExpress ASP.NET GridView helps your website with powerful features like the Filtering, Grouping, Sorting and a lot more. Learn more by watching the “ASP.NET GridView Tips and Tricks” webinar:

The new features of the DevExpress ASP.NET TreeList control make it even easier to use:

Scrolling + Fixed Height/Width

Problem: How do you set a fixed height and width for the TreeList?

Solution: The new Horizontal and Vertical Scrollbar properties allow you to easily set up scrollbars for the DevExpress ASP.NET TreeList control. And get the ability to set a fixed height and width for the TreeList control too.

Now, you’re TreeList will not push you content down, unless you want it to. Try the feature online now:

(Click the image to see an online demo)

Watch the webinar about these new Treelist features here:

Resize Columns

Now you can allow you end-users to easily resize columns by dragging the appropriate column header.

Just set the TreeListSettingsBehavior.ColumnResizeMode Property to the ColumnResizeMode. The three options allow you full control over column resizing:

Try the online demo now.

Works in ASP.NET MVC & SharePoint too!

Now that the TreeList is available as an extension for ASP.NET MVC framework, these new scrolling and column resizing features work across all major ASP.NET platforms including WebForms, MVC, and SharePoint!

Enjoy!