Month: July 2008

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:

image

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) {   
	DXSaveCurrentThemeToCookies(s.GetSelectedItem().value);
}" />

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

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.

What’s New in 2008 Volume 2 for ASP.NET?

The 2nd major DXperience release of 2008 is just around the corner. This three (major) releases per year cycle is very useful. Each major release means new features, controls, functionality, etc. And in the 2008 Volume 2 (aka v8.2) release there are some great features from the ASP.NET team. Read below for the full list. This post also ties in with the other announcements about the v8.2 release:


Common Changes Across All ASP.NET Controls

 

Useful Class for Client-side Scripting

A new ASPxClientUtils class allows you to easily perform some typical client-side actions such as:

  • Determine web browser type
  • Work with arrays
  • Access an object’s parent or child object
  • Obtain event parameters

Enable/Disable Controls and Control Elements on the Client Side

Previously, enabling/disabling a control or a control element required a round trip to the server. In 2008 vol 2, the controls from the ASPxEditors and ASPxperience Libraries allow you to change their enabled state or the state of their elements (tabs, menu items) on the client side. This reduces the number of round trips to the server and increases web site responsiveness.

Distinguish Between Callbacks and Postbacks

A new server-side IsCallback property has been added to our web controls. This property allows you to find out whether a control takes part in callback processing.

Native Rendering for Data Editors

Some controls from the ASPxEditors Library (ASPxTextBox, ASPxMemo, ASPxListBox, ASPxComboBox and ASPxButton) can now be rendered as HTML INPUT elements of the appropriate types. This allows you to enable native rendering for these elements thus providing Windows® style UI in your web site. Native rendering results in less HTML code which improves an application’s overall performance.


ASPxHtmlEditor

Integrated Spelling Checker

The ASPxSpellChecker is now integrated into the ASPxHTMLEditor which enables spelling validation in the editor’s Design View. To check spelling, end-users can now simply press a built-in toolbar button.

Predefined Styles for Text Formatting

Previously, every toolbar button performed a very basic formatting operation – for instance, applying bold or italic formatting, changing background color, etc. Now you can create buttons that change multiple style attributes at once. This is extremely useful if end-users need to highlight multiple text fragments using the same style settings.

To enable this functionality, all you need is to create a custom CSS style and expose it via a toolbar’s specially designed dropdown editor.

Responding to Focus Changes via Client-side Events

Newly implemented client-side events allow you to respond to the focus event being received or lost by the editor’s Design View. For instance, this enables you to implement client-side user input validation when an end-user tries to leave the editor.

Complete XHTML compliance

HTML code entered into the editor’s HTML View can be automatically validated and transformed into XHTML 1.0 Transitional compliant markup. As the result, the editor’s content is always kept safe, since the editor removes all potentially harmful code – unknown tags and attributes, script elements, client-side event handlers and URLs with script content. Automatic validation also helps to keep HTML code validity by correcting invalid tag hierarchies and changing invalid attribute values.

The ASPxHtmlEditor exposes several options to control which automatic transformations are required. You can also update HTML code manually by overriding an event.


ASPxperience Suite

 

Obtaining Settings from Data Fields

Some controls like the ASPxNavBar, ASPxMenu and ASPxTabControl, now expose properties which allow you to specify data fields from whose items settings are to be obtained. Examples of settings that can be fetched from a data table are item tooltips, navigation URLs, image URLs, etc.

Data binding, an entirely new feature in this release, is now supported for the ASPxTabControl. Prior to v2008 vol 2, it could only work in unbound mode.

Easily Transmit Any Data onto the Client

All AJAX-enabled controls in the ASPxperience Suite now allow the same easy data exchange with the web server as in the ASPxGridView Suite. The Controls expose the CustomJSProperties event, which enables you to declare custom properties for the client control. You can specify these properties’ values on the server side and then access them on the client, as you would do with built-in properties.

New Media Formats for Object Container

The list of allowed video and audio types has been extended with QuickTime Video and QuickTime VR (virtual reality) types.

ASPxCallbackPanel Improvement

The panel’s content can now remain visible during callback processing. This behavior is optional – a loading panel is displayed by default.

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 http://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_RowUpdatingtopic 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:

image