Simple Dynamic Sorting Headers for GridView using indication arrows

A simple centralized way to make a nice flipping indicator (arrow) of which way you are sorting on a GridView

When sorting with gridviews, it is nice to have an indicator of which direction you are sorting on which field like the use at Yahoo! Autos. To copy this idea, I simply made 3 Css classes 'sort', which is a base class with no backgorund image, 'up' which has an up arrow, and 'down' which has a down arrow in it. I made sure to put the backgorund image in just once, and push the text away so it can show through. Also, since these will be applied to the Header element of the GridView, you have to make sure you declase '.class a':

.up a, .down a, .sort a { display:block; padding:0 4px 0 15px; }
.up a, .down a { color:#8F5F00; }
.sort a:hover { background:#ffcc66; }
.up a { background:url(../images/up.gif) left no-repeat; }
.up a:hover { background:url(../images/up.gif) left no-repeat #ffcc66; }
.down a { background:url(../images/down.gif) left no-repeat }
.down a:hover { background:url(../images/down.gif) left no-repeat #ffcc66; }

Now, I made a function in a helper Class that will take in the same arguments that a GridView Sorting event throws, that way the transition will be easy.

// This is used to flip the sorting arrow up/down
// Base Css class is 'sort', the Ascending Css Class is 'up' and Descending is 'down'
public static void GVSort(object sender, GridViewSortEventArgs e)
{ // call on sort and sets the sorted field to the proper Css Class, while setting all others to the base class
  string BASE = "sort";
  string UP = "up";
  string DOWN = "down";
  GridView g = (GridView)sender;
  for (int i = 0; i < g.Columns.Count; i++)
  {
    var c = g.Columns[i];
    c.HeaderStyle.CssClass = c.HeaderStyle.CssClass.Replace(UP, BASE).Replace(DOWN, BASE);
    if (c.SortExpression.Equals(e.SortExpression))
    {
      c.HeaderStyle.CssClass =
        e.SortDirection.Equals(System.Web.UI.WebControls.SortDirection.Ascending) ?
          c.HeaderStyle.CssClass.Replace(BASE, UP).Replace(DOWN, UP) :
          c.HeaderStyle.CssClass.Replace(BASE, DOWN).Replace(UP, DOWN);
    }
  }
}

Now say I had this in a class utils.cs I would just call it one the GridView Sorting event:

protected void gv_Sorting(object sender, GridViewSortEventArgs e)
{
  sao.GVSort(sender, e);
}

And there you have it! You can call that from every Gridview in your application that you want to look similar - code only once! 

 

Source :- http://naspinski.net/category/css.aspx 

Setting the row background color in a GridView based on a value in the the row

This is something that needs to be done often, but it is not always obvious how to do it

Often times you want a row to be colored different or highlighted based on values, this can be useful for multiple reasons. This is a very simple thing, but not all that obvious.

Make your different CSS classes

Set up some CSS classes that will be used for the row coloring:

.blue { background:Blue; }
.orange { background:Orange; }
.normal { background:Transparent; }

Set your RowDataBound event in your GridView

This is going to happen on the RowDataBound event, so be sure to call one in your GridView:

<asp:Repeater ID="gv" onrowdatabound="gv_RowDataBound" ...

Set up your event to handle the row

Now handle each row in the event:

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
  e.Row.CssClass = e.Row.Cells[0].Text.Equals("1") ? "blue" : "normal";
}

It's just that simple. Now, if the text in Cell[0] (the first cell) of a row is equal to "1" the row will have it's CssClass set to "blue", otherwise it will be "normal".

Now if you want to have multiple different cases:

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
  switch(e.Row.Cells[0].Text)
  {
    case "1" : e.Row.CssClass = "blue"; break;
    case "2" : e.Row.CssClass = "orange"; break;
    default : e.Row.CssClass = "normal"; break;
  }
}

Now if the first cell is equal to "1", it will be blue, if it is equal to "2" is will be orange, or else it will be transparent; so simple! 

Source :- http://naspinski.net/category/css.aspx

Creating Nice '|' Divided Menus with CSS

Home      |          Contact        |         FAQ         |         Other         |        Crap

You dont need to actually put in the '|' character, you can do it with just the following advanced css selectors:

<style type="text/css">
        ul#nav li{
                float:left; 
                margin-right:20px;
        }
        
        ul#nav li:after{
                content:'|';
                margin-left:20px;
        }
        
        ul#nav > li:last-child:after{
                content:'';     
                margin-left:0;
        }
style>
<ul id="nav">
    <li><a href="#">Homea>li>
    <li><a href="#">Contacta>li>
    <li><a href="#">FAQa>li>
    <li><a href="#">Other Crapa>li>
ul>

I realize it's not exactly space-saving, but it is a cool trick that could be adapted to all sorts of possible situations.