can we add scroll above the gridview in asp.net

Hi Kunal,
i want it above the grid coz my Grid pagesize is 15 and i have 20 columns in the grid, if i had to scroll the grid to extreme right i have to scroll down then scroll right.
Instead if it will be above the grid i need not scroll down but directly scroll right.

adriancs 18-Mar-16 8:08am

Javascript can do that

Er. Puneet Goel 22-Nov-16 3:26am

are you still looking for help ?

6 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

deepankarbhatnagar · Answer 1 · 2015-09-08T02:27:00

Solution 1

HI, there is no direct property or method to do so but you can try to customise like in below links which have some examples ,hope these will be helpful..

http://forums.asp.net/t/1851667.aspx?Horizontal+scroll+on+top+as+well+as+bottom[^]

http://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table[^]

Posted 8-Sep-15 2:27am

deepankarbhatnagar

Comments

itsathere 8-Sep-15 10:02am

above solution does not match requirement.I want to implement that in "Gridviewscroll demo".
btw thanks for comment.

Member 11151967 · Answer 2 · 2015-12-01T00:59:00

HTML Page

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up" runat="server">
    <ContentTemplate>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
                </Columns>
            </asp:GridView>
                <asp:Button ID="Button1" runat="server" Text="Refresh" />
    </ContentTemplate>
</asp:UpdatePanel>

Add Jquery Plugin For Scrolling On Gridview

Java

<script src="Scripts/jquery-1.4.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 () {
        $('#<%=GridView1.ClientID %>').Scrollable({
            ScrollHeight: 300,
            IsInUpdatePanel: true
        });
    });
</script>

Cyrus_Vivek · Answer 3 · 2015-10-28T14:58:00

Solution 3

Hi,

This is already solved in other posts.

Find the live example below.

http://jsfiddle.net/TBnqw/1/[^]

-V

Posted 28-Oct-15 14:58pm

Cyrus_Vivek

Dubravko B · Answer 4 · 2015-10-29T02:35:00

Solution 4

Did you consider using CSS to do this?
There is a good example of this in this post.

Posted 29-Oct-15 2:35am

Dubravko B

koolprasad2003 · Answer 5 · 2016-05-08T21:21:00

CSS and scripting will help you to move your scrollbar above gridview
see below snippet
HTML code is as follows

HTML

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div>

//css code is as below

CSS

.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
  width:1000px;
  height: 20px;
}

.div2 {
  width:1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}

JS as below

JavaScript

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

hope it helps

Mizanur Rahman · Answer 6 · 2017-01-27T22:07:00

try This ......................

<div  style="overflow:scroll">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
     </Columns>
</asp:GridView>
</div>

can we add scroll above the gridview in asp.net

6 solutions

Solution 1

Solution 5

Solution 3

Solution 4

Solution 8

Solution 10

Add your solution here

Preview 0

can we add scroll above the gridview in asp.net

6 solutions

Solution 1

Solution 5

Solution 3

Solution 4

Solution 8

Solution 10

Add your solution here

Preview 0

Existing Members

...or Join us