Panel Freeze in Both Directions for a Grid View

Don't judge, this question may sound familiar;

Link to GridView freeze pane solutions

How can you freeze the header on a GridView?

Freezing the Header in ASP.NET GridView - Is it Possible?

Freezing Columns in a GridView - How To Do It

However, there seems to be no solution available for freezing both horizontally and vertically.

I have a Gridview set up like this:

Below is my lengthy GridView code: (Apologies for the extended code)

<!-- Insert your Gridview code here -->

My goal is to achieve a traditional frozen pane header when scrolling down, as well as a frozen pane after the TEMSİLCİ column when scrolling right. (The TEMSİLCİ column should remain fixed while other columns move with scrolling to the right)

Is there a way, using CSS or any other method, to accomplish this?

c#asp.netcssgridview

Answer №1

Freezing headers in a web application is achievable with CSS and jQuery manipulation. While freezing any column desired can be tricky, horizontal scroll remains an issue that needs further tweaking to resolve.

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a smooth transition effect using CSS/JavaScript pop-ups?

Looking for some assistance in creating a CSS pop-up with a touch of JavaScript magic. I've managed to trigger the pop-up box by clicking a link, and while it's visible, the background fades to grey. But I'm struggling to make the pop-up fad ...

javascriptcsspopuptransitionwebkit-transform

Joomla, Enhancement for iFrame Sizing

A close associate who runs his own construction business has asked me to create a website for him using Joomla. I have successfully implemented most of the features he wanted, but now I need some assistance. He wants to showcase references written about hi ...

htmlcssiframejoomla

Front-end webpage presenting coding malfunction - Written in HTML/CSS

After completing the development of a website at , I tested it on my PC and everything looked good. However, when I asked a friend to review the site, she pointed out that on mobile devices, the section with 4 boxes was appearing squeezed together despite ...

htmlcsswordpress

Is it possible to position the Sprite image to the right of the anchor tag?

I have a CSS sprite image that is functioning correctly, but I am encountering an issue where the image is displaying on the left side of the anchor tag's text instead of the right. You can view the sprite image here. Expected result: [Mylinktext]&l ...

csscss-sprites

Implementing a NONCE store using a straightforward cache system in ASP.net

How can we effectively handle NONCE requirements (similar to digest authentication) within the ASP.net pipeline? One approach could be utilizing a singleton with a straightforward dictionary-based object that stores used NONCE values and includes a timer ...

c#asp.net

Information Buffer for Log4Net with ADO.NET

Is there a way to set up the AdoNetAppender to record each occurrence of an 'Error' and only save the last 10 'Info' statements before that error? I have too many 'Info' statements cluttering up my logs and would prefer to foc ...

asp.netlog4net

Moving data from one FTP and SFTP server to another using SSIS/C# and then storing the original files in a separate directory for safekeeping

I've been facing this issue for quite some time now and I'm struggling to figure out how to resolve it using SSIS. I was considering creating a Script task in C# to tackle this problem. The challenge at hand is as follows: a new file is generate ...

c#.netssisftpsftp

How to centrally align grids in a material-ui react application

I'm trying to center Grid items horizontally inside a Grid container, while also adding some spacing between the items. Here's the code I have so far: import React from "react"; import { makeStyles } from "@material-ui/core/styles& ...

cssreactjsmaterial-uigrid

Navigating a mobile-friendly menu anytime!

I'm in the process of creating a responsive "hamburger" menu for mobile devices. The HTML code I have implemented is as follows... .menu_closed { color: red; } .menu_open { color: blue; } <script src="https://ajax.googleapis.com/ajax/libs/jq ...

javascriptjqueryhtmlcsshamburger-menu

Utilize the after: and before: selectors within Internet Explorer versions 6 and 7 for optimal performance

I recently implemented a sleek wizard style I found on a blog, but encountered some issues with compatibility in Internet Explorer. The blog mentioned that: For browsers lacking support for :after/:before/nth-child, the code may not function properly. Is ...

asp.netcsscross-browser

The alignment of my Navbar Brand is off in my Navigation Bar and won't align to

<body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs ...

htmlcss

The SQL query does not seem to be functioning within the .NET project, yet it executes successfully when run in Adminer or Php

Having trouble with my SQL query in a .NET project, even though it works fine in Adminer/PhpMyAdmin. Quite strange. Here's the code snippet: SELECT mh.id AS `id`, IFNULL(ot.name, it.name) AS name, IFNULL(ot.name_en, it.name_en) AS name_en FROM u ...

c#mysqlsql

The Font Awesome icon is not displaying on top of the Materialize CSS progress/determinate bar

I am struggling to display a Font Awesome icon on top of a Materialize CSS progress/determinate div. Unfortunately, the icon is not fully visible and part of it gets clipped or hidden. Despite trying various solutions, I have not been successful. .progres ...

cssfont-awesomematerialize

Tips for aligning my icon in the middle when I collapse my sidebar

Seeking assistance on centering the hamburger icon on my sidebar. Currently, when I adjust the width of the sidebar, the icon is not centered at all. Does anyone have a solution for achieving this? I attempted using justify-content: center in the main clas ...

css

The Div overlay vanishes once the Javascript function is finished running

Initially, take a look at this fiddle: http://jsfiddle.net/ribbs2521/Q7C3m/1/ My attempt to run JS on the fiddle has been unsuccessful, but all my code is present there, so we should be fine. I was creating my own custom image viewer, and everything was ...

javascripthtmlcss

In my specific scenario, what is the most effective method for retrieving data from an EntityFramework database using JavaScript?

Currently, within my ASP.NET MVC Core2 project, I have a model in the EF database that contains multiple properties: public class SchoolEvents { public long ID { get; set; } [Required] [StringLength(40, ErrorMessage = "Max 40 c ...

javascriptc#entity-frameworkasp.net-core-mvc

How can I add background color to WordPress mouse over text?

Hey there! I'm a beginner when it comes to WordPress and currently using version 4.2.2. I'm looking to display a mouse-over background color with text on an image. The text and images are being generated dynamically from the admin panel. Below ar ...

phpjquerycsswordpress

Troubleshooting issues with Jquery fadeIn and fadeOut - tips for implementing fadein animation using addclass and mouseover

My concept involves a shop menu displayed as a list: <li class="shop-menu"><a href="{{url('shop')}}">shop</a></li> When the shop-menu is hovered over (using a mouseover jquery function), I aim to make a div named shop-m ...

htmljquerycssanimation

Placing the image at the lower edge of the page

Looking to display thumbnails in a div with dimensions of 120x120, but struggling with the vertical alignment. The current image size is 120x57 and it's not aligning properly within the div, leaving too much space at the top. Here is the code snippet ...

imagecss

Is it possible to minify HTML in PHP without parsing JavaScript and CSS code?

After finding a solution in this discussion, I successfully managed to 'minify' HTML content. function process_content($buffer) { $search = array( '/\>[^\S ]+/s', // eliminate spaces after tags, except for ...

javascriptphphtmlcsspreg-replace