Search
Sponsor
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Tue, 21-Oct-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
38050
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads
 Article

Dynamically Scroll to Gridview Row in Asp.Net

Lakn2
Posted by under ASP.NET category on for Intermediate level | Points: 250 | Views : 16765 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 3.83 out of 5
6 vote(s)
We have 100 records in gridview and we want to select 90th record. But user is not intersted to scroll through mouse and see that record. So in my article I have added linkbuttons dynamically using placeholder.

When I click 90th record automatically scroll to 90th record and display it.

Basically this is used to scroll automatically which record you want ,by clicking linkbutton at the top of the page you can go that record.you need not scroll manually that record. My code goes like


JavaScript code to write

scroll function in client side:

<script type ="text/javascript">

function setscroll()

{

var gridCol = document.getElementById("GridView1").getElementsByTagName("td")

//alert(gridCol.length )

if(gridCol.length > 0)

{

var rowCOunt = 0;

while(rowCOunt < gridCol.length)

{

if(gridCol[rowCOunt].style.backgroundColor=="orange")

{

window.scrollTo(0,gridCol[rowCOunt].offsetTop);

break;

}

rowCOunt +=1;

}

}

}

</script>

Design code

Come to design part:

<body onload="setscroll()">

<form id="form1" runat="server">

<div id="divGrid" style="overflow: auto; height: 130px">

<asp:GridView ID="GridView1" CssClass ="newStyle1 " runat="server" CellPadding="4" ForeColor="#333333"

GridLines="None" Font-Names="Calibri">

<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />

<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />

<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />

<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<AlternatingRowStyle BackColor="White" />

</asp:GridView>

</div>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<br />

<br />

<br />

<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<br />

<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>


Server side code


And My Code behind code is

string constr = ConfigurationManager.ConnectionStrings["narayanaConnectionString"].ConnectionString;

SqlConnection cn;

protected void Page_Load(object sender, EventArgs e)

{

LinkButton lb;

if (!IsPostBack)

{

bind();

}

for (int i = 0; i < GridView1.Rows.Count; i++)

{

lb = new LinkButton();

lb.ID = "LinkButton" + i.ToString();

lb.Text = ""+GridView1.Rows[i].Cells[0].Text;

lb.Font.Name = "Verdana";

PlaceHolder1.Controls.Add(lb);

lb.Click +=new EventHandler(lb_Click);

}

}

protected void lb_Click(object sender, EventArgs e)

{

LinkButton lb = (LinkButton)sender;

int i=Convert.ToInt16 (lb.Text );

GridView1.SelectedIndex = i - 1;

GridView1.SelectedRow.Cells[0].Focus();

GridView1.SelectedRow.Cells[0].BackColor = Color.Orange ;

}

public void bind()

{

cn = new SqlConnection(constr);

SqlDataAdapter da = new SqlDataAdapter("select * from student", cn);

DataSet ds = new DataSet();

da.Fill(ds);

GridView1.DataSource = ds;

GridView1.DataBind();

}


Conclusion

In client user point of view this is really wonderful. I hope it helps you.

Thank you happy coding

Page copy protected against web site content infringement by Copyscape
About the Author

Lakn2

Full Name: LakshmiNarayana Nalluri
Member Level: Starter
Member Status: Member
Member Since: 1/7/2011 3:58:24 AM
Country: India
Thanks&Regards LakshmiNarayana Nalluri.

Login to vote for this post.
Found interesting? Add this to:


Comments or Responses

Posted by: Vijayponnada on: 4/26/2011 | Points: 25

Wow! Its really great....

Posted by: Bhanubysani on: 6/14/2011 | Points: 25

The color is changing when i select 90th record that td is changing to orange color...but scroll is not moving to that record

Posted by: Chiragkanzariya on: 11/6/2012 | Points: 25

I have New way to create Scrollable Gridview with JQuery

Check My Blog http://chiragkanzariya.blogspot.in/2012/10/scrollable-gridview-with-fixed-headers.html

Login to post response

Comment using Facebook(Author doesn't get notification)