How can i use this jquery plugin for gridview instead of table

Question

Hi all i would like to work out this functionality for grdiveiw instead of table can any one guide me please.

http://fixedheadertable.com/

I tried this by registering the required scripts but didn't work for me so can any one help me

<asp:GridView ID="grdEarnings" runat="server" CssClass="myTable01" AutoGenerateColumns="False"
        AlternatingRowStyle-BackColor="#DEE6F7" ShowHeader="true" Font-Size="11pt">
        <Columns>
            <asp:TemplateField ItemStyle-Width="150px" ItemStyle-HorizontalAlign="Center" HeaderText="ID">
                <EditItemTemplate>
                    <asp:Label ID="lbl" runat="server" Text="<%#ID %>"></asp:Label>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ItemStyle-Width="150px" ItemStyle-HorizontalAlign="Center" HeaderText="Name">
                <ItemTemplate>
                    <asp:Label ID="lblRegular" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="150px" HeaderText="Price">
                <ItemTemplate>
                    <asp:Label ID="lblPrice" runat="server" Text='<%# Eval("Price") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="150px" HeaderText="Description">
                <ItemTemplate>
                    <asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

The other one i tried works fine for me but as i am using tool tips in my application i included some scripts related to that when i include that i am unable to view the scroll bar for grid view

Untitled Page

 <script src="Scripts/ScrollableGridPlugin.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#<%=grdEarnings.ClientID %>').Scrollable({ ScrollHeight: 300 }); }); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

if i commented the scripts that were after the Jquery function this works well enough for me. But while running along with those scripts i am unable to view the scroll bar for gridview

Answer 1

You need to first include jQuery and then your jQuery plugin (ScrollableGridPlugin). Moreover I don't understand why you have multiple jQuery includes with different versions (1.4.2, 1.4.4, 1.3.2)?

Whether the jQuery ScrollableGridPlugin works with an ASP GridView rather than with a normal table depends on the HTML which is generated by the GridView.

(Moreover, shouldn't the call be $('selector').fixedHeaderTable({ footer: false, cloneHeadToFoot: true, fixedColumn: false }); according to the docs you provided? )

Answer 2

For the FixedHeaderTable plugin usage you need to add a thead element to grdidview and move the very first gridview's row into it:

$(function () {
     var gridView = $("#<%= grdEarnings.ClientID %>");
     gridView.prepend( $("<thead></thead>").append( gridView.find("tr:first") ) );

     gridView.fixedHeaderTable({ height: '300' });
});