Hierarchical Table Manipulation with jQuery

I recently had to propagate change down a table that represented hierarchical data as well as show and hide columns.  The most important requirement was that the changes should not propagate up any levels, only down.  I have put up a sample on JSBin here that simulates generated HTML from ASP.NET(ie: dynamic control ids).  Most of the manipulation is done with class names.  The show and hide columns could probably have been done better, but you will get the gist.

jQuery functions:

       $(document).ready(function () {
            $('.HideTableDemoTab').click(function () {

            $('.ShowTableDemoTab').click(function () {

            $('.TableDemoTabShowAll').click(function () {


        function PropagateChanges(rowId, inputChanged, inputTarget, level) {
            if ($('.chkPropagate input').attr('checked')) {
                var tableRows = $('.TableDemo > tbody > tr:gt(' + rowId + ')');
                tableRows.each(function () {
                    var tableCells = $(this);
                    var currentLevel = tableCells.find('.Level').val();

                    if (currentLevel < level) {
                        tableCells.find('.' + inputTarget).val($('#' + inputChanged).val());

                    else {
                        return false; //break out of loop can't change parents



        function HideTableColumn(column) {
            if (column.id == "tabHideCol1") {
                $("#TableDemo td:nth-child(1)").hide();
            else if (column.id == "tabHideCol2") {
                $("#TableDemo td:nth-child(2)").hide();
            else if (column.id == "tabHideCol3") {
                $("#TableDemo td:nth-child(3)").hide();


        function ShowTableColumn(column) {
            if (column.id == "tabShowCol1") {
                $("#TableDemo td:nth-child(1)").show();
            else if (column.id == "tabShowCol2") {
                $("#TableDemo td:nth-child(2)").show();
            else if (column.id == "tabShowCol3") {
                $("#TableDemo td:nth-child(3)").show();


        function ShowAllColumns() {
            $("#TableDemo td:nth-child(1)").show();
            $("#TableDemo td:nth-child(2)").show();
            $("#TableDemo td:nth-child(3)").show();

Free .NET IDE’s


#develop (short for SharpDevelop) is a free IDE for C#, VB.NET and Boo projects on Microsoft’s .NET platform.


MonoDevelop is an IDE primarily designed for C# and other .NET languages. MonoDevelop enables developers to quickly write desktop and ASP.NET Web applications on Linux, Windows and Mac OSX. MonoDevelop makes it easy for developers to port .NET applications created with Visual Studio to Linux and to maintain a single code base for all platforms.

jQuery Snippets for Visual Studio 2010

If you know me you know that jQuery is my favorite technology right now.  If you thought it was easy to use already, I have a treat for you.  Check out these jQuery Snippets for Visual Studio 2010 by John Sheehan to boost your jQuery productivity in Visual Studio 2010.

John also has a dedicated page to .NET Cheat Sheets I  print and use all the time.

Microsoft AJAX CDN

Microsoft Ajax Content Delivery Network

The Microsoft Ajax content delivery network (CDN) enables you to easily add ASP.NET Ajax Library and jQuery scripts to your Web applications. You can start using the ASP.NET Ajax Library or jQuery simply by adding a <script> tag to your page that points to Ajax.microsoft.com.

By taking advantage of the Microsoft Ajax CDN, you can significantly improve the performance of your Ajax applications. The contents of the Microsoft Ajax CDN are cached on servers located around the world. In addition, the Microsoft Ajax CDN enables browsers to reuse cached JavaScript files for Web sites that are located in different domains.

Scott Guthrie has a nice write up:  Announcing the Microsoft AJAX CDN

Posted in AJAX, ASP.NET. Tags: . 1 Comment »

ASP.NET 4.0 and Visual Studio 2010 Web Development Beta 2 Overview

Whitepaper on all the new things to come:

Many exciting changes for ASP.NET are coming in the .NET Framework version 4. This document gives an overview of many of the new features that are included in the upcoming Beta 2 release of the .NET Framework 4 and of Visual Studio 2010.


My favorites so far:

UpdatePanel Async Postsback slow in IE…Part 3

So, I have received an updated script from Microsoft for KB 2000262.  The issues I found in the last script are now fixed.  In my testing so far it appears to be faster and stable.  The JS function is below, I am sure the KB will be updated soon.

    function disposeTree(sender, args) {
        var elements = args.get_panelsUpdating();
        for (var i = elements.length - 1; i >= 0; i--) {
            var element = elements[i];
            var allnodes = element.getElementsByTagName('*'),
                length = allnodes.length;
            var nodes = new Array(length)
            for (var k = 0; k < length; k++) {
                nodes[k] = allnodes[k];
            for (var j = 0, l = nodes.length; j < l; j++) {
                var node = nodes[j];
                if (node.nodeType === 1) {
                    if (node.dispose && typeof (node.dispose) === "function") {
                    else if (node.control && typeof (node.control.dispose) === "function") {

                    var behaviors = node._behaviors;
                    if (behaviors) {
                        behaviors = Array.apply(null, behaviors);
                        for (var k = behaviors.length - 1; k >= 0; k--) {
            element.innerHTML = "";

Part 2
Part 1

UpdatePanel Async Postsback slow in IE…Part 2

I have a small update to the slow UpdatePanel Async Postback issue.

Microsoft has updated their temporary fix that they provided to me last week:  http://support.microsoft.com/kb/2000262.

I am still working with them on this script as we found some more problems with it today.  I recommend not using it right now.