DataSheet – master page background color hides cell text [FIXED]

February 22, 2012 in Uncategorized

While changing the background color of a master page, I noticed a new issue with DataSheet view.   DataSheet uses an ActiveX control to render the grid control.  This control uses the <BODY> background color so attempts to set the “#s4-mainarea” <DIV> with a background color were in vain.   It works for HTML content, but just not for DataSheet.  Using light color (#FFF white in the example below) is more compatible with DataSheet view’s  gray text and gray cell border.  If you have a light <BODY> background color, it may work OK, but those those with dark backgrounds … what can we do?   There are two options:

Before and After Screenshots

Here’s a site with bad colors before the fix:

bad

Here’s the same site with smart code to give a different background-color driven by “ShowInGrid” URL:

good

Option #1 – Server Side – Master page with C# code

A brief snippet of ASP.Net code written in C# can be inserted into the master page.   The server side rendering will look for a “ShowInGrid” URL parameter. 

Pro

  • Fast
  • No client browser “blink” that JS has
  • Foundation for writing other Dot Net server side code  (“smart” master pages)

Con

  • Requires [web.config] edit

Action Steps

  1. Open site with SharePoint Designer
  2. Open Master page with Edit in Advanced Mode
  3. Add the below code just before the </HEAD> tag
  4. Open INETMGR and locate the website
  5. Open [web.config] from the IIS website folder with Notepad
  6. Add the below <PageParserPath> tag.   NOTE – be sure to update the site collection relative URL to match your environment.   Enabling this for all pages (/*) is not generally recommended unless the only people with SP Designer also are trusted developers.
  7. Repeat steps #4 – #6 on each web front end server

 
<% if (Request["ShowInGrid"] == null) { %>
    <style type="text/css">
    /* ShowInGrid - URL parameter not found. black default. */
    body { background-color: #000; }
    </style>
<% } else { %>
    <style type="text/css">
    /* ShowInGrid - URL parameter found. white DataSheet support. */        
    body { background-color: #FFF; }
    </style>
<% } %>

2-22-2012 2-01-59 PM

2-22-2012 2-03-48 PM

<PageParserPath VirtualPath="/_catalogs/*" CompilationMode="Always" AllowServerSideScript="true" IncludeSubFolders="true" />

2-22-2012 2-06-43 PM

Option #2 – Client Side – Master page with JavaScript code

A brief snippet of ASP.Net code written in C# can be inserted into the master page.

Pro

  • Does not require any server access

Con

  • Slow
  • Client browser will “blink” when JS changes the color changes from light to dark

Action Steps

  1. Open site with SharePoint Designer
  2. Open Master page with Edit in Advanced Mode
  3. Add the below code just before the </BODY> tag 
<script type="text/javascript">
    //change background color to black, unless DataSheet view
    if (document.location.href.indexOf("ShowInGrid") == -1) document.body.style.backgroundColor = "#000";
</script>

2-22-2012 2-07-47 PM

No Comments »