JQuery Scrollable GridView with Fixed Header in ASP.Net : The Official Microsoft ASP.NET Forums

Reply

karinos57

Member

24 Points

JQuery Scrollable GridView with Fixed Header in ASP.Net

Nov 19, 2012 09:05 PM|LINK

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>