The Disturbed Buddha

Simple Observations of a Self-proclaimed Novice

Highlighting a GridView Row When Clicking a CheckBox

You’ve seen it in Yahoo!® Mail and numerous other places.  When you click a CheckBox next to an item, that item’s row changes color.  When you uncheck the box, the row returns to its original color.

 

Highlighting GridView Rows

 

Basically, we just need to attach a bit of JavaScript to handle the click event of each CheckBox in the GridView.  Here is the JavaScript, if you were to see it by itself:

<script type="text/javascript"> 
    if (this.checked) { 
        document.getElementById('theRowID').style.backgroundColor='Blue'; 
    } else { 
        document.getElementById('theRowID').style.backgroundColor=''; 
    } 
</script>

Notice that we’re setting the background color to an empty string when the CheckBox is unchecked.  We do this because we only want to remove the extra styling that we added.  That way, if your GridView has alternating row styles, it will go back to its original color.

 

We are going to attach this event handler during the RowDataBound event of the GridView.  First, we check to make sure that it is a DataRow that we’re dealing with and not a header or footer.  Then we build the JavaScript using a StringBuilder (which you should use any time that you’re doing string concatenation).  We get the row’s ID from the arguments that were passed into the RowDataBound method:  e.Row.ClientID

 

We then just have to use the FindControl method on the current row and add the event and our JavaScript as an attribute to the CheckBox.  Simple as that!

 

VB.NET:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
    If (e.Row.RowType = DataControlRowType.DataRow) Then 
        Dim script As New StringBuilder 
        script.Append("if (this.checked) {") 
        script.Append("document.getElementById('") 
        script.Append(e.Row.ClientID) 
        script.Append("').style.backgroundColor='Blue';") 
        script.Append("} else {") 
        script.Append("document.getElementById('") 
        script.Append(e.Row.ClientID) 
        script.Append("').style.backgroundColor='';") 
        script.Append("}") 
        CType(e.Row.Cells(0).FindControl("CheckBox1"), CheckBox).Attributes.Add("onclick", script.ToString) 
    End If 
End Sub

I’m sure that you can see how this code could easily be built upon to include fading in/fading out of the color or any other UI effect.

Advertisements

January 31, 2008 Posted by | ASP.NET, Javascript, Web Development | 1 Comment

Determining a Browser’s Dimensions with Javascript

This is about as cross-browswer compatible as you can get:

<script type="text/javascript"> 
    var winW, winH; 
    if (self.innerWidth) { 
        winW = self.innerWidth; 
        winH = self.innerHeight; 
    } else if (document.documentElement && document.documentElement.clientWidth) { 
        winW = document.documentElement.clientWidth; 
        winH = document.documentElement.clientHeight; 
    } else if (document.body) { 
        winW = document.body.clientWidth; 
        winH = document.body.clientHeight; 
    } 
</script>

January 22, 2008 Posted by | ASP.NET, Javascript, Web Development | Leave a comment

Executing Server-side Code from JavaScript

In the Asp.net forums, I often see the question asked, “Can I call server-side code from the client/JavaScript?” Almost invariably, the responses given are “No, the client cannot access the server,” or “You can only use WebMethods or PageMethods.” The first response is not entirely correct, and unfortunately, WebMethods and PageMethods are static methods and therefore have no way to directly access the page.

This is why I present to you the following “hack”. I call it a hack because there really should be some way built into the ASP.NET AJAX Extensions that allow this approach directly. Instead, it relies on using controls in a manner that they aren’t necessarily intended in order to obtain the desired result. But this “hack” does have a redeeming quality—it’s incredibly easy.

The Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>         

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
  <title>My Page</title> 
  <script type="text/javascript"> 
    function myClientButton_onclick() { 
    document.getElementById('myServerButton').click(); 
  } 
  </script> 
  <script runat="server"> 
    Protected Sub myServerButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles myServerButton.Click 
      Response.Redirect("http://www.asp.net/") 
    End Sub 
  </script> 
</head> 
<body> 
  <form id="form1" runat="server"> 
    <input id="myClientButton" type="button" value="Press Me" onclick="return myClientButton_onclick()" /> 
    <asp:Button ID="myServerButton" runat="server" style="display:none;" /> 
  </form> 
</body> 
</html>

Explanation:

What I am doing here is adding a server-side button control (<asp:Button runat=”server” …>). I then make the button invisible by adding style=”display:none;”. In the button’s server-side Click event, I do whatever it is I want to do on the server.

In this example, I am clicking a standard client-side button (<input type=”button” …>) to fire off a server-side redirect, but this could just as easily be called by selecting an item in a DropDownList, typing text into a textbox, etc. Clicking the client button calls the JavaScript .click() event of the server-side button control.

The Next Step:

“What if I need to pass arguments from the client-side script to the server-side script?” Well, this is easily done by putting server-side HiddenField controls on the page. Use the JavaScript to set their values (document.getElementById(‘myHiddenField’).value = “Hello World”;) and then use C# or VB.NET to retrieve them on the server (Dim myVar as String = myHiddenField.Value).

In my next article, I will apply this concept to create a rather easy approach to the Ajax Multi-Stage Download Pattern. Check back soon!

Tested on: Internet Explorer 7, Netscape Browser 8, Firefox 2, Safari 3, Opera 9.

January 8, 2008 Posted by | Ajax, ASP.NET, Javascript, Web Development | 23 Comments