This topic contains the following sections:

• Introduction
• Default Style Mode
• Default Style Merging

Introduction

New in version 5.0 is the default style concept to deliver optimal performance right out-of-the-box.

The default style feature offers the following benefits:

• Clean control definition during development. This significantly improves loading time in the Visual Studio 2005 designer because unnecessary style objects do not need to be created. For instance, WebGrid version 5.0 only requires the following simple tag.

  HTML	Copy Code
  <ISWebGrid:WebGrid ID="WebGrid1" runat="server" UseDefaultStyle="true"> </ISWeGrid:WebGrid>

  
  In previous version, WebGrid automatically generates a lot of codes containing the styles definition in order for the WebGrid control to display properly.
  
• Best performance in server throughput. If your end users are satisfied with the default style of WebGrid, we highly recommend you to use the default style whenever possible. By enabling default style, the server side processing is significantly reduced because there is no need for serializing, validating and parsing the styles and finally generate the styles into css-based classes in the page output.
  
• Reduced page output size up to 70 percent. Based on a research, more than 60 percent of web developers do not modify the styles of Intersoft's controls in their web application.
  
  In previous version of WebGrid, all styles are automatically generated to the page output, regardless whether the style is the one that come with the control or custom style that applied by the developer. So let's say that you have 10 instances of WebGrid that use default style, the control will generate each style of each instance to the page output. This is normal behavior in previous version since there is no mechanism that tell the control whether the defined style is a default style or custom style.
  
  

  In version 5.0 with the Default Style feature, WebGrid control no longer produces page-level styles for instances that enable Default Style. This mechanism enables page output reduction up to 70 percent, since styles are no longer produced regardless of the number of WebGrid instances in a page.

The following illustration compares the page output between WebGrid and its predecessors.

Several important things to note around Default Style feature:

• When Default Style is enabled, WebGrid will include a link to external stylesheet that contains reusable style definition used by the Default Style. This external resource is fetched by using standard WebResource feature, and is automatically handled by WebGrid. There is no efforts required by developers.
• When Default Style is enabled, all styles definition in the control instance should be removed. You cannot have styles definition and using default style at the same time.
• Default Style feature is enabled by default for new instance of WebGrid.NET Enterprise 5.0. Existing instances of WebGrid (i.e., after migrated from previous version) will continue to use their existing styles definition.

 

There are couple ways to enable DefaultStyle of WebGrid:

1. SmartTag Designer.
2. Property Set.

For more information, see How-to: Enable Default Style for existing instance of WebGrid.

 

Default Style Mode

WebGrid 5.0 comes with two default styles as discussed in the following:

• Standard Style
  This is the classic WebGrid style which has been improved to use more neutral colors. By default, Standard Style is used when the DefaultStyle feature is enabled.
• Elegant Style
  This is a new style introduced in WebGrid 5.0. Included as DefaultStyle, you can easily change the WebGrid's appearance to use this new style by simply setting the DefaultStyleMode to ElegantStyle.
  
  The ElegantStyle mode sports modern visual such as glass backgrounds combined with soft blue backgrounds. The new ElegantStyle is designed to deliver visually compelling user interface and better user experience. See the following image for more details.

 

Default Style Merging

WebGrid 7 introduces Default Style Merging, a new feature that automatically merges your customized styles with default style.

To enable Default Style Merging feature, simply set AllowDefaultStyleMerging property to true. This new property can be found in LayoutSettings object.

For example, the following screenshot shows WebGrid with Elegant default style.

Next, assume you would like to change the font's color to Red, you would have the following style definition in LayoutSettings.

 

The following shows the comparison two different results.

Without Default Style Merging	With Default Style Merging
The header's default style is lost after you defined custom header style.	The header's default style is flawlessly merged with your custom header style.

 

See Also

 

 

---

© 2012 Intersoft Solutions Corp. All Rights Reserved.