ASP.NET GridView horizontal scrollbar to the top

Question

Naimish Makwana · Answer

To add a horizontal scrollbar to the top of an ASP.NET GridView, you can use a combination of HTML and CSS. Unfortunately, there’s no built-in way to do this, but you can achieve it with a bit of custom code. Here’s a simple example of how you can do it: And the corresponding CSS: .outer { overflow-x: auto; overflow-y: hidden; height: 20px; } .inner { overflow: auto; overflow-y: hidden; height: 20px; margin-bottom: -20px; padding-bottom: 20px; } In this example, the .outer div creates the scrollbar at the top, and the .inner div contains the GridView and creates a second scrollbar at the bottom. The negative margin on the .inner div hides the bottom scrollbar, so only the top one is visible. Please note that this is a workaround and might not work perfectly in all situations or with all types of content. It’s always a good idea to test thoroughly with your specific GridView and content. Also, keep in mind that this might not provide the best user experience, as users are generally accustomed to scrollbars being at the bottom. Thanks

Jayraj Chhaya · Answer

To achieve this functionality in an ASP.NET GridView, you can use JavaScript to scroll the GridView horizontally to the top. protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GridView1.Attributes.Add("style", "overflow-x:auto; overflow-y:hidden; max-height:300px;"); // Set GridView height and enable horizontal scrollbar } }

ASP.NET GridView horizontal scrollbar to the top

Answers (2)