Jquery – Advanced ASP.NET Gridview Layout


So i had a feature request to add fields to a second table row for a single data row on a GridView. At first, I looked at extending the functionality of the GridView but soon realized this would be a huge task and since I consider this request a shim for a larger future feature decided against it. Also want to move to MVC in the near future and this would be throw away code.

So instead I created a little jquery script to move the cell to the next row in the table.

$(document).ready(function() {
    $(".fieldAttributesNextRow").each(function() {
        var parent = $(this).parent();
        var newRow = $("<tr></tr>");
        newRow.attr("class", $(parent).attr("class"));

        var headerRow = $(parent).parent().find(":first");
        var cellCount = headerRow.children().length - headerRow.children().find(".hide").length;

        newRow.append($(this).attr("colspan", cellCount));

What do you think of this? Is this a poor design decision? I am actually quite pleased with the ease of this solution. Please provide your thoughts.

Best Solution

This is client side code, as long as users are not going to play with the gridview after it is loaded, it should be fine. However, if you want to do anything with postbacks, this might need some refactoring.

What are you trying to achieve with the gridview? Remmber that you can hook into the Row bind event and modify the current row however you need to.