ODUG Exclusive Interview with DNN Corp at OpenForce 2009

wills@strohlsitedesign.com — Thu, 05 Nov 2009 02:28:00 PST

Not everyone can go to OpenForce this year. Many things might be a factor in that decision. But if you’re in Central Florida, and not going to OpenForce, you should be coming to the next Orlando DotNetNuke® Users Group (ODUG) meeting. Why? We will be having special (virtual) guests at the beginning of our next meeting. Who are they? You name it. It’s the members of the DotNetNuke Corporation! That’s right. OpenForce 2009 is happening next week which happens to be the same time that we are having our meeting. All of the members of DNN Corp will be having a dinner at OpenForce at the same time as our meeting, so there’s no telling who we’ll talk to!

We will be hearing about the OpenForce event from the founders of DNN Corp. I don’t know about you, but that’s awesome! We will not be steaming the interview, so you must be present at the meeting to hear and watch the interview, as well as ask your own questions.

Technorati Tags: DotNetNuke,DNN,DNN Blogs,OpenForce,Orlando DotNetNuke Users Group,ODUG

Relocate Selected Table Row Using jQuery

wills@strohlsitedesign.com — Wed, 04 Nov 2009 21:47:00 PST

This blog entry is a response to a request from an earlier blog entry, where I used jQuery to search an HTML table. The request as I understand it is this. How can I allow the website visitor click on a row in a HTML table, and relocate that row to the top of the table? Even though I cannot think of a use for this functionality myself, I was intrigued. So here is how I accomplish that task.

First of all, I needed a table to test this on. I used the example from the aforementioned post, as shown below:

     <table id="tblCustomer" cellspacing="0" cellpadding="2" border="1" style="width: 500px;">

        <tbody>

            <tr id="rowHeader" style="font-weight: bold;">

                <td>Firsttd>

                <td>Lasttd>

                <td>Addresstd>

                <td>Citytd>

                <td>Statetd>

            tr>

            <tr>

                <td>Johntd>

                <td>Doughtd>

                <td>123 Main Streettd>

                <td>Orlandotd>

                <td>Floridatd>

            tr>

            <tr>

                <td>Janetd>

                <td>Doughtd>

                <td>4367 South Washington Avenuetd>

                <td>Bartowtd>

                <td>Californiatd>

            tr>

            <tr>

                <td>Barttd>

                <td>Thompsontd>

                <td>531 Townsend Circletd>

                <td>Atlantatd>

                <td>Georgiatd>

            tr>

            <tr>

                <td>Sherrytd>

                <td>Simpsontd>

                <td>3346 Presario Lane, Apt. 123td>

                <td>Seattletd>

                <td>Washingtontd>

            tr>

            <tr>

                <td>Matttd>

                <td>Damontd>

                <td>300 Pounds Streettd>

                <td>Bostontd>

                <td>Massachusettstd>

            tr>

        tbody>

    table>

This table is just a small example of the kind of data you might be working with. In it, we have a listing of “customers” that are displayed. Note that there is a header row that gives context to the information in each column.

The next thing I did was something that I could have and should have done using actual CSS. I added some visual context to the rows to help you visualize what happened. I did it this way to make it easier to add to my blog.

    function setCssRules() {

        // this would be better implemented in a CSS file

        jQuery('#tblCustomer tr:not(\'#rowHeader\')')

            .css('cursor', 'pointer')

            .mouseover(function() {

                jQuery(this).css('background-color', '#c0c0c0');

            })

            .mouseout(function() {

                jQuery(this).css('background-color', '#ffffff');

            });

    }

Looking at the previous code, I just make the little hand show up when the mouse is over a table row. Then, I change the background color for each row, depending on if the mouse is over the row or not.

I used the jQuery(“#tblCustomer tr:not('#rowHeader')”) selector to exclude the first row in the table from the interactive changes.

Next, I add the following jQuery snippet that grabs the clicked row and moves it to the top of the table.

    // wire up the logic to make our function work

    jQuery('#tblCustomer tr:not(\'#rowHeader\')').click(function() {

        // get a reference to the chosen row

        var oRow = this;

        // remove the row from the table

        jQuery(this).remove();

        // add the row to the top of the table

        jQuery('#tblCustomer').prepend(oRow);

        // backtrack to put the header row back at the top of chosen row

        jQuery('#rowHeader').prependTo('#tblCustomer');

        // reset the CSS rules

        jQuery(this).css('background-color', '#ffffff');

        setCssRules();

    });

Notice that the selector is the same as before. Moving the row to the top of the table is easy. However, this table has a header row, so we need to take that into account. The method I used here allows us to move the header row back to the top after the selected row is moved. Finally, we fix the CSS to revert back to our original CSS changes.

Here is the code in action!

First	Last	Address	City	State
John	Dough	123 Main Street	Orlando	Florida
Jane	Dough	4367 South Washington Avenue	Bartow	California
Bart	Thompson	531 Townsend Circle	Atlanta	Georgia
Sherry	Simpson	3346 Presario Lane, Apt. 123	Seattle	Washington
Matt	Damon	300 Pounds Street	Boston	Massachusetts

That’s it! I hope this helps you. Enjoy the complete snippet here:

    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>

        <title>Untitledtitle>

        <script language="javascript" type="text/javascript" src="/Resources/shared/scripts/jquery/jquery.min.js">script>   1:     2:

The Mighty Blog

ODUG Exclusive Interview with DNN Corp at OpenForce 2009

Relocate Selected Table Row Using jQuery