DevExpress ASP.NET Themes – Easy 3 Step Customization for Your Projects

Check out the difference between a naked ASP.NET project and the same project using a Developer Express theme:

image image

Nice upgrade, isn’t it? Here are the 3 simple steps to add Developer themes to your project: 

1. Add a Combo Box for Selecting the Theme

First you’ll need to decide on which page you want to put the theme selection combo box. You can put it on a master page so that it’s available on all derived pages. Or you can put it on a user customization page, like an options/settings page. Putting the the combo box at the top of the page will make it easier for the user to find and select the theme. You can see a sample of this in the ASP.NET demos. I recommend binding this combo box to an XML file that contain a list of the available themes.

2. Use DevExpress ASP.NET Theme Deployment Tool

There are several great pre-built themes that ship with our ASP.NET controls like the Office 2003 themes. Check out the ASPxThemeDeployer video to learn how to copy the DevExpress ASP.NET themes to your local web projects. Click the image to watch the video:


3. Add Code To Load/Save the Themes

In this last step, we’ll add some code to bind as well as handle the load/save of the themes to cookies. Add this code to your CodeBehind file which contains the combo box. This will load and save the selected theme into a cookie so the users don’t have to re-select their favorite theme every time. And to make it easier handle these cookies, include one of JavaScript utility files in a new folder called ‘scripts’:

  • C:\Program Files\Developer Express .NET v8.1\Demos\ASPxGridView\CS\ASPxGridViewDemos\Scripts\Utilities.js

Please note that with the DXperience v2010 vol 1 release, we’ve moved the local demos location to the User Documents area. For example, on my Windows7 install, the file is located here now:

  • C:\Users\Public\Documents\DevExpress 2010.1 Demos\Components\ASPxGridView\CS\ASPxGridViewDemos\Scripts\Utilities.js

This file contains some methods which we’ll call from the client-side to save the theme whenever the user selects a new theme:

<dxe:ASPxComboBox AutoPostBack="True" DataSourceID="xdsThemes" Width="150px" 
ID="cbSkins" runat="server" EnableViewState="False" 
ClientInstanceName="cbSkins" OnDataBound="cbSkins_DataBound">
<ClientSideEvents SelectedIndexChanged="
function(s, e) {   
}" />

Here’s a complete sample project that shows the combo box for themes in action [Sample project: (C#) | (VB)].

Soft Orange Red Wine
image image
Youthful Black Glass
image image

Improve your UI by adding these Developer Express themes. Then leave a comment below about how much your users love this feature.

ASP.NET Video Tutorial: How to Perform Custom Edit/Updates with ASPx GridView

Custom Updates allow you to tweak and define your own values for an edit column before they’re saved to the data source. Let’s say you want to define the value used to update a column in your data table. Then you can use the event to customize updates. Check out this short 5 minute video on how to perform custom updates with the ASPxGridView. You can also view the video in full-screen mode using the right most button on the flash player below:


Screencast: Enable Server Mode using LINQ (ASPxGridView & XtraGrid)

In a previous post, I showed you how to use the powerful Server mode feature in ASPxGridView and XtraGrid against large datasets. The response to Server mode was so good that we’ve extended the ways that you can enable it.

You can now use a LINQ provider to work with our .NET grids in Server mode. The latest release, 2008 Volume 1, introduces two new datasources to support LINQ.   LinqServerModeDataSource supports the ASPxGridView and the LinqServerModeSource supports the XtraGrid. To use these datasources against either the ASPxGridView or XtraGrid, try the steps demonstrated in the short screencasts below.

ASPxGridView Screencast


XtraGrid Screencast


The LINQ support in Server mode is bleeding-edge technology which gives you the performance gains for your projects. Check out this cool feature then let me know how you’re using LINQ and how you plan to use these new LINQ datasources.

ASPxperience Screencasts: Customization & Client-Side Events

Check out these 5 new screencasts. Three show you how to customize the ASPxperience products and one shows you how to discover and use the client-side events.

image The first lesson shows how to handle one of our ASPx control’s client-side event. You’ll also learn how to use the online documentation to learn more about client-side APIs. You may find the related blog post useful as well:

Client-Side Manipulation: Using Client APIs and Handling Client-Side Events


In the second you’ll learn how to use the default.css file to customize the appearance of an ASPx control:

Appearance Customization: Using a Custom CSS File

image In this screencast you’ll learn how to create a new AutoFormat based on a web control’s customized visual properties and apply it to other controls of the same type.

Appearance Customization: Creating and Applying a New AutoFormat

image This screencast shows how to create a new theme based on a web control’s customized visual properties. You can then apply it to other controls of the same type.

Appearance Customization: Creating and Applying a New Theme


The last screencast shows how to create a toolbar emulation with the ASPxMenu. You can also read the technical post on it here: Create Ribbon-Like Toolbars with ASPxMenu

ASPxMenu: How to Create a Toolbar Emulation


You can also access all these screencasts on the DevExpress Channel here: ASPxperience lessons.