My goal is to freeze columns 0 and 1 while also freezing rows 0, 1, and 2 (excluding the header) when scrolling both vertically and horizontally. I attempted to achieve this with jQuery code without success, so I turned to a CSS example from Stack Overflow for my project. Currently, I am focusing on locking the columns only but eventually, I will need to lock the rows as well.
Within an HTML table, I have an ASP.NET C# gridview that populates with data from a SQL database upon page load.
I successfully apply CSS formatting to the grid during the necessary events.
To illustrate, here is a simplified representation of how the grid looks:
You may not see the horizontal scroll bar due to the number of years selected by the user, which can vary depending on their choice.
Below is the recent CSS I implemented:
.pinned
{
position: fixed;
background-color: #FFFFFF;
z-index: 100;
}
.scrolled
{
position: relative;
left: 150px;
overflow: hidden;
white-space: nowrap;
min-width: 50px;
}
.col1
{
left: 0px;
width: 50px;
}
.col2
{
left: 50px;
width: 100px;
}
Here is a snippet of the HTML structure used:
<div style="overflow:scroll; height: 400px; width: 911px; margin:auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" GridLines="Vertical" OnRowCreated="COl" OnRowDataBound="ROWCSS" ShowHeader="false">
</asp:GridView>
</div>
This C# function formats the rows based on certain conditions:
protected void ROWCSS(object sender, GridViewRowEventArgs e)
{
// Code logic here...
}
Similarly, the following C# code controls the column locking operation:
protected void COl(object sender, GridViewRowEventArgs e)
{
// Code logic here...
}
The outcome of applying these changes sometimes results in unexpected visual issues within the first three rows. These anomalies might be related to the colspan functionality triggered in a separate event.
By combining CSS classes like naranjaCSSLEFT, azulCSSRIGHT, negroCSSLEFT, and FILACSS, I set different styles for fonts and backgrounds in specific scenarios.
In conclusion, despite efforts to freeze the columns, the desired effect has not been achieved yet.