ASP.NET Popup Control - Lightweight Render, Scroll Bars, CSS3, MVC and more (available now in v2011.1)

ASP.NET Team Blog
30 March 2011

Check out all the great new enhancements, performance improvement and features of the DevExpress ASP.NET Popup Control, the ASPxPopupControl, that are available now in DXperience v2011.1 release:

New Features and Performance Enhancements

Here's an overview of what's new for ASPxPopupControl in v2011 volume 1 release:

  • ScrollBars - A new property called ScrollBars allows you to switch on the visibility of scrollbars within a popup window. Choose one of the following option values:
    • None - No scrollbars are displayed within a popup window
    • Horizontal - A popup window displays only the horizontal scrollbar
    • Vertical - A popup window displays only the vertical scrollbar
    • Both - A popup window displays both the horizontal and vertical scrollbars
    • Auto - A popup window automatically displays a horizontal or/and vertical scrollbar if its content does not fit the popup window
  • MaxWidth, MaxHeight, MinWidth and MinHeight - new properties allow you to set the maximum and minimum popup window width and height. If they are set then the popup window can not be resized beyond the sizes set by these properties.
  • CSS3 shadows and semantic rendering improvements! Read on for more info…

Semantic Render Improvements

Lightweight render has been enabled for the ASPxPopupControl using semantic HTML. Learn more about semantic rendering on our previous announcement.

A new property called RenderMode allows you to choose between rendering modes: Classic and Lightweight. The Lightweight mode gives you performance advantages:

ASPxPopupControl Semantic Render Comparison

(Performance tests done with Internet Explorer using our Aqua theme)

Other Controls Benefit Too: GridView, HTML Editor & TreeList!

Because the ASPxPopupControl is used within our other controls, they get the benefits of the Lightweight rendering mode. We have enabled lightweight render for:

  • ASPxPopupControl and ASPxPager by default in ASPxGridView
  • ASPxTreeList (customization windows, popup edit forms, filter builder)
  • ASPxHtmlEditor (all dialogs)

So these controls will have lighter rendering when this feature is released in the DXperience v2011 volume 1 release.

MVC Extensions Benefit Too!

The Lightweight render feature will also be available in our ASP.NET MVC Popup extensions. In fact, the Lightweight semantic rendering will be the default for our ASP.NET MVC Popup extension.

CSS3 Shadows

With the new Lightweight render mode, we have also used CSS3 to implement shadows for our ASP.NET PopupMenu and PopupControl (WebForms and MVC!). Take a look at the shadows of the Popup control and Menu here:

DevExpress ASP.NET Popup Control - CSS3 Shadow DevExpress ASP.NET Popup Menu - CSS3 Shadow

One warning about the Lightweight render mode's CSS3 shadows: They work in all browsers except IE8 and earlier but you can use Classic mode instead.

The good news is that now the lightweight controls have CSS3 shadows which were missing in the last DXperience v2010.2 release.

Available now in v2011 volume 1

These ASPxPopupControl features and enhancements are available now in the DXperience v2011 volume 1 release.

What do you think of all these great PopupControl features and enhancements?

Drop me a line below with your thoughts, thanks!

Build Your Best - Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

Read the latest news about DevExpress ASP.NET MVC Extensions

Download a free and fully-functional version of DXperience now: http://www.devexpress.com/Downloads/NET/

Follow MehulHarry on Twitter

17 comment(s)
Miro Nagy
Miro Nagy

I am a fan of the new scroll bars option.  

This will fix my quick work around for a popup with a div that has a scroll bar on it.

Very cool.

30 March, 2011
Steven Rasmussen
Steven Rasmussen

Hmmm... I wonder what the new grayed out control is in the video....

30 March, 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Steve,

Can't get anything past you. :)

What do you think it is? Guesses?

30 March, 2011
Peter Thorpe
Peter Thorpe

@Steve and @Mehul A word alphabetically between ASPxDataView and ASPxFileManager around 7 characters long. Can't be that many choices if anyone really wants to know.

31 March, 2011
Fırat Esmer
Fırat Esmer

I love PopUp! Thanks guys, it's cool!

31 March, 2011
Marc Greiner (DevExpress MVP)
Marc Greiner (DevExpress MVP)

Very exciting to soon have popups that eat less bandwidth, thanks!

Out of curiosity, how did you manage to decrease the size of the markup to such an extend (3.4x less)? Replacing table by div?

31 March, 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Peter, Ah yes, but what could it be? :)

31 March, 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Miro, Firat and Marc,

Thanks!

31 March, 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Marc,

Yes, that is what the semantic rendering is about. Take a look at this post for more info: community.devexpress.com/.../asp-net-menu-navbar-and-pager-performance-improvements-v2010-vol-1.aspx

31 March, 2011
Miro Nagy
Miro Nagy

Steven,

Good Eye!

I didn't even notice he grayed out the menu option in the left.  I was too busy fixated on his mouse moving.  

What can I say - im easily distracted.

4 April, 2011
Jason Sadler
Jason Sadler

My guess is ASPxDockingControl

8 April, 2011
EricH
EricH

That is a fantastic guess. ASPXDocking would fit there. Hmmmm? Mehul do we have a winner?

8 April, 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Jason & Eric,

That is a very good guess and I'm not confirming or denying just yet. ;-)

8 April, 2011
Evgeniy Meyke
Evgeniy Meyke

@eric Are you saying ASPxLayoutControl is too long? ;)

8 April, 2011
EricH
EricH

@ Evgeniy As Peter Thorpe stated above, it looks to be around 7 characs long and they are in alpha order. So "docking" would be a dead on guess as we are expecting this control soon.

11 April, 2011
Ari Sandman
Ari Sandman

Hi Mehul,

 We want to customize the appearance of the scrollbars through the css styles. Set a width to the scroll bar. How can we do this.

Thanks,

Ari.

28 May, 2015
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Ari,

Please contact the DevExpress support team and they can help you: www.devexpress.com/.../CreateIssue.aspx

Thanks,

29 May, 2015

Please login or register to post comments.