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:
Here’s the same site with smart code to give a different background-color driven by “ShowInGrid” URL:
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
- Open site with SharePoint Designer
- Open Master page with Edit in Advanced Mode
- Add the below code just before the </HEAD> tag
- Open INETMGR and locate the website
- Open [web.config] from the IIS website folder with Notepad
- 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.
- 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>
<% } %>
<PageParserPath VirtualPath="/_catalogs/*" CompilationMode="Always" AllowServerSideScript="true" IncludeSubFolders="true" />
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
- Open site with SharePoint Designer
- Open Master page with Edit in Advanced Mode
- 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>
Below are my notes as I toured of the features.
Recent Comments