5 GridView Themes Based on Google's Personalized Homepage (igoogle)

On my work and home PC's I have my browser's homepage set to google.com.  Like the rest of the world, for about the past 7 years or so I have been using google as my starting point for Internet searches.  Sometime within the past year I took the time to setup google's personalized homepage - igoogle.  I configured my homepage with a nice blend of sporting and tech related gadgets.  I like this because it gives me a nice dashboard to the content that interests me most.

Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0)

One of the silly features I have found that I like about igoogle is how the pages color palette changes depending upon the time of day.  So as the day progresses from morning to afternoon to evening the colors on the page change as well.  Like I said, I know this is a silly feature, but I like it.  And I have asked around a little bit and seems like other people like it to.  To get a better idea of how the colors change, here are the background images from a few of the HTML elements.

10 PM:

6 PM:

2-4 PM:

8 AM:

4 AM:

As usual, when I come across something I like, I try to determine if it is something we could use in our current web application.  And while I am not sure our application requires this exact functionality, I think (someday) it would be nice if we allowed users to customize the look and feel of our site by picking between a few predefined themes.  So to prototype how this might work I created five GridView themes based on a few of the different color palettes from igoogle's site (night, afternoon, bus stop, classic and summer) and played around with dynamically switching between the different themes by toggling the css class of the rendered HTML table.  

To toggle the theme of the GridView, I run a bit of JavaScript when a radio button is clicked that uses the Sys.UI.DomElement.addCssClass and removeCssClass to toggle the theme of the GridView based on the users selection.  Below is a the markup and JavaScript for the page.  The applyTheme JavaScript function is responsible for removing the old theme and applying the new one.  The demo page shown above leverages the GridViewControlExtender I blogged about here and here to handle changing the cell colors as you mouseover and click on the different rows. 

<form id="form" runat="server">
    <asp:ScriptManager runat="server" />
    <script type="text/javascript">
        var currentTheme;
        function applyTheme(theme) {
        
            var gv = $get('<%= this.gv.ClientID %>');
            
            if(currentTheme) {
                Sys.UI.DomElement.removeCssClass(gv, currentTheme);
            }
            
            Sys.UI.DomElement.addCssClass(gv, theme);
            currentTheme = theme;
        }
    </script>
    <asp:ObjectDataSource 
        ID="odsCustomers" runat="server" 
        SelectMethod="Select" TypeName="CustomersDataObject" />
    <p>
        Below is a GridView that can be styled by choosing one of the five predefined styles.<br />  
        Try clicking the different radio buttons and viewing the different themes.
        The rows support a hover and selected state<br />
    </p>
    <div style="padding-bottom:10px;">
        <input type="radio" checked="checked" name="theme" onclick="applyTheme('igoogle-night');" />Night
        <input type="radio" name="theme" onclick="applyTheme('igoogle-afternoon');" />Afternoon
        <input type="radio" name="theme" onclick="applyTheme('igoogle-busstop');" />Bus Stop
        <input type="radio" name="theme" onclick="applyTheme('igoogle-classic');" />Classic
        <input type="radio" name="theme" onclick="applyTheme('igoogle-summer');" />Summer
    </div>
    <div>
        <asp:GridView 
            ID="gv" runat="server" 
            CssClass="igoogle igoogle-night" AutoGenerateColumns="false" 
            DataSourceID="odsCustomers">
            <RowStyle CssClass="data-row" />
            <AlternatingRowStyle CssClass="alt-data-row" />
            <HeaderStyle CssClass="header-row" />
            <Columns>
                <asp:BoundField HeaderText="ID" DataField="customerid" />
                <asp:BoundField HeaderText="Company" DataField="companyname" />
                <asp:BoundField HeaderText="Contact" DataField="contactname" />
                <asp:BoundField HeaderText="City" DataField="city" />
                <asp:BoundField HeaderText="Country" DataField="country" />
            </Columns>
        </asp:GridView>
        <% // My Extender Control for Adding the Row Hover and Select Classes %>
        <mb:GridViewControlExtender 
            runat="server" TargetControlID="gv" 
            RowHoverCssClass="row-over" RowSelectCssClass="row-select" 
        />
    </div>             
</form>

Like I mentioned earlier, I was just 'playing around with' dynamically changing the theme of a GridView, I am positive there are other better approaches for accomplishing this.  I was just researching how it might look with respect to my current web application.  In the process I developed a few more GridView themes that I thought I would share ...

That's it. Enjoy! 


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/82

Comments


Posted by: Grrgor Suttie on November 2, 2007 12:00 AM

Try your Home Page as

href="www.google.com/webhp?complete=1hl=en

Posted by: Nisar Khan on November 8, 2007 12:00 AM

thanks for the post.
why the sorting is not working?
i have a property AllowSorting="True" but still i dont see sorting when i click on the header nothing is happening

am i missing anything?

thanks again.

Posted by: Allen on November 23, 2007 12:00 AM

This is hot, but how do I get my igoogle personalized page to implement this time sensitive theme? Ive looked pretty much all over the my igoogle page and other than merely selecting a theme (which in no way indicates that the colors will change over time) I cant find out where this functionality is hidden.

If you drop a ajax calendar in the calendar display gets mucked up, I think it has to do with the css styles.

Posted by: Pradeep Rathinamuthu on March 6, 2008 12:00 AM

This is awesome ! BTW, I am not able to figure out where the style "alt-data-row" comes from? It doesnt seem to be part of any css file that is in the project.

Posted by: ice cool friend on September 10, 2008 04:49 AM

i applied to the gridview the styles... it works pretty much f9 but when there r no records, it returns an error

Line:3215
Error : Sys.ArgumentException: Value must not be null for controls and behaviours
Parameter name : element

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • ice cool friend wrote: i applied to the gridview the styles... it works pretty much f9 but when there r no records, it retu...
  • Pradeep Rathinamuthu wrote: This is awesome ! BTW, I am not able to figure out where the style "alt-data-row" comes from? It doe...
  • Tim wrote: If you drop a ajax calendar in the calendar display gets mucked up, I think it has to do with the cs...
  • Allen wrote: This is hot, but how do I get my igoogle personalized page to implement this time sensitive theme? I...
  • Nisar Khan wrote: thanks for the post. why the sorting is not working? i have a property AllowSorting="True" but st...
  • Grrgor Suttie wrote: Try your Home Page as href="www.google.com/webhp?complete=1hl=en ...