Gridview with Freeze Panes Horizontal and Vertical
12,388
I am able to freeze Headers easily and had have some luck with freezing any column you want. But horizontal scroll is an issue. For headers I have used Css and for columns I am manipulating css with help of jquery. With more tweaking it can be achieved.
<div class="container">
<asp:GridView ID="grdview_items" runat="server"
DataSourceID="SDS_items"
EnableViewState="false" Width="800">
<HeaderStyle CssClass="grdview_headers" />
<Columns>
<asp:TemplateField HeaderStyle-Width="200px" ItemStyle-Width="200px" HeaderText="Item1"><ItemTemplate></ItemTemplate></asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="300px" ItemStyle-Width="300px" HeaderText="Item2"><ItemTemplate></ItemTemplate></asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="300px" ItemStyle-Width="300px" HeaderText="Item3"><ItemTemplate></ItemTemplate></asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<style>
.container
{
overflow:auto;
margin-left:10px;
height:300px;
width:710px;
}
.grdview_headers
{
color:#330000;
position:absolute;
display:block;
width:790px;
margin-top:-1px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.container tr>td:nth-child(2)').css("background-color", "#EAEAEA").css("position", "absolute");
});
</script>
Author by
Soner Gönül
Software Architect at Akbank. I love solving problems with writing code. Always have, always will. I solve LeetCode and Hackerrank problems, and other algorithms on my Youtube channel. I also stream on Twitch. Tiktok: tiktok.com/@soner_gonul Instagram: instagram.com/sonergonul/
Updated on June 23, 2022Comments
-
Soner Gönül almost 2 years
Before you say, yeah this question can be duplicate;
https://stackoverflow.com/questions/2912890/gridview-freeze-pane-solutions
How to freeze GridView header?
Freeze GridView Header in ASP.NET?
How To Freeze Columns in GridView
But there is no solution both freeze pane Horizontal and Vertical.
I have a
Gridviewlike this.
Here is my
Gridviewcode; (Sorry for long code)<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames ="HESAP_NO,DOVIZ_KOD" Font-Names="Verdana" Font-Size="Small" AllowSorting="True" onrowdatabound="GridView1_RowDataBound" onrowupdating="GridView1_RowUpdating" onrowcommand="GridView1_RowCommand" PageSize="2" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical" > <Columns> <asp:ButtonField ButtonType="Image" ImageUrl="~/images/InsertButton.gif" CommandName="Insert" /> <asp:ButtonField ButtonType="Image" ImageUrl="~/images/SelectButton.gif" CommandName="Select" /> <asp:CommandField ShowEditButton="True" ButtonType="Image" EditImageUrl="~/images/EditButton.gif" cancelimageurl="~/images/CancelButton.gif" updateimageurl="~/images/UpdateButton.gif" ItemStyle-Wrap="False" > <ItemStyle Wrap="False"></ItemStyle> </asp:CommandField> <asp:TemplateField HeaderText="HESAP" SortExpression="HESAP_NO"> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Bind("HESAP_NO") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="MÜŞTERİ" SortExpression="MUS_K_ISIM"> <ItemTemplate> <asp:Label ID="Label2" runat="server" Text='<%# Bind("MUS_K_ISIM") %>'></asp:Label> <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:SqlServerCstr %>" InsertCommand="INSERT INTO MEMO VALUES(@M_HESAP_NO, @S_TARIH, @S_TUTAR, @DOV_KOD, @G_NOT, @G_KISI, 4, @login, GETDATE())" SelectCommand="SELECT * FROM MEMO A, P_SONUC B, P_KUR C WHERE A.S_SONUC = B.SONUC_KOD AND A.S_KUR = C.DOV_KOD AND B.LANG = 1 AND ([M_HESAP_NO] = @M_HESAP_NO)" UpdateCommand="UPDATE MEMO SET S_SONUC = @SONUC_KOD WHERE NOT_ID = @NOT_ID" > <SelectParameters> <asp:QueryStringParameter Name="M_HESAP_NO" QueryStringField="T_HESAP_NO" Type="Int32" /> </SelectParameters> <InsertParameters> <asp:ControlParameter Name="M_HESAP_NO" ControlID="Label1" PropertyName="Text" /> <asp:Parameter Name="S_TARIH" Type="DateTime"/> <asp:Parameter Name="S_TUTAR" /> <asp:Parameter Name="DOV_KOD" /> <asp:Parameter Name="G_NOT" /> <asp:Parameter Name="G_KISI" /> <asp:SessionParameter Name="login" SessionField="login" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="NOT_ID" /> <asp:Parameter Name="SONUC_KOD" /> </UpdateParameters> </asp:SqlDataSource> <asp:GridView ID="ChildGridView1" runat="server" DataKeyNames="NOT_ID" Visible="False" DataSourceID="SqlDataSource4" AutoGenerateColumns="False" > <Columns> <asp:CommandField ShowEditButton="True"/> <asp:TemplateField HeaderText="Not No"> <ItemTemplate> <asp:Label ID="LabelNotID" runat="server" Text='<%# Eval("NOT_ID") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Görüşülen"> <ItemTemplate> <asp:Label ID="LabelGorKisi" runat="server" Text='<%# Eval("G_KISI") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Görüşen"> <ItemTemplate> <asp:Label ID="LabelGrKisi" runat="server" Text='<%# Eval("OPERATOR") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Söz. Tarih"> <ItemTemplate> <asp:Label ID="LabelSozTarih" runat="server" Text='<%# Eval("S_TARIH","{0:d}") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Söz. Tutar"> <ItemTemplate> <asp:Label ID="LabelSozTutar" runat="server" Text='<%# Eval("S_TUTAR","{0:n2}") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Kur"> <ItemTemplate> <asp:Label ID="LabelKur" runat="server" Text='<%# Eval("DOV_CINS") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText = "Gör. Tarih"> <ItemTemplate> <asp:Label ID="LabelGorTarih" runat="server" Text='<%# Eval("A_TARIH","{0:dd/MM/yyyy HH:mm}") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText = "Söz Durum"> <ItemTemplate> <asp:Label ID="LabelSozDurum" runat="server" Text='<%# Eval("SONUC_ACK") %>'></asp:Label> </ItemTemplate> <EditItemTemplate> <asp:SqlDataSource ID="SqlDataSource7" runat="server" ConnectionString="<%$ ConnectionStrings:SqlServerCstr %>" SelectCommand="SELECT SONUC_KOD, SONUC_ACK FROM P_SONUC WHERE (SONUC_KOD > 3 AND LANG = 1) OR (SONUC_KOD < 0 AND LANG = 1)" > </asp:SqlDataSource> <asp:DropDownList id="lstSONUC" runat="server" AppendDataBoundItems="false" DataSourceID="SqlDataSource7" DataTextField="SONUC_ACK" DataValueField="SONUC_KOD" SelectedValue='<%# BIND("SONUC_KOD") %>'> </asp:DropDownList> </EditItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Not"> <ItemTemplate> <asp:TextBox ID="TxtNot" runat="server" Text='<%# Eval("G_NOT") %>' Height="35" TextMode="MultiLine" ReadOnly="True"> </asp:TextBox> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:DetailsView id="MemoDetailView" DataSourceID="SqlDataSource4" Runat="Server" AutoGenerateRows="False" Visible="False" OnModeChanged="MemoDetailView_ModeChanged"> <Fields> <asp:TemplateField HeaderText = "Görüşülen"> <InsertItemTemplate> <asp:TextBox ID="txtG_KISI" Text='<%# Bind("G_KISI") %>' runat="server"></asp:TextBox> </InsertItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText = "Söz Tarihi"> <InsertItemTemplate> <cc1:CalendarExtender ID="txtSTR_CalendarExtender" runat="server" Enabled="True" Format="dd/MM/yyyy" TargetControlID="txtSTR" PopupButtonID="ImageButton4" PopupPosition="BottomLeft"> </cc1:CalendarExtender> <br /> <table> <tr> <td> <asp:TextBox ID="txtSTR" Text = '<%# Bind("S_TARIH") %>' runat="server" Height="16px" Width="85px"></asp:TextBox> </td> <td> <asp:Image ID="ImageButton4" runat="server" ImageUrl="~/images/SmallCalendar.gif"/> </td> </tr> </table> </InsertItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText = "Ödeme Tutarı"> <InsertItemTemplate> <asp:TextBox ID="txtTutar" Text='<%# Bind("S_TUTAR") %>' runat="server"></asp:TextBox> </InsertItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText = "Kur"> <InsertItemTemplate> <asp:SqlDataSource ID="SqlDataSource6" runat="server" ConnectionString="<%$ ConnectionStrings:SqlServerCstr %>" SelectCommand="SELECT [DOV_KOD],[DOV_CINS] FROM [Scania].[dbo].[P_KUR] ORDER BY [DOV_CINS]"> </asp:SqlDataSource> <asp:DropDownList id="lstKur" runat="server" DataSourceID="SqlDataSource6" DataTextField="DOV_CINS" DataValueField="DOV_KOD" SelectedValue='<%# BIND("DOV_KOD") %>'> </asp:DropDownList> </InsertItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText = "Not"> <InsertItemTemplate> <asp:TextBox ID="txtG_NOT" Text='<%# Bind("G_NOT") %>' TextMode="multiline" runat="server" Height="100"></asp:TextBox> </InsertItemTemplate> </asp:TemplateField> </Fields> </asp:DetailsView> </ItemTemplate> <ItemStyle Wrap="False" /> </asp:TemplateField> <asp:BoundField DataField="TEMSILCI_ACK" HeaderText="TEMSİLCİ" ReadOnly="True" SortExpression="TEMSILCI_ACK" ItemStyle-Wrap="False" > <ItemStyle Wrap="False"></ItemStyle> </asp:BoundField> <asp:BoundField DataField="DOVIZ_CINS" HeaderText="KUR" SortExpression="DOVIZ_CINS" readonly="true"/> <asp:BoundField DataField="0-30" HeaderText="0-30" ReadOnly="True" SortExpression="0-30" DataFormatString="{0:n2}" /> <asp:BoundField DataField="31-60" HeaderText="31-60" ReadOnly="True" SortExpression="31-60" DataFormatString="{0:n2}"/> <asp:BoundField DataField="61-90" HeaderText="61-90" ReadOnly="True" SortExpression="61-90" DataFormatString="{0:n2}"/> <asp:BoundField DataField="90+" HeaderText="90+" ReadOnly="True" SortExpression="90+" DataFormatString="{0:n2}"/> <asp:BoundField DataField="TOPLAM" HeaderText="TOPLAM" ReadOnly="True" SortExpression="TOPLAM" DataFormatString="{0:n2}"/> <asp:BoundField DataField="TOP_GECIKME" HeaderText="GECİK. FAİZİ" ReadOnly="True" SortExpression="TOP_GECIKME" DataFormatString="{0:n2}"/> <%-- <asp:BoundField DataField="FAALIYET_ACK" HeaderText="FAALİYET" SortExpression="FAALIYET_ACK" readonly="true" ItemStyle-Wrap="False" > <ItemStyle Wrap="False"></ItemStyle> </asp:BoundField>--%> <%-- <asp:BoundField DataField="TEMSILCI_ACK" HeaderText="TEMSİLCİ" SortExpression="TEMSILCI_ACK" readonly="true" ItemStyle-Wrap="False" > <ItemStyle Wrap="False"></ItemStyle> </asp:BoundField>--%> <asp:TemplateField HeaderText="STATÜ" HeaderStyle-ForeColor="Blue"> <ItemTemplate> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SqlServerCstr %>" SelectCommand="SELECT B.T_ST_ID, B.T_ST_ACK, C.T_SR_ID, C.T_SR_ACK, CONVERT(VARCHAR(10),A.NOTER_TAR,103) AS NOTER_TAR, CONVERT(VARCHAR(10),A.ICRA_TAR,103) AS ICRA_TAR, CONVERT(VARCHAR(10),A.HACIZ_TAR,103) AS HACIZ_TAR, A.YAK_EMIR, D.SONUC_ACK, A.T_NOT FROM TAKIP A, P_TAKIP_ST B, P_TAKIP_SR C, P_SONUC D WHERE A.T_STATU = B.T_ST_ID AND A.T_SRM = C.T_SR_ID AND A.YAK_EMIR = D.SONUC_KOD AND B.LANG = 1 AND D.LANG = 1 AND T_HESAP_NO = @T_HESAP_NO "> <SelectParameters> <asp:Parameter Name="T_HESAP_NO" Type="String" /> </SelectParameters> </asp:SqlDataSource> <asp:Label ID="lblSTATU" runat="server"> </asp:Label> </ItemTemplate> <EditItemTemplate> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SqlServerCstr %>" SelectCommand="SELECT B.T_ST_ID, B.T_ST_ACK, C.T_SR_ID, C.T_SR_ACK, CONVERT(VARCHAR(10),A.NOTER_TAR,103) AS NOTER_TAR, CONVERT(VARCHAR(10),A.ICRA_TAR,103) AS ICRA_TAR, CONVERT(VARCHAR(10),A.HACIZ_TAR,103) AS HACIZ_TAR, A.YAK_EMIR, D.SONUC_ACK, A.T_NOT FROM TAKIP A, P_TAKIP_ST B, P_TAKIP_SR C, P_SONUC D WHERE A.T_STATU = B.T_ST_ID AND A.T_SRM = C.T_SR_ID AND A.YAK_EMIR = D.SONUC_KOD AND B.LANG = 1 AND D.LANG = 1 AND T_HESAP_NO = @T_HESAP_NO "> <SelectParameters> <asp:Parameter Name="T_HESAP_NO" Type="String" /> </SelectParameters> </asp:SqlDataSource> <asp:DropDownList id="lstSTATU" runat="server" AutoPostBack="true" DataSourceID="SqlDataSource3" DataTextField="T_ST_ACK" DataValueField="T_ST_ID" Enabled="True" Font-Names="Verdana" Font-Size="Small" > </asp:DropDownList> </EditItemTemplate> <HeaderStyle ForeColor="White"></HeaderStyle> </asp:TemplateField> <asp:TemplateField HeaderText="SORUMLU" HeaderStyle-ForeColor="Blue" ItemStyle-Wrap="False"> <ItemTemplate> <asp:Label ID="lblSRM" runat="server"> </asp:Label> </ItemTemplate> <EditItemTemplate> <asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:SqlServerCstr %>" SelectCommand="SELECT [T_SR_ID], [T_SR_ACK], T_ST_ID FROM [P_TAKIP_SR]" FilterExpression="T_ST_ID = '{0}'"> <FilterParameters> <asp:ControlParameter Name="categoryParam" ControlID="lstSTATU" PropertyName="SelectedValue" /> </FilterParameters> </asp:SqlDataSource> <asp:DropDownList id="lstSORUMLU" runat="server" DataSourceID="SqlDataSource5" DataTextField="T_SR_ACK" DataValueField="T_SR_ID" Font-Names="Verdana" Font-Size="Small"> </asp:DropDownList> </EditItemTemplate> <HeaderStyle ForeColor="White"></HeaderStyle> <ItemStyle Wrap="False"></ItemStyle> </asp:TemplateField> <asp:TemplateField HeaderText="NOTER TAR." ItemStyle-Wrap="False" HeaderStyle-Wrap="False" HeaderStyle-ForeColor="Blue"> <EditItemTemplate> <cc1:CalendarExtender ID="txtNTR_CalendarExtender" runat="server" Enabled="True" Format="dd/MM/yyyy" TargetControlID="txtNTR" PopupButtonID="ImageButton1" PopupPosition="BottomLeft"> </cc1:CalendarExtender> <br /> <table> <tr> <td> <asp:TextBox ID="txtNTR" runat="server" Height="16px" Width="85px"></asp:TextBox> </td> <td> <asp:Image ID="ImageButton1" runat="server" ImageUrl="~/images/SmallCalendar.gif"/> </td> </tr> </table> </EditItemTemplate> <ItemTemplate> <asp:Label ID="lblNTR" runat="server"> </asp:Label> </ItemTemplate> <HeaderStyle Wrap="False" ForeColor="White"></HeaderStyle> <ItemStyle Wrap="False"></ItemStyle> </asp:TemplateField> <asp:TemplateField HeaderText="İCRA TAR." ItemStyle-Wrap="False" HeaderStyle-Wrap="False" HeaderStyle-ForeColor="Blue"> <EditItemTemplate> <cc1:CalendarExtender ID="txtITR_CalendarExtender" runat="server" Enabled="True" Format="dd/MM/yyyy" TargetControlID="txtITR" PopupButtonID="ImageButton2" PopupPosition="BottomLeft"> </cc1:CalendarExtender> <br /> <table> <tr> <td> <asp:TextBox ID="txtITR" runat="server" Height="16px" Width="85px"></asp:TextBox> </td> <td> <asp:Image ID="ImageButton2" runat="server" ImageUrl="~/images/SmallCalendar.gif"/> </td> </tr> </table> </EditItemTemplate> <ItemTemplate> <asp:Label ID="lblITR" runat="server"> </asp:Label> </ItemTemplate> <HeaderStyle Wrap="False" ForeColor="White"></HeaderStyle> <ItemStyle Wrap="False"></ItemStyle> </asp:TemplateField> <asp:TemplateField HeaderText="FİİLİ HACİZ TAR." ItemStyle-Wrap="False" HeaderStyle-Wrap="False" HeaderStyle-ForeColor="Blue"> <EditItemTemplate> <cc1:CalendarExtender ID="txtHTR_CalendarExtender" runat="server" Enabled="True" Format="dd/MM/yyyy" TargetControlID="txtHTR" PopupButtonID="ImageButton3" PopupPosition="BottomLeft"> </cc1:CalendarExtender> <br /> <table> <tr> <td> <asp:TextBox ID="txtHTR" runat="server" Height="16px" Width="85px"></asp:TextBox> </td> <td> <asp:Image ID="ImageButton3" runat="server" ImageUrl="~/images/SmallCalendar.gif"/> </td> </tr> </table> </EditItemTemplate> <ItemTemplate> <asp:Label ID="lblHTR" runat="server"> </asp:Label> </ItemTemplate> <HeaderStyle Wrap="False" ForeColor="White"></HeaderStyle> <ItemStyle Wrap="False"></ItemStyle> </asp:TemplateField> <asp:TemplateField HeaderText="YAK. EMRİ" ItemStyle-Wrap="False" HeaderStyle-Wrap="False" HeaderStyle-ForeColor="Blue"> <EditItemTemplate> <asp:DropDownList ID="lstYEM" runat="server" DataSourceID="SqlDataSource6" DataTextField="SONUC_ACK" DataValueField="SONUC_KOD" Font-Names="Verdana" Font-Size="Small"> </asp:DropDownList> <asp:SqlDataSource ID="SqlDataSource6" runat="server" ConnectionString="<%$ ConnectionStrings:SqlServerCstr %>" SelectCommand="SELECT * FROM [P_SONUC] WHERE ([SONUC_KOD] < @SONUC_KOD)AND LANG = 1"> <SelectParameters> <asp:Parameter DefaultValue="4" Name="SONUC_KOD" Type="Int16" /> </SelectParameters> </asp:SqlDataSource> </EditItemTemplate> <ItemTemplate> <asp:Label ID="lblYEM" runat="server"> </asp:Label> </ItemTemplate> <HeaderStyle Wrap="False" ForeColor="White"></HeaderStyle> <ItemStyle Wrap="False"></ItemStyle> </asp:TemplateField> <asp:TemplateField HeaderText="NOT" HeaderStyle-ForeColor="Blue" ItemStyle-Wrap="False"> <ItemTemplate> <asp:TextBox ID="txlbTNOT" runat="server" ReadOnly = "true" TextMode="MultiLine"> </asp:TextBox> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID="txtTNOT" runat="server" Height="35" TextMode="MultiLine" DataSourceID="SqlDataSource8"></asp:TextBox> <asp:SqlDataSource ID="SqlDataSource8" runat="server" ConnectionString="<%$ ConnectionStrings:SqlServerCstr %>" SelectCommand="SELECT [T_NOT] FROM [TAKIP] WHERE T_HESAP_NO = @T_HESAP_NO "> <SelectParameters> <asp:Parameter Name="T_HESAP_NO" Type="String" /> </SelectParameters> </asp:SqlDataSource> </EditItemTemplate> <HeaderStyle ForeColor="White"></HeaderStyle> <ItemStyle Wrap="False"></ItemStyle> </asp:TemplateField> </Columns> <FooterStyle BackColor="#CCCCCC" /> <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#FFFFCC" Font-Bold="True" ForeColor="Black" /> <HeaderStyle BackColor="Blue" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="#CCCCCC" /> </asp:GridView>What i want is, classic
Headerfreeze pane when i scroll down AND afterTEMSİLCİcolumn freeze pane when i scroll right. (TEMSİLCİ column should stable, other columns moves when i scroll right)Is it possible with CSS or other way?