Merhaba arkadaşlar bu makalemizde GridView
a script ile
scroll ekleyeceğiz. Dikey eklediğimiz Scroll ile GridView
da aşağı yukarı
satırlar arasında hızlı gidebileceğiz. Ayrıca GridView
da Select linkine
tıklayıp satırı seçeceğiz. Seçili satırdaki bilgileri Label
de göstereceğiz.
İlk önce GridView
ın AutoGenerateColumns="False" yapın. Sayfamıza ScriptManager
, GridView
ve
Label
ekleyelim.
Şekil 1
WebForm1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using MySql.Data.MySqlClient;
namespace maintain_scroll_position_of_gridview
{
public partial class WebForm1 :
System.Web.UI.Page
{
protected void Page_Load(object sender,
EventArgs e)
{
if (!IsPostBack)
{
bindData();
}
}
private void bindData()
{
MySqlConnection
con = new MySqlConnection("Server=localhost;Database=dbemployee;Uid=root;Pwd='2344';AllowUserVariables=True;UseCompression=True;");
con.Open();
MySqlCommand cmd
= new MySqlCommand("Select
* From person", con);
MySqlDataAdapter
da = new MySqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
GridView1.DataSource = ds;
GridView1.DataBind();
}
protected void
GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
string personId =
GridView1.SelectedRow.Cells[0].Text;
string Name =
GridView1.SelectedRow.Cells[1].Text;
string lastName =
GridView1.SelectedRow.Cells[2].Text;
string Mail =
GridView1.SelectedRow.Cells[3].Text;
ltrlPerson.Text
= String.Concat("Selected Person (Secili Kisi) : ", personId,"-", Name, "
", lastName, '(',Mail,')');
}
}
}
WebForm.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="maintain_scroll_position_of_gridview.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.divcss {
overflow-y: scroll;
height: 307px;
width: 629px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
maintainScrollPosition();
});
function pageLoad() {
maintainScrollPosition();
}
function
maintainScrollPosition() {
$("#dvScroll").scrollTop($('#<%=hfScrollPosition.ClientID%>').val());
}
function
setScrollPosition(scrollValue) {
$('#<%=hfScrollPosition.ClientID%>').val(scrollValue);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset style="height: 350px; width: 680px;">
<legend>GridView</legend>
<asp:HiddenField ID="hfScrollPosition" Value="0" runat="server" />
<div id="dvScroll" class="divcss" onscroll="setScrollPosition(this.scrollTop);" style="width:100%">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged" CellPadding="4" ForeColor="#333333" GridLines="None" Height="290px" Width="632px" Font-Size="Large">
<AlternatingRowStyle BackColor="White" />
<HeaderStyle BackColor="#000000" HorizontalAlign="Left" Font-Bold="True" ForeColor="White"></HeaderStyle>
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#0000FF" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="Person Id" />
<asp:BoundField DataField="Name" HeaderText="First Name" />
<asp:BoundField DataField="Surname" HeaderText="Last
Name" />
<asp:BoundField DataField="Contact" HeaderText="Mail" />
<asp:ButtonField CommandName="Select" Text="Select" />
</Columns>
</asp:GridView>
</div>
<div style="padding-top: 10px; font-size:large">
<asp:Literal ID="ltrlPerson" runat="server"></asp:Literal>
</div>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Click for details
Bir
makalenin daha sonuna geldik. Bir sonraki makalede görüşmek üzere. Bahadır
ŞAHİN
0 comments:
Yorum Gönder