I was trying to do some work with the Form and List module in DotNetNuke today and I needed to apply some custom styles to the LIST view of a module, without going in and creating a full XSL template for the module to use, I wanted to style the default table based grid view.

In order to customize this view though I needed to do some custom jQuery that runs after the table is loaded, the jQuery then goes through and looks for columns, and based on the number of columns, adjusts the way those columns display.

First I wanted to make it so that a specific column didn’t have text wrapping, which in HTML would normally use the nowrap property on a column, but because of the dynamic nature of F&L you can’t configure that manually. To achieve this I needed to loop through each Table Row (TR) in the table, and then find the column in question, and apply the css attribute/value for white-space/nowrap. To do this I used code like the following.

$("#tableId tr").each(function(){

    var cellCount = $(this).find("td").length;

    if(cellCount==4)

    {

        $(this).find("td:eq(0)").css("white-space","nowrap");

    }

    else

    {

        $(this).find("td:eq(1)").css("white-space","nowrap");

    }

});

Basically that goes through and finds each row in the table, then checks to see how many columns there are. I do this because the VIEW for the table when you are logged in, versus when you aren’t logged in, is different, the F&L module adds an Edit column at position 0, so you can see in the ELSE statement I basically want to set the width on the 2nd column, position 1 in the zero-based array.

If you want to do something similar for the HEADER row of the table you have to do things slightly differently, using the following code

$("#tableId tr:eq(0)").each(function(){

    var cellCount = $(this).find("th").length;

    if(cellCount==4)

    {

        $(this).find("th:eq(0)").css("text-align","left");

        $(this).find("th:eq(1)").css("text-align","left");

    }

    else

    {

        $(this).find("th:eq(1)").css("text-align","left");

        $(this).find("th:eq(2)").css("text-align","left");

    }

});

While spending a bit of time this weekend working on a new color scheme for ChrisHammond.com I came across the need to be able to add a hyperlink to an image (html IMG tag) using jquery. Why would I want to do that? Well, to be honest I didn’t want to go in and modify the “skin” on my DotNetNuke site, but I did want to create a link on the “HeaderGraphic” image in the skin. Originally that image didn’t link anywhere, now, as I am working on fundraising for the The LIVESTRONG Challenge Davis even on June 24, 2012, I wanted to link that graphic to my “Philanthropy” page.

Doing this in jQuery is rather easy to do assuming you have a way to target the element, in this case I can target the .HeaderGraphic class (part of the MultiFunction skin for DotNetNuke).

Here is the sample code for adding a hyperlink to an image using jQuery.

<script>
    $(document).ready(function(){
        $('.HeaderGraphic').wrap( 
                 $('<a>').attr('href', '/philanthropy.aspx')
        );
    });
</script>

In order to safely embed this into a DotNetNuke page I’ve added it into the Header setting in the Module Settings for one of the modules at the bottom. That particular module is configured to Display On All pages using the module settings.

If you found this code to be help, I ask that you please donate to my cause on the Philanthropy page. Donate what you feel is appropriate.