Search content within the blog

Monday, February 9, 2009

Grid View paging using Slider Extender

Source File:

<style type="text/css">
body
{
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background-color: #ffffff;
color: #4f6b72;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #D5EDEF;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}

td.alt
{
background: #F5FAFA;
color: #797268;
}

td.boldtd
{
font: bold 13px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background: #D5EDEF;
color: #797268;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdPanel1" runat="server">
<contenttemplate>

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
DataKeyNames="ProductID" DataSourceID="SqlDataSource1"
OnDataBound="GridView1_DataBound">
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="true"
SortExpression="ProductID" InsertVisible="False" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName"
SortExpression="ProductName" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit"
SortExpression="QuantityPerUnit" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"
SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock"
SortExpression="UnitsInStock" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName"
SortExpression="CategoryName" />
</Columns>
<PagerTemplate>
<asp:TextBox ID="txtSlide" runat="server" Text='<%# GridView1.PageIndex + 1 %>' AutoPostBack="true" OnTextChanged="txtSlide_Changed"/>

<cc1:SliderExtender ID="ajaxSlider" runat="server" TargetControlID="txtSlide" Orientation="Horizontal" >
</cc1:SliderExtender>

<asp:Label ID="lblPage" runat="server" Text='<%# "Page " + (GridView1.PageIndex + 1) + " of " + GridView1.PageCount %>' />
</PagerTemplate>
</asp:GridView>

</contenttemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"

SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [CategoryName] FROM [Alphabetical list of products]">
</asp:SqlDataSource>
</div>
</form>
</body>


Code Behind:


protected void txtSlide_Changed(object sender, EventArgs e)
{
TextBox txtCurrentPage = sender as TextBox;
GridViewRow rowPager = GridView1.BottomPagerRow;
TextBox txtSliderExt = (TextBox)rowPager.Cells[0].FindControl("txtSlide");
GridView1.PageIndex = Int32.Parse(txtSliderExt.Text) - 1;
}

protected void GridView1_DataBound(object sender, EventArgs e)
{
GridViewRow rowPager = GridView1.BottomPagerRow;
SliderExtender slide = (SliderExtender)rowPager.Cells[0].FindControl("ajaxSlider");
slide.Minimum = 1;
slide.Maximum = GridView1.PageCount;
slide.Steps = GridView1.PageCount;
}