• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
ASP.NET
  • Product Platforms
  • More
ASP.NET
ASP.NET HTML5 Mode and Other Goodness in the WebRating Control
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
ASP.NET requires membership for participation - click to join
  • ASP.NET
  • Accessing Extra Data in Data Bound Controls
  • ASP.NET Performance - A Place To Start
  • +Building an Ajax Master/Detail Page with the WebDataGrid
  • Building WebParts with NetAdvantage ASP.NET Controls
  • Data Binding the WebDataGrid to Common Data Sources
  • Getting Started with NetAdvantage ASP.NET
  • HTML5 Mode and Other Goodness in the WebRating Control
  • Implementing WebDataGrid Client Side Search
  • Introduction to the Infragistics Web Drag and Drop Framework
  • Learn to Build a WebDataGrid Custom Pager
  • Understanding Script Combining
  • Using ADO.NET to Perform CRUD Operations with the WebDataGrid
  • WebDataGrid 101: Fill the Grid with Data and Change the Look and Feel
  • +WebDataGrid : Import data from Excel & Export to Excel, PDF or XPS
  • WebDataGrid Client-Side CRUD
  • WebDataGrid DataViewState vs ViewState
  • WebDataGrid Validation

HTML5 Mode and Other Goodness in the WebRating Control

One of the new controls in the 10.2 release includes the WebRating control. What makes this control special is that this is one of the first of our controls to feature HTML5 rendering. When rendered to the browser, the default appearance is a standard star rating layout:

Example

When you view source of the page that hosts the control, you may see XHTML (HTML4) or HTML5 markup - depending on the format of the control and the client’s environment. The following screen shot depicts the control’s markup when it is rendering in HTML5 mode:

HTML5

The CANVAS element is added explicitly to the DOM while the associated script adds in individual rating items. The script is also responsible for setting the appropriate values and wiring up the necessary interactivity.

During initialization, the control builds the canvas by examining the applied CSS and then figures out how to render the images.  The images are rendered by first drawing the empty images, followed by “selected” and then “hovered” images (if necessary).  Animations for the control work during mouse and keyboard interactions.

Note: One of the interesting possibilities about the canvas support is that developers could draw additional information on the canvas to highlight extra parts of the rating!

In order to make the HTML5 mode possible, you must set EnableHtml5Redering equal to true:

Markup

If the browser in question does not support HTML5 or the EnableHtml5Rendering flag is set to false, then markup like the following is generated:

HTML4

The HTML4 markup will render 3 DIVs along with a corresponding number of spans for each image in the rating range.

During design time, the control will always render in the non-HTML5 mode as for the time being Visual Studio does not support HTML5 tags.

You may safely turn on EnableHtml5Rendering and rest assured that older browsers will not crash when encountering the control. The WebRating uses a resolved property that looks at EnableHtml5Rendering and the browser context to see if it is running inside a HTML5 capable browser. The control will only render HTML5 markup if the flag is enabled AND the browser supports the updated markup.

Other Settings & Behaviors

There are a number of other notable features and behaviors of the WebRating control.

Should you choose to allow your users to rate an item more than once, the control will track the number of times rated and also expose the average rating value.

Display Averages

The rating metaphor may be applied under a number of different contexts. The image below shows you how you can use custom images to communicate a speed rating – from a snail’s pace to a rocket’s blast:

Custom Rating Templates

The WebRating control will seamlessly integrate with the WebDataGrid as a custom editor provider.

Note: To see exactly how to setup this editing scenario, watch this introductory video on the WebRating control.

Grid Editor Provider

Some of the most commonly used properties are shown in the screenshot below. Rating precision options include whole, exact and half.

Property Explorer

The final “goodness” I’d like to point out is how the control is entirely CSS based. Instead of building nodes that point to explicit image locations, the control allows you to point to CSS classes for the different states of the control. This allows you to completely style the control using CSS.

Custom Images

Note: An entirely CSS-based approach allows you to have full control over the look and feel of the control. Should you ever add a feature to allow uses to switch style sheets for the application, the WebRating control will respond seamlessly to the changes.

I hope you’ve enjoyed getting to know the WebRating control!

Acknowledgements

Special thanks to David Young on our ASP.NET Product Team for help writing this article.

  • WebRating
  • HTML5
  • Share
  • History
  • More
  • Cancel
Related
Recommended