JQuery Scrollable GridView with Fixed Header in ASP.Net

Question

I am trying to use scrollable GridView in my page but the problem is that the Header and the field or the cell contents are not aligned. In other words, my Cells or Fields are not aligned with the Header; they are little bit shifted to the right. Everything was aligned perfectly before I apply the JQuery Scrollable function and now I am not sure how to fix this. Can someone help? thanks Here is my code

<script src="../Scripts/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="../Scripts/ScrollableGridViewPlugin_ASP.NetAJAXmin.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=GV_Detail.ClientID %>').Scrollable({
            ScrollHeight: 300,
            IsInUpdatePanel: true
        });
    });
</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
<div>
<asp:UpdatePanel ID="up" runat="server">
    <ContentTemplate>
    <asp:GridView ID="GV_Detail" runat="server" 
        AllowSorting="True" AutoGenerateColumns="False" BackColor="White" 
        BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" 
        DataSourceID="GV_Detail_DS">
        <Columns>
                <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
                </Columns> 
        <FooterStyle BackColor="White" ForeColor="#000066" />
        <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
        <RowStyle ForeColor="#000066" />
        <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
        <SortedAscendingCellStyle BackColor="#F1F1F1" />
        <SortedAscendingHeaderStyle BackColor="#007DBB" />
        <SortedDescendingCellStyle BackColor="#CAC9C9" />
        <SortedDescendingHeaderStyle BackColor="#00547E" />
    </asp:GridView>
    <asp:SqlDataSource ID="GV_Detail_DS" runat="server" 
        ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" 
        SelectCommand="SELECT contactname, city, country from my table">
    </asp:SqlDataSource>

     </ContentTemplate>
</asp:UpdatePanel>
</div>

Likol Lee · Accepted Answer · 2012-12-14 16:46:37Z

1

Maybe you can try my solution. I was test all cells aligned.

GridViewScroll with jQuery

enter image description here

answered Dec 14, 2012 at 16:46

Likol Lee

2591 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ansar Over a year ago

this is not working for a gridview in user control , Can you please suggest a solution

Eugene Loy · Accepted Answer · 2013-10-29 06:31:50Z

0

To align the grid with the headers you have remove the cellpadding and then try it out.

Alternatively you can use the plugin above. It works most of the time, however causes double postback in some cases.

edited Oct 29, 2013 at 6:31

Eugene Loy

12.5k8 gold badges57 silver badges79 bronze badges

answered Oct 29, 2013 at 5:51

Abhick Biswas

212 bronze badges

Collectives™ on Stack Overflow

JQuery Scrollable GridView with Fixed Header in ASP.Net

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related