Fix gridview header with JQuery and still preserve functionality

Question

I am not an expert in JQuery But I have this code that sets the header fixed and it works as intended:

$(document).ready(function () {
        fixedHeader()
    });


    function fixedHeader() {
        // Code to copy the gridview header with style
        var gridHeader = $('#<%=GridView1.ClientID%>').clone(false);       
        //Code to remove all rows except the header row
        $(gridHeader).find("tr:gt(0)").remove();
        $('#<%=GridView1.ClientID%> tr th').each(function (i) {
            // Here Set Width of each th from gridview to new table th 
            $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
        });
        // Append Header to the div controlHead
        $("#controlHead").append(gridHeader);
        // Set its position to be fixed
        $('#controlHead').css('position', 'fixed');
        // Put it on top
        $('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);

    }

The problem is I lose functionality like this button doesn't call the JS anymore

<asp:Button ID="BtnDelete" runat="server" Text="Delete"  onclick="btnDelete_Click"  class="buttons"  Visible="true"  disabled="disabled"  OnClientClick="if (!deleteRow()) return false;"  />

and I had this function that would highlight the selected row when radio button is selected

 // Method that will highlight row
    function gridviewManipulation() {
        // Get Gridview 
        var gridView = document.getElementById("<%= GridView1.ClientID %>");
        // Loop through the Gridview
        for (var i = 1; i < gridView.rows.length; i++) {
            // Get the radio button of each row in the gridview and see if its checked
            if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == true)
            {
                // Place the color for selection
                gridView.rows[i].style.background = '#9bc27e';

            }
            else if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == false && i % 2 == 0)
            {
                // If its even then place white color back
                gridView.rows[i].style.background = '#FFFFFF';
            }
            else 
            {
                // If its odd place the bluish back on
                gridView.rows[i].style.background = '#E3EAEB'; 
            }
        }
    }

Is there another way to get the header fixed with JQuery? I think the clone and the appending of the new cloned header is ripping my functionality, Any help would be very appreciated!

take a look at this answer, it contains a link to a pluggin, maybe it could work http://stackoverflow.com/a/30400339/4773983 — Enrique Zavaleta, Jul 14 '15 at 22:12

score 0 · Accepted Answer · answered Jul 16 '15 at 17:12

I found that when cloning the gridview you should assign it a new ID so that it doesn't strip functionality so from this:

var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);

to this

 var gridHeader = $('#<%=GridView1.ClientID%>').clone(true).attr('id','clonedGrid');

This will solve most of the functionality, Now good practice is to get rid of the:

OnClientClick="if (!deleteRow()) return false;"

on the ASP button and create a JQuery listener like this

$(document).ready(function () {

       $('#<%=BtnDelete.ClientID%>').click(function () {
            if (!deleteRow()) return false;
        });           
    });

Fix gridview header with JQuery and still preserve functionality

1 Answers1