|
In this article we will explore how to create paging in dropdownlist.
 href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.effects.core.js"></script>
<script type="text/javascript" src="js/jquery.effects.blind.js"></script>
<link type="text/css" href="demos.css" rel="stylesheet" />
Step 2: Add below style sheet in the header section of the page.
<style type="text/css">
#effect
{
width: 189px;
position: relative;
overflow: auto;
border: 1px Solid Gray;
}
.textbox
{
width: 185px;
height: 14px;
}
body
{
font-size: 62.5%;
}
.myGrid
{
width: 100%;
margin: 0px 0 0px 0;
border-collapse: collapse;
}
.myGrid th
{
display: none;
}
.myGrid .pager
{
background: url(images/grid_pager.png) repeat-x top;
}
.myGrid .pager table
{
margin: 5px 0;
}
.myGrid .pager td
{
border-width: 0;
font-weight: bold;
line-height: 12px;
}
.myGrid .pager a
{
color: #fff;
text-decoration: none;
}
.myGrid .pager a:hover
{
color: Yellow;
text-decoration: none;
}
.myGrid .mouseover
{
background-color: Gray;
cursor: pointer;
}
.myGrid .mouseout
{
background-color: White;
}
</style>
Step 3: Add a script manager, text box, image and a gridview inside update panel.
< asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div>
<span id="ddlSpan" style="display:none">
<asp:TextBox ID="txtChkValue" runat="server" CssClass="textbox"></asp:TextBox>
<img id="ddlArrow" onclick="runEffect()" src="images/down_arrow.jpg" style="margin-left: -23px; margin-bottom: -4px" />
</span>
</div>
<asp:UpdatePanel runat="server" ID="updGrdView">
<ContentTemplate>
<div id="effect">
<asp:GridView ID="gvDDL" runat="server" AutoGenerateColumns="False" DataKeyNames="RecipieId" AllowPaging="true" PageSize="6" OnPageIndexChanging="gvDDL_PageIndexChanging" GridLines="None" CssClass="myGrid" PagerStyle-CssClass="pager" OnRowDataBound="gvDDL_RowDataBound">
<Columns>
<asp:BoundField DataField="By">
<ItemStyle HorizontalAlign="Left" Width="180px" Font-Size="Small" />
</asp:BoundField>
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Step 4: Add below javascript in the aspx page.
< script language="javascript" type="text/javascript">
var flagPager = false;
$(document).ready(function
() {
$("#effect").hide();
$("#ddlSpan").show();
});
//Keep the effect div visible on click of paging numbers
$('.pager').live('click', function(e) {
document.getElementById("effect").style.display = "block";
flagPager = true;
});
//Hide the effect div if it is clicked on anywhere else apart from pager and drop down list image
$(document).click(function(e) {
var invokedBy;
if (!e) {
var e = window.event;
}
if (e.target) {
invokedBy = e.target;
}
else if (e.srcElement) {
invokedBy = e.srcElement;
}
if (invokedBy.nodeType == 3) // Safari bug
{
invokedBy = invokedBy.parentNode;
}
if (invokedBy.id !== 'ddlArrow' && !flagPager) {
document.getElementById("effect").style.display = "none";
}
flagPager = false;
});
function runEffect() {
if (!($('#effect').is(":visible"))) {
$("#effect").show('blind', 200);
}
else {
$("#effect").hide('blind', 200);
}
}
//Show the selected id in alert and text in the text box
function SelectDDL(selectedText, selectedId) {
alert("Selected Id is " + selectedId);
$("#txtChkValue").val(selectedText);
runEffect();
}
</ script>
Step 5: Add below code in the code behind to retrieve the data and bind it to gridview.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string strQuery = "SELECT * FROM Recipie";
gvDLL.DataSource = GetData(strQuery);
gvDLL.DataBind();
}
}
private SqlConnection GetConnection(string m_conString)
{
SqlConnection con = new SqlConnection(m_conString);
return con;
}
private DataTable GetData(string strQuery)
{
string m_conString = CryptographyHelper.Decrypt(ConfigurationSettings.AppSettings["DBConnectionString"]);
DataTable dtDept = null;
SqlConnection con = GetConnection(m_conString);
using (con)
{
con.Open();
using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
{
dtDept = new DataTable();
sqlAdapter.Fill(dtDept);
}
}
return dtDept;
}
Step 6: Place below row data bound and page index changing in the code behind.
protected void gvDLL_RowDataBound(object sender, GridViewRowEventArgs e)
{
DataKey dk;
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='mouseover'");
e.Row.Attributes.Add("onmouseout", "this.className='mouseout'");
for (int i = 0; i < gvDLL.Columns.Count; i++)
{
dk = gvDLL.DataKeys[e.Row.DataItemIndex - (gvDLL.PageIndex * gvDLL.PageSize)];
e.Row.Cells[i].Attributes.Add("onclick", "SelectDDL('" + e.Row.Cells[i].Text + "','" + dk.Values["RecipieId"].ToString() + "')");
}
}
}
protected void gvDLL_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvDLL.PageIndex = e.NewPageIndex;
string strQuery = "SELECT * FROM Recipie";
gvDLL.DataSource = GetData(strQuery);
gvDLL.DataBind();
}
Live Demo
This ends the article of dropdownlist with paging
|