Wednesday, November 25, 2015

background-size: cover; causes the "Aw, Snap!" Google Chrome error when colliding with the "All" button in ASPxGridView grids for DevExpress.

Stretch a background image across the background of your web site with the "cover" trick. Then, go to one of your paginated lists. Now, scale the list up to show ten thousand records. Watch Chrome start to whimper. Fail!

 
 

Addendum 11/30/2015: max-height: 3000px;

...is the solution for this problem. The number doesn't have to be 3000 exactly. You get the idea, right?

 
 

Addendum 12/1/2015: Honestly, a better way to approach this is to have a setting like so in DevExpress' paradigm...

VerticalScrollBarMode="Visible" VerticalScrollableHeight="600"

 
 

The problem with the CSS height setting is that if you apply it to a body tag, then the ASPxGridView will expand over or, more likely, under your footer. You may hack around this by trying to put a div inside of the body tag that holds the background image, but that's really "rolling your sleeves up" work that might just be "too much" you know? Move the VerticalScrollBarMode setting to the C# code behind to make it condition! Observe:

private void ToggleVerticalScrollbarVisibility()
{
   var count = ReportGrid.GetCurrentPageRowValues().Count;
   if (count > 21)
   {
      ReportGrid.Settings.VerticalScrollBarMode =
            DevExpress.Web.ScrollBarMode.Visible;
   }
   else
   {
      ReportGrid.Settings.VerticalScrollBarMode =
            DevExpress.Web.ScrollBarMode.Hidden;
   }
}

 
 

I called out this at the ReportGrid_CustomSummaryCalculate and ReportGrid_CustomSummaryCalculate events which were assigned like so on the C# side:

ReportGrid.CustomSummaryCalculate += ReportGrid_CustomSummaryCalculate;
ReportGrid.PageIndexChanged += ReportGrid_PageIndexChanged;

No comments:

Post a Comment