Sorting Indicators on ASP.NET GridView

I was recently trying to sort an ASP.NET gridview and realized it was no easy task to show the column that the grid was sorted by.  I don’t know if 4.0 or 4.5 .NET has this capability, but it seems like the GridView control should have parameters that you could assign an ascending/descending icons to.  Unfortunately, it doesn’t.

In a few lines of code I was able to add an image next to the column header like the example above (see that little triangle?).  I was amazed on what I found online when researching this.  Many developers have a tendency of over-complicating things, so my code below is as bare-bones as possible.

VB.NET (Code-Behind on GridView RowCreated Event):

If e.Row.RowType = DataControlRowType.Header Then
  For Each field As DataControlField In gv1.Columns
    If field.SortExpression = gv1.SortExpression Then
      Dim sortImage As New Image()
      If gv1.SortDirection.ToString = "Ascending" Then
        sortImage.ImageUrl = "images/asc.png"
      Else
        sortImage.ImageUrl = "images/desc.png"
      End If
      sortImage.AlternateText = "Sorted " & gv1.SortDirection.ToString
      e.Row.Cells(gv1.Columns.IndexOf(field)).Controls.Add(sortImage)
    End If
  Next
End If

Line-By-Line:

It’s assumed you already have a GridView databound to an object datasource and you have sorting enabled. This code-behind should be under the gridview (gv1) RowCreated event.

• 1 – Checks if the row being generated is a header row (otherwise, the row is ignored)
• 2 – Sets up a loop to go through each cell, or field, in the row
• 3 – Checks if the sort expression of the GridView matches the current field/column
• If the sort expression matched – enter lines 4 – 11
• 4 – Creates a new image object called ‘sortImage’
• 5 – 9 – Tests the GridView’s current sort direction.  If it’s ‘Ascending’, assign an ImageUrl (you need ascending/descending icons – mine are in my ‘/images’ folder).  Otherwise, assign the descending image to the ImageUrl
• 10 – Sets ALT text to the image so we keep W3C compliance – Mine is a concatenated string that would be something like ‘Sorted Descending’
• 11 – Adds the image to the header cell

I hope this helps someone out there.  I know there are many ways to do this, but this seemed to be the most light-weight scenario I could come up with without using a third-party solution.

Not Receiving Apple ID Verification Email

My mother recently bought an iPhone (Go Mom!). I think the main reason was to FaceTime with my siblings and myself. I was showing her a few little tricks on the phone when I realized she hasn’t downloaded any apps from the app store. I told her how she needed an Apple ID, and once she signed up for one, she could download some neat stuff for the phone. Easy enough, right?

I continued to sign up for an Apple account on her phone. After filling in the long form, I finally got a message telling me to verify the account through the email that was sent to her. I signed in to her email… nothing. I tried multiple times to resend the email from her phone… still nothing hours later. I even tried signing her into iTunes thinking I’d be able to manage her account in there, but iTunes wouldn’t even let me sign in without verifying the account.

I finally went searching online a way to manage my apple account without it being verified and I found a little hidden nugget. Go to https://appleid.apple.com and click on “Manage your account”. From there you can sign in and have the system resend the verification email. This was the only time the email functionality worked. It finally came through and I was able to click on the encrypted link to verify my account.

I hope this helps someone out there. I was about ready to pull my hair out on this. No wonder why technology annoys so many people. Apple, if you’re reading this, you may need to investigate your email function coding. I read a ton of forums of people barking about this same issue with no resolutions.

Creating a Caption Slider with jQuery

I know I’ve been on a jQuery kick.  I guess I’ve been doing a lot of user-interface coding lately.  I really enjoy using jQuery.  It really makes a developer’s life easier as it handles most cross-browser problems.  Also, the way you write it just seems to make logical sense to me.

Anyway, here’s what I’ll be creating today… (go ahead and mouse over Jack).

Hello, my name is Jack

No need for an independent sample page.  This script is pretty easy.  It’s really just a few lines of JavaScript/jQuery.

The HTML…

<div class="theBox">
  <img src="jack.jpg" alt="Jack, the springer" />
  <div class="theBoxCaption">Hello, my name is Jack</div>
</div>

The CSS…

div.theBox { width:325px; height:200px; position:relative; overflow:hidden; }
div.theBox img { width:325px; height:200px; position:absolute; }
div.theBoxCaption { background:#000000; color:#FFFFFF; padding:10px; top:200px; width:305px; position:relative;
	opacity:0.75; filter:alpha(opacity=75);}

The JavaScript/jQuery…

<script type="text/javascript">
$(".theBox").hover(function() {
	var mainHeight = $(this).height(); //height of the main container
	var captionHeight = $(this).find("div.theBoxCaption").innerHeight(); //height of caption box
	var finalPosition = mainHeight - captionHeight; //calculates where the caption box needs to end up at end of animation
	$(this).find("div.theBoxCaption").animate({top:finalPosition + 'px'},{queue:false, duration:500}, 'swing'); //mouseEnter animation
}, function() {
	var mainHeight = $(this).height();
	$(this).find("div.theBoxCaption").animate({top:mainHeight + 'px'},{queue:false, duration:750}, 'swing'); //mouseOut animation
});
</script>

English Translation:

Starting with the HTML, I use a DIV with a class of “theBox” as my main container. I used a class and not an ID intentionally, so it gives me the option to add another image with a caption on the same page (thinking ahead is always good programming practice). The CSS is pretty standard. The important part is to have a position of relative and overflow:hidden on “theBox”. Then, when you set a position:relative for “theBoxCaption”, you need to set the “top” property to match the height of “theBox”. The rest is really powered by jQuery. I’ve seen a lot of plugins out there and always wanted to come up with a way to do this on my own.

The only property I’m animating here is the “top” property on “theBoxCaption”. Initially, this gets set by the CSS of the page (it’s set to 200px). Then, I do some calculating to find out what the top value needs to be at the end of the animation. I subtract the height of the “captionBox” from the height of “theBox”. Then, it’s just a matter of sending that value in an animate function. The second argument of my .hover() function is actually the mouseOut event. A lot of people don’t realize that you don’t need a separate MouseOut event and that you simply just write that in the 2nd argument for the .hover() function. For this example, I’m just reversing what I did and animating the “top” value of “theCaptionBox” back to the height of the main parent container (“theBox”).

This has sort of encouraged me to write my own plugin – maybe I’ll repost this topic at that time. I hope you find this useful.

Removing a Stylesheet from the DOM with jQuery

I was coding a DotNetNuke skin today (pardon me while I throw up), and got sick and tired of the interference of it’s default stylesheet.  Many of you right now are probably thinking the quick fix would be to remove the content from the stylesheet on the server, but the problem is that I am dealing with DotNetNuke Professional, where you can host multiple domains.  Every skin on every domain that’s hosted on the DNN CMS references this stylesheet and you simply can’t do that without screwing up pre-existing sites.  Unfortunately, there is no option to remove the inclusion in the site settings, or anywhere within DotNetNuke.

Today, enough was enough.  I looked at the source code from the browser and thought that since the stylesheet had a unique ID, I could just remove it with the jQuery “.remove()” function.  You can add this small script anywhere on your page, it just has to be placed after the corresponding stylesheet you want to remove.

Here’s the link tag I want to remove:

<link id="APortals__default_" rel="stylesheet" type="text/css" href="/Portals/_default/default.css" />

…and here’s how I removed it with jQuery:

<script type="text/javascript">
  $("#APortals__default_").remove();
</script>

Responsive Page Layouts with jQuery and CSS

Screen resolutions vary tremendously these days.  As a web developer, you want your site to present itself nicely no matter what platform you’re viewing it on.  For years now, many companies thought the best approach to delivering content to a mobile device would be to create a clone of the site specifically styled for mobile devices.  Nice thought I guess.  If you don’t have the budget, or the time to invest in a mobile site or a mobile app, there’s a quick and easy way to have your website go from a static width to a responsive one, and this is all possible with some basic CSS and javascript (I use jQuery, but you can accomplish this with traditional JavaScript).

So here’s what I’m thinking:

I’ll create a site as I normally would with a main stylesheet.  This stylesheet will be where most of my rules are defined for the layout minus the main width of the site.  Keep this in mind when you’re writing your CSS so it will be a simple modification to change the width of the site.  I’m also going to include a copy of jQuery right above the stylesheet.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Website</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="container">
    Website content goes here...
  </div>
</body>
</html>

Then, I’ll create another stylesheet and give it an ID of “smartCSS” so I can reference it via JavaScript (jQuery).  This stylesheet will basically be used set the width of the site to the industry standard.  It should also be placed directly below the existing “main.css” file like so…

...
<title>My Website</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/normal.css" rel="stylesheet" type="text/css" id="smartCSS" />
...

normal.css:

body {
  background:#AAAAAA;
}
div#container {
  width:500px;
}

Now, I’m going to prepare a 3rd stylesheet called “wide.css”. This will be replacing “normal.css” with jQuery when the browser window is wider than 800 pixels.

wide.css:

body {
  background:maroon;
}
div#container {
  width:700px;
}

Here’s where the power comes in… jQuery. This code can be placed anywhere in the document. Some popular places are within the <head> (if you’re going to place it here, it should be directly before the closing head tag. You’re stylesheets and jQuery source file should be above this). You could also put it directly before the closing body tag.

<script type="text/javascript">
  function setWidth() {
    var theWidth = $(window).width();
    if (theWidth > 800) {
      $("#smartCSS").attr("href", "css/wide.css");
    } else {
      $("#smartCSS").attr("href", "css/normal.css");
    }
  }
  $(document).ready(function() { setWidth(); });
  $(window).resize(function() { setWidth(); });
</script>

Allow me to explain:

Line 2 creates a function that gets the width of the browser window. It then checks if the window is greater than 800 pixels. If it is, it sets the “href” attribute of the smartCSS stylesheet to “css/wide.css”. Otherwise, it sets it to “css/normal.css”. This is just defining a function. It never runs unless it’s called. On line 10, it does just that. When the page is loaded, it fires off the function once. This will make the website determine your browser’s width and set it accordingly when the page is loaded. The neat part is on line 11. The jQuery resize() function is called hundreds of times while the browser window is being resized by the user. Every time this occurs, the site is making a choice on how to display the content.

I prepared a demo for you so you can see it in action:

View the Demo