Basic usage:

$("table").budapest();

Advanced usage:

$("table").budapest({
  headers: {
    0: { sortable: true},
    1: { sortable: true},
    2: { sortable: true}
  },
  sortIndex: 2,
  sortDirection: "asc",
  onSort: function(index, val1, val2, direction){
    //provide your own sorting algorithm for each column!
    //must return either -1, 0, or 1
  },
  onSorted: function(index, direction){
  //this event is fired after each sort!
  }
});

Check out the full documentation.

Thankfully, after regaining my composure, I was able to find a the solution right here.

Full Page Postback

When an end user selects an item in the first dropdown, the browser will postback the entire page and code on the server will populate the second dropdown with data and send the updated html markup back to the browser to render again. When there is just a small portion of the page that needs to be updated (as is the case in our example), that can be quite expensive! In this example, I have various javascript, css, and image files that have to be downloaded from the server to the client on every load of the back.

Server-side VB.Net Code

'this method is executed when the page posts back after a selection is made in the first dropdown
Private Sub drp1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles drp1.SelectedIndexChanged
        Dim letters As New List(Of String)
        letters.Add("A")
        letters.Add("B")
        letters.Add("C")
        letters.Add("D")
        letters.Add("E")
        letters.Add("F")
        letters.Add("G")
        letters.Add("H")
        letters.Add("I")
        letters.Add("J")
        letters.Add("K")
        letters.Add("L")
        letters.Add("M")
        letters.Add("N")
        letters.Add("O")
        letters.Add("P")
        letters.Add("Q")
        letters.Add("R")
        letters.Add("S")
        letters.Add("T")
        letters.Add("U")
        letters.Add("V")
        letters.Add("W")
        letters.Add("X")
        letters.Add("Y")
        letters.Add("Z")

        drp2.DataSource = letters
        drp2.DataBind()
    End Sub

The Server-side Numbers

When running this, we get a total of 218,049 bytes being sent from the server back to the browser. This number includes the actual html of the entire page, and any necessary javascript, css, or image files that are needed on the page. That is a lot of data!

Ajax Post

When an end user selects an item in the first dropdown, a javascript handler will call the server with a request for data to populate the second dropdown. The server gets the request and sends back just the data requested. The browser gets that data and puts it in the second dropdown. There is no page refreshing. There is no html, javascript, css, or image files being sent back to the client, because they are already there. It is very light!

jQuery Code

        $(document).ready(function() {
            $("#").change(function() {
               //when a selection is made in the dropdown
              //do an ajax post back to the page and get a list of strings
                $.ajax({
                    type: "POST",
                    url: "WebForm1.aspx/GetNextCombobox",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                       //we convert it into an array
                        var arr = jQuery.makeArray(msg.d);
                        //we find the dropdown we want to populate with data
                        var dd = $("#");
                        //let us empty it first of any existing data
                        dd.empty();
                        $.each(arr, function(i, v) {
                            //for each item in the array we got from the server, place it into the dropdown
                            dd.append($("").val(v).text(v));
                        });
                    }
                });
            });
        });

Server-side VB.Net Code

I am still trying out different syntax highlighters for my blog. This one is sometimes adding extra tags when not needed. Please excuse my malformed webmethod tag(s).

'this method is executed when the javascript ajax call requests the data for the second dropdown
 _
Public Shared Function GetNextCombobox() as List(Of String)
        Dim letters As New List(Of String)
        letters.Add("A")
        letters.Add("B")
        letters.Add("C")
        letters.Add("D")
        letters.Add("E")
        letters.Add("F")
        letters.Add("G")
        letters.Add("H")
        letters.Add("I")
        letters.Add("J")
        letters.Add("K")
        letters.Add("L")
        letters.Add("M")
        letters.Add("N")
        letters.Add("O")
        letters.Add("P")
        letters.Add("Q")
        letters.Add("R")
        letters.Add("S")
        letters.Add("T")
        letters.Add("U")
        letters.Add("V")
        letters.Add("W")
        letters.Add("X")
        letters.Add("Y")
        letters.Add("Z")

        Return letters
    End Function

The Ajax Numbers

With this implementation, the server is only passing 111 bytes of data back.

Recap

The postback implementation cost us 218,049 bytes of data being sent from the server to the browser, while the jQuery implementation cost us only 111 bytes! That is 1,964 times less data. Why anyone would be fine with dealing with 1964 times of overhead is beyond me, but the numbers don’t lie.

This is where 3rd party controls typically come in. They usually offer Ajax capabilities that streamline the user experience by hiding the postback a page may execute. With most Ajax calls generated by 3rd party controls, they go through the whole life cycle of the page, the rendering of the page is just localized to the section of the page that you as an end user interacted with. Now some would say that the full page postback is a necessary evil for rapid development. I disagree. 3rd party controls act as a black box for developers. We know what the end result is, but we rarely investigate what is actually going on to make these controls act as they do. I am on the side of taking the time to do it all manually. Screw the controls! I would rather take the time to do it myself, and have complete control of the implementation with the ability to change it if need be. It strengthens you as a developer.

Enter jQuery. I absolutely love jQuery. For those not familar with jQuery, it is a lightweight javascript library that has taken the web 2.0 world by storm. There may be those of you that are saying to yourself “But Dan, isn’t that just another 3rd party toolkit?” Well yes and no. Yes it is something that I did not create, but it is completely extendable and the source code is available for viewing! I really like that. Also, with jQuery the concept of postbacks go away. I have another motto – a page in a web application should only render once. Anything else should be Ajax calls and plain old javascript. Now if only I could convince my bosses to go to ASP.NET MVC (but that is another post for another day).