It's been some time since I posted on here and I thought this was cool, so I thought I'd share it with anyone who cares to use it.

I recently had a project that I was working on where the user is presented with a collection of records in a table format, and they can select rows in that table with a checkbox in each row. Like so:

	First Name	Last Name
	Fred	Flintstone
	Mickey	Mouse
	Daffy	Duck

Now imagine that table has near about 500 rows, and the user needs a convenient way to see which rows they've selected before they submit the form. To handle this I thought it'd be cool to highlight each row as the checkbox in that row was selected, so as the user scrolls up and down the page they can see which rows have been selected very easily. That and it just looks cool.

So I set up a simple class called selected that sets a backgound color for the TRs when they are checked, and then I wrote a little bit of javascript:

CSS:

tr.selected {
    background-color: #DAEFF1;
}

JavaScript:

function ToggleSelected(sender) {
    var tr = sender.parentNode;
    while (tr.nodeName.toLowerCase() != 'tr') { tr = tr.parentNode; }
    tr.setAttribute('className', (sender.checked ? 'selected' : ''));
    tr.setAttribute('class', (sender.checked ? 'selected' : ''));
}

You can see by reading through the JavaScript that all it does is find the containing TR element and toggle the class (or classname for IE) to "selected" or nothing depending on the status of the checkbox.

Once I had that function written, I just added a call to it in the onclick event in each checkbox, passing the checkbox itself as the sender: onclick="ToggleSelected(this)"
Now I have a nice highlight for each row when they are checked:

	First Name	Last Name
	Fred	Flintstone
	Mickey	Mouse
	Daffy	Duck

You can easily lift this little JavaScript function and use it on any page that has a table with checkboxes in the rows. Just don't forget to declare the selected class in your CSS.

I just hit this barrier and for a moment lapsed into a state of complete despair. I thought "surely there must be a way for me to assign my own javascript events to ASP controls that I create at runtime". I know it's possible to assign an .OnClientClick property to an ASP:Button but there is mysteriously no such property on ASP:CheckBox controls.

But I wasn't finding anything. There are a few hackish workarounds, that involve creating control trees with overlapping controls that can receive onclick events, and tricking the end user into thinking they are clicking your checkbox when in fact they are are clicking something else, that then does a bunch of voodoo behind the scenes and "solves" your problem; but looking at those solutions started making me seasick. I tend to be overly optimistic in my belief that all of these things are possible and even easy, to someone who looks hard enough.

Now the core of my dilemma is the runtime part. One of the more simple hackabout fixes involves just sticking an onclick="alert('chowder');" into the ASP:CheckBox tag on the designer form, however if you're psychotic like me and create the majority of your controls dynamically at runtime, you have no such luxury.

<ASP:CheckBox runat="server" ID="myCheckBox" onclick="alert('chowder');" />

This one works because the CheckBox control doesn't have an onclick event (like the Button does), so the ASP engine just ignores the attribute and sends it to the browser as is. Some folks who are much smarter that I am explain it pretty well here.

After some poking around with the internet without any luck, the answer struck me. The onclick attribute is just that, an attribute! So all I needed to do was use the .Attributes collection that is a part of any WebControl, since it is part of the base WebControl type.

Therefore, my solution in the end was frighteningly simple:

myCheckBox.Attributes["onclick"] = "Alert(\"chowder!\");";

By using the .Attributes collection, the attribute was handed down directly to the HTML without any tinkering from ASP. Using that, you can add just about any attribute to your HTML when it renders, all at runtime!

I've seen this question come up a couple of times and so I thought I'd take a shot at it.

"How do I change the text in a password field from readable text to the password dots in real time?"

Of course the first answer is to use jquery, and that would be a good solution. However, where is the fun in doing that? Not to mention all the overhead of loading in a huge JS library to perform one simple task.

So enter the raw solution, no libraries just JavaScript, naked and beautiful. Normally, this would be an even easier solution, all you have to do is switch the "type" property of the text box from "text" to "password" on the fly and you're done, however that won't work in IE thanks to a clever decision in Seattle to make the "type" property read only once an element has been added to the DOM. So what we have to do is actually remove the element and create a replacement, and then swap in the replacement on the go.

HTML:

<input type="text" name="inpPass" id="inpPass" value="Password"/>

JavaScript:

var inpPass = document.getElementById("inpPass");
inpPass.onfocus = function() {
    if(this.getAttribute("type") == "text") {
        var newInp = document.createElement('input');
        newInp.onfocus = this.onfocus;
        newInp.onblur = this.onblur;
        newInp.ID = 'inpPass';
        newInp.name = 'inpPass';
        newInp.setAttribute('type', 'password');
        this.parentNode.appendChild(newInp);
        this.parentNode.removeChild(this);
        newInp.focus();
    }
}
inpPass.onblur = function() {
    if(this.value == "") {
        var newInp = document.createElement('input');
        newInp.onfocus = this.onfocus;
        newInp.onblur = this.onblur;
        newInp.ID = 'inpPass';
        newInp.name = 'inpPass';
        newInp.setAttribute('type', 'text');
        newInp.value = "Password";
        this.parentNode.appendChild(newInp);
        this.parentNode.removeChild(this);
    }
}

If you read through the above code you can see that a new element is created, it borrows the event handlers from its predecessor, we set its name and ID, and we place it on the form right after we blow up the original.